Docs

You are viewing an archived version of the docs.Go to latest version

Customize your session token

Session tokens are JWTs generated by Clerk on behalf of your instance, and convey an authenticated user session to your backend.

By default, session tokens contain claims that are required for Clerk to function. You can learn more about these "default claims" in the session tokens documentation.

This guide will show you how to customize a session token to include additional claims that you may need in your application.

Caution

The entire session token has a max size of 4kb. Exceeding this size can have adverse effects, including a possible infinite redirect loop for users who exceed this size on Next applications.

Add custom claims to your session token

  1. Navigate to the Clerk Dashboard and select your application.
  2. In the navigation sidebar, select Sessions.
  3. In the Customize your session token section, click the Edit button.
  4. In the modal that opens, you can add any claim to your session token that you need.

The following example adds the fullName and primaryEmail claims to the session token.

Clerk Dashboard showing the custom claim modal

Use the custom claims in your application

The Auth object in the @clerk/nextjs package includes a sessionClaims property that contains the custom claims you added to your session token.

Access the custom claims in your application by calling auth() in App Router applications or getAuth(req) in Pages Router applications.

The following example demonstrates how to access the fullName and primaryEmail claims that were added to the session token in the last step.

app/page.tsx
import { auth } from '@clerk/nextjs';
import { NextResponse } from 'next/server';

export default function Page() {
  const { sessionClaims } = auth();

  const firstName = sessionClaims?.fullName;

  const primaryEmail = sessionClaims?.primaryEmail;

  return NextResponse.json({ firstName, primaryEmail })
}
pages/api/example.[ts/js]
import { getAuth } from "@clerk/nextjs/server";
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { sessionClaims } = getAuth(req);

  const firstName = sessionClaims.fullName;

  const primaryEmail = sessionClaims.primaryEmail;

  return res.status(200).json({ firstName, primaryEmail })
}

Add global TypeScript type for custom session claims

To get auto-complete and prevent TypeScript errors when working with custom session claims, you can define a global type.

  1. In your application's root folder, add a types directory.
  2. Inside of the types directory, add a globals.d.ts file.
  3. Create the CustomJwtSessionClaims interface and declare it globally.
  4. Add the custom claims to the CustomJwtSessionClaims interface.

The following example demonstrates how to add the firstName and primaryEmail claims to the CustomJwtSessionClaims interface.

types/globals.d.ts
export { };

declare global {
  interface CustomJwtSessionClaims {
    firstName?: string;
    primaryEmail?: string;
  }
}

Feedback

What did you think of this content?
Edit this page on GitHub

Last updated on