Vue

Integrate Passage into your Vue application

To see a full example of using Passage in a Vue + Express.js application, please visit our sample app on Github.

Importing and using the Passage-Auth custom Element

The easiest way to add authentication to a web frontend is with a Passage Auth custom element. First you'll need to install the passage-elements (opens in a new tab) package from npm:

npm i --save @passageidentity/passage-elements

Then import the package in the module where you intend to use the custom element

import '@passageidentity/passage-elements/passage-auth';

Importing this script will register the Passage custom element for use in your Vue components. For more information about custom elements refer to the online documentation (opens in a new tab).

It's then just a matter of embedding the passage-auth element into your component that will handle login:

<div class="authContainer">
    <passage-auth :app-id="{process.env.VITE_PASSAGE_APP_ID}"></passage-auth>
</div>

Configuring Vue to recognize custom Elements

Vue works with custom elements out of the box but by default it will log a warning to the console that it could not resolve the component for the custom element. To configure Vue with information that the <passage-auth> tag is a custom element and suppress this warning you can add this configuration to vue.config.js:

compilerOptions: {
  // treat any tag that starts with passage- as custom elements
  isCustomElement: (tag) => tag.startsWith('passage-'),
}

Getting authentication status and user information

After the user has logged in with Passage, you can check if a user's auth token is valid and retrieve basic user information from Passage using the PassageUser class exported from @passageidentity/passage-auth/passage-user. This example wraps this functionality into a reusable Vue composable in useAuthStatus:

import { Passage } from '@passageidentity/passage-js';
 
export function useAuthStatus() {
    const passage = new Passage(process.env.VITE_PASSAGE_APP_ID);
    passage.currentUser.info().then((userInfo) => {});
}

The passage.session.authGuard() can be used as a route guard in your application, but it should NOT be make authorization decisions when fetching data from an API server. Route guards provide a better user experience, but less security than using one of Passage's backend libraries. For applications using an API server, you must use one of the Passage backend SDKs to safely verify user authentication tokens.