Skip to main content
Version: Next

Vanilla JS: Integrate @logto/browser

tip

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.

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/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>',
});
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​

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:

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

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​