Simplify useCustomClaims to useTokenClaims

match the APIs proposed for authkit-react

Author: nicknisi

src/components/index.ts

@@ -1,6 +1,6 @@
 import { Impersonation } from './impersonation.js';
 import { AuthKitProvider, useAuth } from './authkit-provider.js';
 import { useAccessToken } from './useAccessToken.js';
-import { useCustomClaims } from './useCustomClaims.js';
+import { useTokenClaims } from './useTokenClaims.js';
 
-export { Impersonation, AuthKitProvider, useAuth, useAccessToken, useCustomClaims };
+export { Impersonation, AuthKitProvider, useAuth, useAccessToken, useTokenClaims };

src/components/useCustomClaims.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { useAccessToken } from './useAccessToken.js';
+import { decodeJwt, type JWTPayload } from 'jose';
+
+type TokenClaims<T> = Partial<JWTPayload & T>;
+
+/**
+ * A hook that retrieves the claims from the access token.
+ *
+ * @example
+ * ```ts
+ * const {customClaim, iat } = useTokenClaims<{ customClaim: string }>();
+ * ```
+ * @returns The claims from the access token, or an empty object if the token is not available or cannot be parsed.
+ */
+export function useTokenClaims<T = Record<string, unknown>>(): TokenClaims<T> {
+  const { accessToken } = useAccessToken();
+
+  return useMemo(() => {
+    if (!accessToken) {
+      return {};
+    }
+
+    try {
+      return decodeJwt<T>(accessToken);
+    } catch {
+      return {};
+    }
+  }, [accessToken]);
+}

src/components/useTokenClaims.ts

@@ -1,7 +1,7 @@
 'use server';
 
 import { sealData, unsealData } from 'iron-session';
-import { createRemoteJWKSet, decodeJwt, jwtVerify } from 'jose';
+import { JWTPayload, createRemoteJWKSet, decodeJwt, jwtVerify } from 'jose';
 import { cookies, headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 import { NextRequest, NextResponse } from 'next/server';
@@ -355,16 +355,15 @@ async function redirectToSignIn() {
   redirect(await getAuthorizationUrl({ returnPathname, screenHint }));
 }
 
-export async function getCustomClaims<T = Record<string, unknown>>(accessToken?: string) {
+export async function getTokenClaims<T = Record<string, unknown>>(
+  accessToken?: string,
+): Promise<Partial<JWTPayload & T>> {
   const token = accessToken ?? (await withAuth()).accessToken;
   if (!token) {
-    return null;
+    return {};
   }
 
-  const decoded = decodeJwt(token);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { aud, exp, iat, iss, sub, sid, org_id, role, permissions, entitlements, jti, nbf, ...custom } = decoded;
-  return custom as T;
+  return decodeJwt<T>(token);
 }
 
 async function withAuth(options: { ensureSignedIn: true }): Promise<UserInfo>;