Typed Token Payloads

Why this guide helps

If your UI reads values from the access token—like a name, email address, role, or tenant—you can type those claims so your code stays easier to understand and harder to misuse.

Add the claims your UI actually uses

Pass a type to createAuth that matches the token fields your app cares about.

type AccessClaims = {
  sub: string;
  name: string;
  email: string;
  scope: string;
  exp: number;
};

const auth = createAuth<AccessClaims>({
  clientId: "my-client-id",
  authorizationEndpoint: "https://auth.example.com/authorize",
  tokenEndpoint: "https://auth.example.com/token",
  redirectUri: window.location.origin,
});

Use the typed claims in the places people see them

function Profile() {
  const { tokenData } = useAuthRequired(auth);

  return <p>Hello, {tokenData.name}</p>;
}

This is especially helpful when your UI depends on a few important claims and you want your editor to catch mistakes early.

Keep the type focused

Only include the claims your product actually uses.

That keeps the model simple, makes the UI easier to maintain, and avoids turning your auth setup into a dumping ground for every possible token field.

Important to know

• Typed claims improve the developer experience in TypeScript.
• They do not change the token returned by your provider.
• This guide is most useful when your provider issues JWT access tokens with readable claims.