Skip to main content
Version: 1.x

Vue: Integrate @logto/vue


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

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.


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 v-else>
<button @click="onClickSignIn">Sign In</button>

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
<!-- When it's working in progress -->
<p v-if="isLoading">Redirecting...</p>

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.

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.


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

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.


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โ€‹