open-index/open-npm huggingface dataset:
npm package: @prestashopcorp/vue-auth
Description: <h1 align="center" >🔑 Prestashop Vue Auth Module</h1>
Latest version: 0.8.2

<h1 align="center" >🔑 Prestashop Vue Auth Module</h1>

<p align="center">
This is a Vue integration for oidc-client-ts package:
<a href="https://authts.github.io/oidc-client-ts/">Read Documentation</a>
</p>


## Getting Started

Add dependencies to your project.

```bash
pnpm add @prestashopcorp/vue-auth
```

Then use the plugin after the router initialization.

```js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import { createPrestashopAuth } from "@prestashopcorp/vue-auth";

import "./assets/main.css";

const app = createApp(App);
const auth = createPrestashopAuth(router);

app.use(auth);
app.use(router);

app.mount("#app");
```

## Configuration

There are several options available with the vue package

| Config Property | Description                             | Default Value                  |
| --------------- | --------------------------------------- | ------------------------------ |
| authority       | OIDC Server URL                         | https://oauth.prestashop.com/  |
| client_id       | Your application client Id              |                                |
| scope           | Allowed for scopes for your application | openid offline_access          |

### Example

```js
createPrestashopAuth(router, {
  authority: 'https://oauth-preprod.prestashop.com/',
  client_id: 'auth-code-client',
  scope: 'openid offline_access',
  extraQueryParams: {
    audience: 'https://accounts-api.distribution.prestashop.net',
  },
})
```

## Usage

This package provide a way to authenticate user without managing the flow with the callback handling.

## API

API is available as typings exported by the package.

### Example

#### Using Injection

```vue
<template>
  <button v-if="user" @click="$auth.logout">Logout</button>
  <button v-else @click="$auth.login">Login</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  inject: ["$auth"],
  props: {},
  async data() {
    return {
      user: await this.$auth.fetchUser(),
    };
  },
});
</script>
```

#### Using composable

```vue
<template>
  <button v-if="user" @click="$auth.logout">Logout</button>
  <button v-else @click="$auth.login">Login</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useAuth } from "@prestashopcorp/vue-auth";

export default defineComponent({
  props: {},
  async data() {
    const auth = useAuth()

    return {
      user: await auth.fetchUser(),
    };
  },
});
</script>
```