Getting Started

Add dependencies to your project.

pnpm add @prestashopcorp/vue-auth

Then use the plugin after the router initialization.

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

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

<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

<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>