Skip to main content
Version: 1.x

Vanilla JS: Integrate @logto/browser


The browser SDK is framework-agnostic, meaning you can use it in any frontend framework by writing a wrapper to fit it. That's what @logto/react and @logto/vue did.


This tutorial assumes you have created an Application of type "Single Page App" in Admin Console.

Add Logto SDK as a dependencyโ€‹

npm i @logto/browser

Init LogtoClientโ€‹

Import and init LogtoClient by passing config:

import LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
appId: '<your-application-id>',

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


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:

<button onclick="logtoClient.signIn('http://localhost:3000/callback')">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. Insert the code below in your /callback route:

try {
await logtoClient.handleSignInCallback(window.location.href);
console.log(await logtoClient.isAuthenticated()); // true
} catch {
// Handle error

Now you can test the sign-in flow.

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

<button onclick="logtoClient.signOut('http://localhost:3000')">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 logtoClient.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 LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
appId: '<your-application-id>',
resources: ['<your-api-resource>'],

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

const token = await logtoClient.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โ€‹