Integrate Logto with Next.js (Pages Router)

tip

The sample project is available on our SDK repository.
The example is based on Next.js Pages Router.

Prerequisites

A Logto Cloud account or a self-hosted Logto (Check out the ⚡ Get started guide to create one if you don't have).
A Logto traditional application created.

Installation

Install Logto SDK via your favorite package manager:

npm
pnpm
yarn

npm i @logto/next

pnpm add @logto/next

yarn add @logto/next

Integration

Init LogtoClient

Import and initialize LogtoClient:

libraries/logto.ts
import LogtoClient from '@logto/next';

export const logtoClient = new LogtoClient({
  appId: '<your-application-id>',
  appSecret: '<your-app-secret-copied-from-console>',
  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
  baseUrl: 'http://localhost:3000',
  cookieSecret: 'complex_password_at_least_32_characters_long',
  cookieSecure: process.env.NODE_ENV === 'production',
});

Configure Redirect URIs

Before we dive into the details, here's a quick overview of the end-user experience. The sign-in process can be simplified as follows:

Your app invokes the sign-in method.
The user is redirected to the Logto sign-in page. For native apps, the system browser is opened.
The user signs in and is redirected back to your app (configured as the redirect URI).

Regarding redirect-based sign-in

This authentication process follows the OpenID Connect (OIDC) protocol, and Logto enforces strict security measures to protect user sign-in.
If you have multiple apps, you can use the same identity provider (Logto). Once the user signs in to one app, Logto will automatically complete the sign-in process when the user accesses another app.

To learn more about the rationale and benefits of redirect-based sign-in, see Logto sign-in experience explained.

note

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

Configure redirect URIs

Switch to the application details page of Logto Console. Add a redirect URI http://localhost:3000/api/logto/sign-in-callback.

Just like signing in, users should be redirected to Logto for signing out of the shared session. Once finished, it would be great to redirect the user back to your website. For example, add http://localhost:3000/ as the post sign-out redirect URI section.

Then click "Save" to save the changes.

Prepare API routes

Prepare API routes to connect with Logto.

Go back to your IDE/editor, use the following code to implement the API routes first:

pages/api/logto/[action].ts
import { logtoClient } from '../../../libraries/logto';

export default logtoClient.handleAuthRoutes();

This will create 4 routes automatically:

/api/logto/sign-in: Sign in with Logto.
/api/logto/sign-in-callback: Handle sign-in callback.
/api/logto/sign-out: Sign out with Logto.
/api/logto/user: Check if user is authenticated with Logto, if yes, return user info.

We have prepared the API routes, now let's implement the sign-in and sign-out buttons in your home page. We need to redirect the user to the sign-in or sign-out route when needed. To help with this, use useSWR to fetch authentication status from /api/logto/user.

Check this guide to learn more about useSWR.

/pages/index.tsx
import { type LogtoContext } from '@logto/next';
import useSWR from 'swr';

const Home = () => {
  const { data } = useSWR<LogtoContext>('/api/logto/user');

  return (
    <nav>
      {data?.isAuthenticated ? (
        <p>
          Hello, {data.claims?.sub},
          <button
            onClick={() => {
              window.location.assign('/api/logto/sign-out');
            }}
          >
            Sign Out
          </button>
        </p>
      ) : (
        <p>
          <button
            onClick={() => {
              window.location.assign('/api/logto/sign-in');
            }}
          >
            Sign In
          </button>
        </p>
      )}
    </nav>
  );
};

export default Home;

Checkpoint: Test your application

Now, you can test your application:

Run your application, you will see the sign-in button.
Click the sign-in button, the SDK will init the sign-in process and redirect you to the Logto sign-in page.
After you signed in, you will be redirected back to your application and see the sign-out button.
Click the sign-out button to clear local storage and sign out.

Get user information

Display user information

When user is signed in, there are three ways to get user information.

Through API request in front-end

pages/index.tsx
import { type LogtoContext } from '@logto/next';
import { useMemo } from 'react';
import useSWR from 'swr';

const Home = () => {
  const { data } = useSWR<LogtoContext>('/api/logto/user');

  const claims = useMemo(() => {
    if (!data?.isAuthenticated || !data.claims) {
      return null;
    }

    return (
      <div>
        <h2>Claims:</h2>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            {Object.entries(data.claims).map(([key, value]) => (
              <tr key={key}>
                <td>{key}</td>
                <td>{String(value)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }, [data]);

  return (
    <div>
      {claims}
    </div>
  );
};

export default Home;

Through `getServerSideProps`

pages/index.tsx
import { LogtoContext } from '@logto/next';
import { logtoClient } from '../../libraries/logto';

type Props = {
  user: LogtoContext;
};

const Home = ({ user }: Props) => {
  const claims = useMemo(() => {
    if (!user.isAuthenticated || !user.claims) {
      return null;
    }

    return (
      <div>
        <h2>Claims:</h2>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            {Object.entries(user.claims).map(([key, value]) => (
              <tr key={key}>
                <td>{key}</td>
                <td>{String(value)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }, [user]);

  return (
    <div>
      {claims}
    </div>
  );
};

export default Home;

export const getServerSideProps = logtoClient.withLogtoSsr(async function ({ request }) {
  const { user } = request;

  return {
    props: { user },
  };
});

In the API route

pages/api/get-user-info.ts
import { logtoClient } from '../../libraries/logto';

export default logtoClient.withLogtoApiRoute((request, response) => {
  if (!request.user.isAuthenticated) {
    response.status(401).json({ message: 'Unauthorized' });

    return;
  }

  response.json({
    data: request.user.claims,
  });
});

Request additional claims

You may find some user information are missing in the returned object from /api/logto/user. This is because OAuth 2.0 and OpenID Connect (OIDC) are designed to follow the principle of least privilege (PoLP), and Logto is built on top of these standards.

By default, limited claims are returned. If you need more information, you can request additional scopes to access more claims.

info

A "claim" is an assertion made about a subject; a "scope" is a group of claims. In the current case, a claim is a piece of information about the user.

Here's a non-normative example the scope - claim relationship:

tip

The "sub" claim means "subject", which is the unique identifier of the user (i.e. user ID).

Logto SDK will always request three scopes: openid, profile, and offline_access.

To request additional scopes, you can configure the params when init the Logto client:

libraries/logto.ts
import LogtoClient, { UserScope } from '@logto/next';

export const logtoClient = new LogtoClient({
  scopes: [UserScope.Email, UserScope.Phone], // Add more scopes if needed
  // ...other configs
});

Then you can access the additional claims in the context response:

pages/index.tsx
const Home = () => {
  const { data } = useSWR<LogtoContext>('/api/logto/user');

  const email = data?.claims?.email;

  return (
    <div>
      {email && <p>Email: {email}</p>}
    </div>
  );
};

export default Home;

Claims that need network requests

To prevent bloating the ID token, some claims require network requests to fetch. For example, the custom_data claim is not included in the user object even if it's requested in the scopes. To access these claims, you can configure the fetchUserInfo option:

pages/index.tsx
import { logtoClient } from '../../../libraries/logto';

export default logtoClient.handleAuthRoutes({ fetchUserInfo: true });

By configuring fetchUserInfo, the SDK will fetch the user information by requesting to the userinfo endpoint after the user is signed in, and req.user.userInfo will be available once the request is completed.

Fetch user information manually

You can manually fetch user information in the API route:

pages/api/get-user-info.ts
import { logtoClient } from '../../libraries/logto';

export default logtoClient.withLogtoApiRoute(
  (request, response) => {
    if (!request.user.isAuthenticated) {
      response.status(401).json({ message: 'Unauthorized' });

      return;
    }

    response.json({
      userInfo: request.user.userInfo,
    });
  },
  { fetchUserInfo: true }
);

Scopes and claims

Logto uses OIDC scopes and claims conventions to define the scopes and claims for retrieving user information from the ID token and OIDC userinfo endpoint. Both of the "scope" and the "claim" are terms from the OAuth 2.0 and OpenID Connect (OIDC) specifications.

Here's the list of supported scopes and the corresponding claims:

openid

Claim name	Type	Description	Needs userinfo?
sub	`string`	The unique identifier of the user	No

profile

Claim name	Type	Description	Needs userinfo?
name	`string`	The full name of the user	No
username	`string`	The username of the user	No
picture	`string`	URL of the End-User's profile picture. This URL MUST refer to an image file (for example, a PNG, JPEG, or GIF image file), rather than to a Web page containing an image. Note that this URL SHOULD specifically reference a profile photo of the End-User suitable for displaying when describing the End-User, rather than an arbitrary photo taken by the End-User.	No
created_at	`number`	Time the End-User was created. The time is represented as the number of milliseconds since the Unix epoch (1970-01-01T00:00:00Z).	No
updated_at	`number`	Time the End-User's information was last updated. The time is represented as the number of milliseconds since the Unix epoch (1970-01-01T00:00:00Z).	No

Other standard claims include family_name, given_name, middle_name, nickname, preferred_username, profile, website, gender, birthdate, zoneinfo, and locale will be also included in the profile scope without the need for requesting the userinfo endpoint. A difference compared to the claims above is that these claims will only be returned when their values are not empty, while the claims above will return null if the values are empty.

note

Unlike the standard claims, the created_at and updated_at claims are using milliseconds instead of seconds.

email

Claim name	Type	Description	Needs userinfo?
email	`string`	The email address of the user	No
email_verified	`boolean`	Whether the email address has been verified	No

phone

Claim name	Type	Description	Needs userinfo?
phone_number	`string`	The phone number of the user	No
phone_number_verified	`boolean`	Whether the phone number has been verified	No

address

Please refer to the OpenID Connect Core 1.0 for the details of the address claim.

custom_data

Claim name	Type	Description	Needs userinfo?
custom_data	`object`	The custom data of the user	Yes

identities

Claim name	Type	Description	Needs userinfo?
identities	`object`	The linked identities of the user	Yes
sso_identities	`array`	The linked SSO identities of the user	Yes

urn:logto:scope:organizations

Claim name	Type	Description	Needs userinfo?
organizations	`string[]`	The organization IDs the user belongs to	No
organization_data	`object[]`	The organization data the user belongs to	Yes

urn:logto:scope:organization_roles

Claim name	Type	Description	Needs userinfo?
organization_roles	`string[]`	The organization roles the user belongs to with the format of `<organization_id>:<role_name>`	No

Considering performance and the data size, if "Needs userinfo?" is "Yes", it means the claim will not show up in the ID token, but will be returned in the userinfo endpoint response.

API resources

We recommend to read 🔐 Role-Based Access Control (RBAC) first to understand the basic concepts of Logto RBAC and how to set up API resources properly.

Configure Logto client

Once you have set up the API resources, you can add them when configuring Logto in your app:

libraries/logto.ts
export const logtoClient = new LogtoClient({
  // ...other configs
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'], // Add API resources
});

Each API resource has its own permissions (scopes).

For example, the https://shopping.your-app.com/api resource has the shopping:read and shopping:write permissions, and the https://store.your-app.com/api resource has the store:read and store:write permissions.

To request these permissions, you can add them when configuring Logto in your app:

libraries/logto.ts
export const logtoClient = new LogtoClient({
  // ...other configs
  scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
});

You may notice that scopes are defined separately from API resources. This is because Resource Indicators for OAuth 2.0 specifies the final scopes for the request will be the cartesian product of all the scopes at all the target services.

Thus, in the above case, scopes can be simplified from the definition in Logto, both of the API resources can have read and write scopes without the prefix. Then, in the Logto config:

libraries/logto.ts
export const logtoClient = new LogtoClient({
  // ...other configs
  scopes: ['read', 'write'],
  resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
});

For every API resource, it will request for both read and write scopes.

note

It is fine to request scopes that are not defined in the API resources. For example, you can request the email scope even if the API resources don't have the email scope available. Unavailable scopes will be safely ignored.

After the successful sign-in, Logto will issue proper scopes to API resources according to the user's roles.

Fetch access token for the API resource

To fetch the access token for a specific API resource, you can use the getAccessToken method:

pages/api/get-access-token.ts
import { logtoClient } from '../../../libraries/logto';

export default logtoClient.withLogtoApiRoute(
  (request, response) => {
    if (!request.user.isAuthenticated) {
      response.status(401).json({ message: 'Unauthorized' });

      return;
    }

    // Get access token here
    console.log(request.user.accessToken);
    response.json(request.user);
  },
  {
    getAccessToken: true,
    resource: 'https://shopping.your-app.com/api',
  }
);

This method will return a JWT access token that can be used to access the API resource when the user has related permissions. If the current cached access token has expired, this method will automatically try to use a refresh token to get a new access token.

Fetch organization tokens

If organization is new to you, please read 🏢 Organizations (Multi-tenancy) to get started.

You need to add UserScope.Organizations scope when configuring the Logto client:

libraries/logto.ts
import { UserScope } from '@logto/next';

export const logtoClient = new LogtoClient({
  // ...other configs
  scopes: [UserScope.Organizations],
});

Once the user is signed in, you can fetch the organization token for the user:

pages/api/organizations.ts
import { logtoClient } from '../../../libraries/logto';

export default logtoClient.withLogtoApiRoute(async (request, response) => {
  if (!request.user.isAuthenticated) {
    response.status(401).json({ message: 'Unauthorized' });

    return;
  }

  const client = await logtoClient.createNodeClientFromNextApi(request, response);

  // Organization IDs are stored in the user's ID token claims
  const { organizations = [] } = await client.getIdTokenClaims();

  const organizationTokens = await Promise.all(
    organizations.map(async (organizationId) => client.getOrganizationToken(organizationId))
  );

  const organizationClaims = await Promise.all(
    organizations.map(async (organizationId) => client.getOrganizationTokenClaims(organizationId))
  );

  // Do things with the organization token and / or claims

  response.json({
    organizations,
  });
});

Edge runtime

Added in @logto/[email protected]

If you want to use the edge runtime API routes, you need to use the sub package @logto/next/edge.

libraries/logto.ts
import LogtoClient from '@logto/next/edge';

export const logtoClient = new LogtoClient({
  appId: '<your-application-id>',
  appSecret: '<your-app-secret-copied-from-console>',
  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
  baseUrl: '<your-nextjs-app-base-url>', // E.g. http://localhost:3000
  cookieSecret: 'complex_password_at_least_32_characters_long',
  cookieSecure: process.env.NODE_ENV === 'production',
  resources: ['<your-api-resource>'],
});

Then set the runtime to experimental-edge or edge in the API route.

pages/api/logto/sign-in.ts
import { logtoClient } from '../../../../libraries/logto';

export default logtoClient.handleSignIn();

export const config = {
  runtime: 'experimental-edge',
};

note

Check the next-sample to see full example.

Integrate Logto with Next.js (Pages Router)

Prerequisites​

Installation​

Integration​

Init LogtoClient​

Configure Redirect URIs​

Configure redirect URIs​

Prepare API routes​

Implement sign-in and sign-out​

Checkpoint: Test your application​

Get user information​

Display user information​

Through API request in front-end​

Through getServerSideProps​

In the API route​

Request additional claims​

Claims that need network requests​

Fetch user information manually​

Scopes and claims​

API resources​

Configure Logto client​

Fetch access token for the API resource​

Fetch organization tokens​

Edge runtime​

Further readings​

Prerequisites

Installation

Integration

Init LogtoClient

Configure Redirect URIs

Configure redirect URIs

Prepare API routes

Implement sign-in and sign-out

Checkpoint: Test your application

Get user information

Display user information

Through API request in front-end

Through `getServerSideProps`

In the API route

Request additional claims

Claims that need network requests

Fetch user information manually

Scopes and claims

API resources

Configure Logto client

Fetch access token for the API resource

Fetch organization tokens

Edge runtime

Further readings