@imtbl/auth-next-client 2.12.7-alpha.7 → 2.12.7-alpha.8

package/README.md

@@ -582,7 +582,7 @@ The session type returned by `useImmutableSession`. Note that `accessToken` is i
 interface ImmutableSession {
   // accessToken is NOT exposed -- use getAccessToken() instead
   refreshToken?: string;
-  idToken?: string;
+  idToken?: string; // Only present transiently after sign-in or token refresh (not stored in cookie)
   accessTokenExpires: number;
   zkEvm?: {
     ethAddress: string;
@@ -597,6 +597,8 @@ interface ImmutableSession {
 }
 ```
 
+> **Note:** The `idToken` is **not** stored in the session cookie (to avoid CloudFront 413 errors from oversized headers). It is only present in the session response transiently after sign-in or token refresh. `@imtbl/auth-next-client` automatically persists it in `localStorage` so that `getUser()` always returns a valid `idToken` for wallet operations. All data extracted from the idToken (`email`, `nickname`, `zkEvm`) remains in the cookie as separate fields and is always available in the session.
+
 ### LoginConfig
 
 Configuration for the `useLogin` hook's login functions:

package/dist/node/index.cjs

@@ -41,6 +41,34 @@ var DEFAULT_TOKEN_EXPIRY_SECONDS = 900;
 var DEFAULT_TOKEN_EXPIRY_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1e3;
 var TOKEN_EXPIRY_BUFFER_MS = 60 * 1e3;
 
+// src/idTokenStorage.ts
+var ID_TOKEN_STORAGE_KEY = "imtbl_id_token";
+function storeIdToken(idToken) {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.setItem(ID_TOKEN_STORAGE_KEY, idToken);
+    }
+  } catch {
+  }
+}
+function getStoredIdToken() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage.getItem(ID_TOKEN_STORAGE_KEY) ?? void 0;
+    }
+  } catch {
+  }
+  return void 0;
+}
+function clearStoredIdToken() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.removeItem(ID_TOKEN_STORAGE_KEY);
+    }
+  } catch {
+  }
+}
+
 // src/callback.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function getSearchParams() {
@@ -90,6 +118,9 @@ function CallbackPage({
           window.close();
         } else {
           const tokenData = mapTokensToSignInData(tokens);
+          if (tokens.idToken) {
+            storeIdToken(tokens.idToken);
+          }
           const result = await (0, import_react2.signIn)(IMMUTABLE_PROVIDER_ID, {
             tokens: JSON.stringify(tokenData),
             redirect: false
@@ -214,6 +245,11 @@ function useImmutableSession() {
       deduplicatedUpdate(() => updateRef.current());
     }
   }, [session?.accessTokenExpires]);
+  (0, import_react3.useEffect)(() => {
+    if (session?.idToken) {
+      storeIdToken(session.idToken);
+    }
+  }, [session?.idToken]);
   const getUser = (0, import_react3.useCallback)(async (forceRefresh) => {
     let currentSession;
     if (forceRefresh) {
@@ -223,6 +259,9 @@ function useImmutableSession() {
         currentSession = updatedSession;
         if (currentSession) {
           sessionRef.current = currentSession;
+          if (currentSession.idToken) {
+            storeIdToken(currentSession.idToken);
+          }
         }
       } catch (error) {
         console.error("[auth-next-client] Force refresh failed:", error);
@@ -235,6 +274,9 @@ function useImmutableSession() {
       if (refreshed) {
         currentSession = refreshed;
         sessionRef.current = currentSession;
+        if (currentSession.idToken) {
+          storeIdToken(currentSession.idToken);
+        }
       } else {
         currentSession = sessionRef.current;
       }
@@ -251,7 +293,9 @@ function useImmutableSession() {
     return {
       accessToken: currentSession.accessToken,
       refreshToken: currentSession.refreshToken,
-      idToken: currentSession.idToken,
+      // Prefer session idToken (fresh after sign-in or refresh, before useEffect
+      // stores it), fall back to localStorage for normal reads (cookie has no idToken).
+      idToken: currentSession.idToken || getStoredIdToken(),
       profile: {
         sub: currentSession.user?.sub ?? "",
         email: currentSession.user?.email ?? void 0,
@@ -291,6 +335,9 @@ function useLogin() {
   const [isLoggingIn, setIsLoggingIn] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)(null);
   const signInWithTokens = (0, import_react3.useCallback)(async (tokens) => {
+    if (tokens.idToken) {
+      storeIdToken(tokens.idToken);
+    }
     const result = await (0, import_react4.signIn)(IMMUTABLE_PROVIDER_ID, {
       tokens: JSON.stringify(tokens),
       redirect: false
@@ -357,6 +404,7 @@ function useLogout() {
     setIsLoggingOut(true);
     setError(null);
     try {
+      clearStoredIdToken();
       await (0, import_react4.signOut)({ redirect: false });
       (0, import_auth2.logoutWithRedirect)(config);
     } catch (err) {

package/dist/node/index.js

@@ -12,6 +12,34 @@ var DEFAULT_TOKEN_EXPIRY_SECONDS = 900;
 var DEFAULT_TOKEN_EXPIRY_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1e3;
 var TOKEN_EXPIRY_BUFFER_MS = 60 * 1e3;
 
+// src/idTokenStorage.ts
+var ID_TOKEN_STORAGE_KEY = "imtbl_id_token";
+function storeIdToken(idToken) {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.setItem(ID_TOKEN_STORAGE_KEY, idToken);
+    }
+  } catch {
+  }
+}
+function getStoredIdToken() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage.getItem(ID_TOKEN_STORAGE_KEY) ?? void 0;
+    }
+  } catch {
+  }
+  return void 0;
+}
+function clearStoredIdToken() {
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.removeItem(ID_TOKEN_STORAGE_KEY);
+    }
+  } catch {
+  }
+}
+
 // src/callback.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function getSearchParams() {
@@ -61,6 +89,9 @@ function CallbackPage({
           window.close();
         } else {
           const tokenData = mapTokensToSignInData(tokens);
+          if (tokens.idToken) {
+            storeIdToken(tokens.idToken);
+          }
           const result = await signIn(IMMUTABLE_PROVIDER_ID, {
             tokens: JSON.stringify(tokenData),
             redirect: false
@@ -195,6 +226,11 @@ function useImmutableSession() {
       deduplicatedUpdate(() => updateRef.current());
     }
   }, [session?.accessTokenExpires]);
+  useEffect2(() => {
+    if (session?.idToken) {
+      storeIdToken(session.idToken);
+    }
+  }, [session?.idToken]);
   const getUser = useCallback(async (forceRefresh) => {
     let currentSession;
     if (forceRefresh) {
@@ -204,6 +240,9 @@ function useImmutableSession() {
         currentSession = updatedSession;
         if (currentSession) {
           sessionRef.current = currentSession;
+          if (currentSession.idToken) {
+            storeIdToken(currentSession.idToken);
+          }
         }
       } catch (error) {
         console.error("[auth-next-client] Force refresh failed:", error);
@@ -216,6 +255,9 @@ function useImmutableSession() {
       if (refreshed) {
         currentSession = refreshed;
         sessionRef.current = currentSession;
+        if (currentSession.idToken) {
+          storeIdToken(currentSession.idToken);
+        }
       } else {
         currentSession = sessionRef.current;
       }
@@ -232,7 +274,9 @@ function useImmutableSession() {
     return {
       accessToken: currentSession.accessToken,
       refreshToken: currentSession.refreshToken,
-      idToken: currentSession.idToken,
+      // Prefer session idToken (fresh after sign-in or refresh, before useEffect
+      // stores it), fall back to localStorage for normal reads (cookie has no idToken).
+      idToken: currentSession.idToken || getStoredIdToken(),
       profile: {
         sub: currentSession.user?.sub ?? "",
         email: currentSession.user?.email ?? void 0,
@@ -272,6 +316,9 @@ function useLogin() {
   const [isLoggingIn, setIsLoggingIn] = useState2(false);
   const [error, setError] = useState2(null);
   const signInWithTokens = useCallback(async (tokens) => {
+    if (tokens.idToken) {
+      storeIdToken(tokens.idToken);
+    }
     const result = await signIn2(IMMUTABLE_PROVIDER_ID, {
       tokens: JSON.stringify(tokens),
       redirect: false
@@ -338,6 +385,7 @@ function useLogout() {
     setIsLoggingOut(true);
     setError(null);
     try {
+      clearStoredIdToken();
       await signOut({ redirect: false });
       rawLogoutWithRedirect(config);
     } catch (err) {

package/dist/types/idTokenStorage.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Utility for persisting idToken in localStorage.
+ *
+ * The idToken is stripped from the NextAuth session cookie (via a custom
+ * jwt.encode in @imtbl/auth-next-server) to keep cookie size under CDN header
+ * limits (CloudFront 20 KB). Instead, the client stores idToken in
+ * localStorage so that wallet operations (e.g., MagicTEESigner) can still
+ * access it via getUser().
+ *
+ * All functions are safe to call during SSR or in restricted environments
+ * (e.g., incognito mode with localStorage disabled) -- they silently no-op.
+ */
+/**
+ * Store the idToken in localStorage.
+ * @param idToken - The raw ID token JWT string
+ */
+export declare function storeIdToken(idToken: string): void;
+/**
+ * Retrieve the idToken from localStorage.
+ * @returns The stored idToken, or undefined if not available.
+ */
+export declare function getStoredIdToken(): string | undefined;
+/**
+ * Remove the idToken from localStorage (e.g., on logout).
+ */
+export declare function clearStoredIdToken(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/auth-next-client",
-  "version": "2.12.7-alpha.7",
+  "version": "2.12.7-alpha.8",
   "description": "Immutable Auth.js v5 integration for Next.js - Client-side components",
   "author": "Immutable",
   "license": "Apache-2.0",
@@ -27,8 +27,8 @@
     }
   },
   "dependencies": {
-    "@imtbl/auth": "2.12.7-alpha.7",
-    "@imtbl/auth-next-server": "2.12.7-alpha.7"
+    "@imtbl/auth": "2.12.7-alpha.8",
+    "@imtbl/auth-next-server": "2.12.7-alpha.8"
   },
   "peerDependencies": {
     "next": "^15.0.0",

package/src/callback.tsx

@@ -6,6 +6,7 @@ import { signIn } from 'next-auth/react';
 import { handleLoginCallback as handleAuthCallback, type TokenResponse } from '@imtbl/auth';
 import type { ImmutableUserClient } from './types';
 import { IMMUTABLE_PROVIDER_ID } from './constants';
+import { storeIdToken } from './idTokenStorage';
 
 /**
  * Config for CallbackPage - matches LoginConfig from @imtbl/auth
@@ -159,6 +160,12 @@ export function CallbackPage({
           // Not in a popup - sign in to NextAuth with the tokens
           const tokenData = mapTokensToSignInData(tokens);
 
+          // Persist idToken to localStorage before signIn so it's available
+          // immediately. The cookie won't contain idToken (stripped by jwt.encode).
+          if (tokens.idToken) {
+            storeIdToken(tokens.idToken);
+          }
+
           const result = await signIn(IMMUTABLE_PROVIDER_ID, {
             tokens: JSON.stringify(tokenData),
             redirect: false,

package/src/hooks.tsx

@@ -19,6 +19,7 @@ import {
   logoutWithRedirect as rawLogoutWithRedirect,
 } from '@imtbl/auth';
 import { IMMUTABLE_PROVIDER_ID, TOKEN_EXPIRY_BUFFER_MS } from './constants';
+import { storeIdToken, getStoredIdToken, clearStoredIdToken } from './idTokenStorage';
 
 // ---------------------------------------------------------------------------
 // Module-level deduplication for session refresh
@@ -189,6 +190,20 @@ export function useImmutableSession(): UseImmutableSessionReturn {
     }
   }, [session?.accessTokenExpires]);
 
+  // ---------------------------------------------------------------------------
+  // Sync idToken to localStorage
+  // ---------------------------------------------------------------------------
+
+  // The idToken is stripped from the cookie by jwt.encode on the server to avoid
+  // CloudFront 413 errors. It is only present in the session response transiently
+  // after sign-in or token refresh. When present, persist it in localStorage so
+  // that getUser() can always return it (used by wallet's MagicTEESigner).
+  useEffect(() => {
+    if (session?.idToken) {
+      storeIdToken(session.idToken);
+    }
+  }, [session?.idToken]);
+
   /**
    * Get user function for wallet integration.
    * Returns a User object compatible with @imtbl/wallet's getUser option.
@@ -213,6 +228,10 @@ export function useImmutableSession(): UseImmutableSessionReturn {
         // Also update the ref so subsequent calls get the fresh data
         if (currentSession) {
           sessionRef.current = currentSession;
+          // Immediately persist fresh idToken to localStorage (avoids race with useEffect)
+          if (currentSession.idToken) {
+            storeIdToken(currentSession.idToken);
+          }
         }
       } catch (error) {
         // eslint-disable-next-line no-console
@@ -229,6 +248,10 @@ export function useImmutableSession(): UseImmutableSessionReturn {
       if (refreshed) {
         currentSession = refreshed as ImmutableSessionInternal;
         sessionRef.current = currentSession;
+        // Persist fresh idToken to localStorage immediately
+        if (currentSession.idToken) {
+          storeIdToken(currentSession.idToken);
+        }
       } else {
         currentSession = sessionRef.current;
       }
@@ -252,7 +275,9 @@ export function useImmutableSession(): UseImmutableSessionReturn {
     return {
       accessToken: currentSession.accessToken,
       refreshToken: currentSession.refreshToken,
-      idToken: currentSession.idToken,
+      // Prefer session idToken (fresh after sign-in or refresh, before useEffect
+      // stores it), fall back to localStorage for normal reads (cookie has no idToken).
+      idToken: currentSession.idToken || getStoredIdToken(),
       profile: {
         sub: currentSession.user?.sub ?? '',
         email: currentSession.user?.email ?? undefined,
@@ -387,6 +412,12 @@ export function useLogin(): UseLoginReturn {
     profile: { sub: string; email?: string; nickname?: string };
     zkEvm?: ZkEvmInfo;
   }) => {
+    // Persist idToken to localStorage before signIn so it's available immediately.
+    // The cookie won't contain idToken (stripped by jwt.encode on the server).
+    if (tokens.idToken) {
+      storeIdToken(tokens.idToken);
+    }
+
     const result = await signIn(IMMUTABLE_PROVIDER_ID, {
       tokens: JSON.stringify(tokens),
       redirect: false,
@@ -550,6 +581,9 @@ export function useLogout(): UseLogoutReturn {
     setError(null);
 
     try {
+      // Clear idToken from localStorage before clearing session
+      clearStoredIdToken();
+
       // First, clear the NextAuth session (this clears the JWT cookie)
       // We use redirect: false to handle the redirect ourselves for federated logout
       await signOut({ redirect: false });

package/src/idTokenStorage.ts

@@ -0,0 +1,56 @@
+/**
+ * Utility for persisting idToken in localStorage.
+ *
+ * The idToken is stripped from the NextAuth session cookie (via a custom
+ * jwt.encode in @imtbl/auth-next-server) to keep cookie size under CDN header
+ * limits (CloudFront 20 KB). Instead, the client stores idToken in
+ * localStorage so that wallet operations (e.g., MagicTEESigner) can still
+ * access it via getUser().
+ *
+ * All functions are safe to call during SSR or in restricted environments
+ * (e.g., incognito mode with localStorage disabled) -- they silently no-op.
+ */
+
+const ID_TOKEN_STORAGE_KEY = 'imtbl_id_token';
+
+/**
+ * Store the idToken in localStorage.
+ * @param idToken - The raw ID token JWT string
+ */
+export function storeIdToken(idToken: string): void {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.setItem(ID_TOKEN_STORAGE_KEY, idToken);
+    }
+  } catch {
+    // Silently ignore -- localStorage may be unavailable (SSR, incognito, etc.)
+  }
+}
+
+/**
+ * Retrieve the idToken from localStorage.
+ * @returns The stored idToken, or undefined if not available.
+ */
+export function getStoredIdToken(): string | undefined {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      return window.localStorage.getItem(ID_TOKEN_STORAGE_KEY) ?? undefined;
+    }
+  } catch {
+    // Silently ignore
+  }
+  return undefined;
+}
+
+/**
+ * Remove the idToken from localStorage (e.g., on logout).
+ */
+export function clearStoredIdToken(): void {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      window.localStorage.removeItem(ID_TOKEN_STORAGE_KEY);
+    }
+  } catch {
+    // Silently ignore
+  }
+}