Skip to main content
Version: Next

Vue: Integrate @logto/vue

note

This tutorial assumes you have created an Application of type "Single Page App" in Admin Console. If you are not ready, read this before continuing.

Add Logto SDK as a dependency​

npm i @logto/vue
note
We only support Vue 3 Composition API at this point. Will add support to Vue Options API and possibly Vue 2 in future releases.

Init LogtoClient​

Import and use createLogto to install Logto plugin:

import { createLogto, LogtoConfig } from '@logto/vue';

const config: LogtoConfig = {
  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
  appId: '<your-application-id>',
};

const app = createApp(App);

app.use(createLogto, config);
app.mount('#app');
note

In the following code snippets, we assume your app is running on http://localhost:3000.

Sign in​

The sign-in flow can be simplified as:

Web sign-in flow

Configure Redirect URI​

Let's switch to the Application details page of Admin Console in this section. Add a Redirect URI http://localhost:3000/callback and click "Save Changes".

Redirect URI in Admin Console

Redirect URI is an OAuth 2.0 concept which implies the location should redirect after authentication.

Implement a sign-in button​

We provide two composables useHandleSignInCallback() and useLogto() which can help you easily manage the authentication flow.

note

Before calling .signIn(), make sure you have correctly configured Redirect URI in Admin Console.

Go back to your IDE/editor, use the following code to implement the sign-in button:

import { useLogto } from '@logto/vue';

const { signIn, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:3000/callback');
<div v-if="isAuthenticated">
  <div>Signed in</div>
</div>
<div v-else>
  <button @click="onClickSignIn">Sign In</button>
</div>

Handle redirect​

We're almost there! In the last step, we use http://localhost:3000/callback as the Redirect URI, and now we need to handle it properly.

First let's create a callback component:

// CallbackView.vue
import { useHandleSignInCallback } from '@logto/vue';
const { isLoading } = useHandleSignInCallback(() => {
  // Navigate to root path when finished
});
<template>
  <!-- When it's working in progress -->
  <p v-if="isLoading">Redirecting...</p>
</template>

Finally insert the code below in your /callback route which does NOT require authentication:

// Assuming vue-router
const router = createRouter({
  routes: [
    {
      path: '/callback',
      name: 'callback',
      component: CallbackView,
    },
  ],
});

Sign out​

Calling .signOut() will clear all the Logto data in memory and localStorage if they exist.

After signing out, it'll be great to redirect your user back to your website. Let's add http://localhost:3000 as one of the Post Sign-out URIs in Admin Console (shows under Redirect URIs), and use the URL as the parameter when calling .signOut().

Implement a sign-out button​

import { useLogto } from '@logto/vue';

const { signOut } = useLogto();
const onClickSignOut = () => signOut('http://localhost:3000');
<button @click="onClickSignOut">Sign Out</button>

Fetch user information​

Logto SDK helps you fetch the user information from the OIDC UserInfo Endpoint.

You can get the user information by calling fetchUserInfo() after signing in.

The user information response will vary based on the scopes used in the LogtoConfig while initializing the LogtoClient; and the following table lists the relations between user information and scopes:

Field NameTypeRequired ScopeNotes
substringopenidThe openid scope is added by default.
namestringprofileThe profile scope is added by default.
usernamestringprofileThe profile scope is added by default.
picturestringprofileThe profile scope is added by default.
emailstringemail
email_verifiedbooleanemail
phone_numberstringphone
phone_number_verifiedbooleanphone
custom_dataobjectcustom_data
identitiesobjectidentities

Backend API authorization​

Logto also helps you apply authorization to your backend APIs . Please check our Protect your API see how to integrate Logto with your backend applications.

You can claim an authorization token for a protected API Resource request easily through Logto SDK.

info

In order to grant an audience restricted authorization token for your request, make sure the requested API Resource is registered in the Logto Admin Console.

Add your API resource indicators to the Logto SDK configs:

import { createLogto, LogtoConfig } from '@logto/vue';

const config: LogtoConfig = {
  appId: '<your-application-id>',
  endpoint: '<your-logto-endpoint>',
  resources: ['<your-api-resource>'],
};

const app = createApp(App);

app.use(createLogto, config);
app.mount('#app');

Claim an authorization token from Logto before making your API request:

const { getAccessToken } = useLogto();
const token = await getAccessToken('<your-target-api-resource>');
// custom logic

With the user's authorization status, a JWT format access_token will be granted and issued by Logto, specifically for the requested API resource. Encrypted and audience-restricted with an expiration time. The token carries all the necessary info to represent the authority of this request.

Put the token in the Authorization field of HTTP headers with the Bearer format (Bearer YOUR_TOKEN), and you are good to go.

note

The Bearer Token's integration flow may vary based on the framework or requester you are using. Choose your own way to apply the request Authorization header.

Further readings​