@imtbl/auth-next-client 2.12.5-alpha.13

package/dist/node/index.cjs

@@ -0,0 +1,501 @@
+'use client';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CallbackPage: () => CallbackPage,
+  ImmutableAuthProvider: () => ImmutableAuthProvider,
+  MarketingConsentStatus: () => import_auth4.MarketingConsentStatus,
+  useAccessToken: () => useAccessToken,
+  useHydratedData: () => useHydratedData,
+  useImmutableAuth: () => useImmutableAuth
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_react2 = require("next-auth/react");
+var import_auth2 = require("@imtbl/auth");
+
+// src/utils/token.ts
+var import_auth = require("@imtbl/auth");
+
+// src/constants.ts
+var DEFAULT_AUTH_DOMAIN = "https://auth.immutable.com";
+var DEFAULT_AUDIENCE = "platform_api";
+var DEFAULT_SCOPE = "openid profile email offline_access transact";
+var IMMUTABLE_PROVIDER_ID = "immutable";
+var DEFAULT_NEXTAUTH_BASE_PATH = "/api/auth";
+var DEFAULT_TOKEN_EXPIRY_SECONDS = 900;
+var DEFAULT_TOKEN_EXPIRY_MS = DEFAULT_TOKEN_EXPIRY_SECONDS * 1e3;
+
+// src/utils/token.ts
+function getTokenExpiry(accessToken) {
+  if (!accessToken) {
+    return Date.now() + DEFAULT_TOKEN_EXPIRY_MS;
+  }
+  try {
+    const payload = (0, import_auth.decodeJwtPayload)(accessToken);
+    if (payload.exp && typeof payload.exp === "number") {
+      return payload.exp * 1e3;
+    }
+    return Date.now() + DEFAULT_TOKEN_EXPIRY_MS;
+  } catch {
+    return Date.now() + DEFAULT_TOKEN_EXPIRY_MS;
+  }
+}
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ImmutableAuthContext = (0, import_react.createContext)(null);
+function ImmutableAuthInner({
+  children,
+  config,
+  basePath
+}) {
+  const [auth, setAuth] = (0, import_react.useState)(null);
+  const prevConfigRef = (0, import_react.useRef)(null);
+  const authInstanceRef = (0, import_react.useRef)(null);
+  const [isAuthReady, setIsAuthReady] = (0, import_react.useState)(false);
+  const { data: session, update: updateSession } = (0, import_react2.useSession)();
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return void 0;
+    const configKey = [
+      config.clientId,
+      config.redirectUri,
+      config.popupRedirectUri || "",
+      config.logoutRedirectUri || "",
+      config.audience || DEFAULT_AUDIENCE,
+      config.scope || DEFAULT_SCOPE,
+      config.authenticationDomain || DEFAULT_AUTH_DOMAIN,
+      config.passportDomain || ""
+    ].join(":");
+    if (prevConfigRef.current === configKey && authInstanceRef.current !== null) {
+      return void 0;
+    }
+    prevConfigRef.current = configKey;
+    const newAuth = new import_auth2.Auth({
+      clientId: config.clientId,
+      redirectUri: config.redirectUri,
+      popupRedirectUri: config.popupRedirectUri,
+      logoutRedirectUri: config.logoutRedirectUri,
+      audience: config.audience || DEFAULT_AUDIENCE,
+      scope: config.scope || DEFAULT_SCOPE,
+      authenticationDomain: config.authenticationDomain || DEFAULT_AUTH_DOMAIN,
+      passportDomain: config.passportDomain
+    });
+    authInstanceRef.current = newAuth;
+    setAuth(newAuth);
+    setIsAuthReady(true);
+    return () => {
+      authInstanceRef.current = null;
+      setAuth(null);
+      setIsAuthReady(false);
+    };
+  }, [config]);
+  (0, import_react.useEffect)(() => {
+    if (!auth || !isAuthReady) return void 0;
+    const handleLoggedIn = async (authUser) => {
+      if (session?.accessToken && authUser.accessToken !== session.accessToken) {
+        await updateSession({
+          accessToken: authUser.accessToken,
+          refreshToken: authUser.refreshToken,
+          idToken: authUser.idToken,
+          accessTokenExpires: getTokenExpiry(authUser.accessToken),
+          zkEvm: authUser.zkEvm
+        });
+      }
+    };
+    const handleTokenRefreshed = async (authUser) => {
+      await updateSession({
+        accessToken: authUser.accessToken,
+        refreshToken: authUser.refreshToken,
+        idToken: authUser.idToken,
+        accessTokenExpires: getTokenExpiry(authUser.accessToken),
+        zkEvm: authUser.zkEvm
+      });
+    };
+    const handleUserRemoved = async (payload) => {
+      console.warn("[auth-next-client] User removed from Auth SDK:", payload.reason, payload.error);
+      await (0, import_react2.signOut)({ redirect: false });
+    };
+    const handleLoggedOut = async () => {
+      await (0, import_react2.signOut)({ redirect: false });
+    };
+    auth.eventEmitter.on(import_auth2.AuthEvents.LOGGED_IN, handleLoggedIn);
+    auth.eventEmitter.on(import_auth2.AuthEvents.TOKEN_REFRESHED, handleTokenRefreshed);
+    auth.eventEmitter.on(import_auth2.AuthEvents.USER_REMOVED, handleUserRemoved);
+    auth.eventEmitter.on(import_auth2.AuthEvents.LOGGED_OUT, handleLoggedOut);
+    return () => {
+      auth.eventEmitter.removeListener(import_auth2.AuthEvents.LOGGED_IN, handleLoggedIn);
+      auth.eventEmitter.removeListener(import_auth2.AuthEvents.TOKEN_REFRESHED, handleTokenRefreshed);
+      auth.eventEmitter.removeListener(import_auth2.AuthEvents.USER_REMOVED, handleUserRemoved);
+      auth.eventEmitter.removeListener(import_auth2.AuthEvents.LOGGED_OUT, handleLoggedOut);
+    };
+  }, [auth, isAuthReady, session, updateSession]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({ auth, config, basePath }),
+    [auth, config, basePath]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImmutableAuthContext.Provider, { value: contextValue, children });
+}
+function ImmutableAuthProvider({
+  children,
+  config,
+  session,
+  basePath = DEFAULT_NEXTAUTH_BASE_PATH
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.SessionProvider, { session, basePath, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImmutableAuthInner, { config, basePath, children }) });
+}
+function useImmutableAuth() {
+  const context = (0, import_react.useContext)(ImmutableAuthContext);
+  const { data: sessionData, status } = (0, import_react2.useSession)();
+  const [isLoggingIn, setIsLoggingIn] = (0, import_react.useState)(false);
+  if (!context) {
+    throw new Error("useImmutableAuth must be used within ImmutableAuthProvider");
+  }
+  const session = sessionData;
+  const { auth } = context;
+  const isLoading = status === "loading";
+  const isAuthenticated = status === "authenticated" && !!session;
+  const user = session?.user ? {
+    sub: session.user.sub,
+    email: session.user.email,
+    nickname: session.user.nickname
+  } : null;
+  const handleSignIn = (0, import_react.useCallback)(async (options) => {
+    if (!auth) {
+      throw new Error("Auth not initialized");
+    }
+    setIsLoggingIn(true);
+    try {
+      const authUser = await auth.login(options);
+      if (!authUser) {
+        throw new Error("Login failed");
+      }
+      const tokenData = {
+        accessToken: authUser.accessToken,
+        refreshToken: authUser.refreshToken,
+        idToken: authUser.idToken,
+        accessTokenExpires: getTokenExpiry(authUser.accessToken),
+        profile: {
+          sub: authUser.profile.sub,
+          email: authUser.profile.email,
+          nickname: authUser.profile.nickname
+        },
+        zkEvm: authUser.zkEvm
+      };
+      const result = await (0, import_react2.signIn)(IMMUTABLE_PROVIDER_ID, {
+        tokens: JSON.stringify(tokenData),
+        redirect: false
+      });
+      if (result?.error) {
+        throw new Error(`NextAuth sign-in failed: ${result.error}`);
+      }
+      if (!result?.ok) {
+        throw new Error("NextAuth sign-in failed: unknown error");
+      }
+    } finally {
+      setIsLoggingIn(false);
+    }
+  }, [auth]);
+  const handleSignOut = (0, import_react.useCallback)(async () => {
+    if (auth) {
+      try {
+        await auth.getLogoutUrl();
+      } catch (error) {
+        console.warn("[auth-next-client] Logout cleanup error:", error);
+        await (0, import_react2.signOut)({ redirect: false });
+      }
+    } else {
+      await (0, import_react2.signOut)({ redirect: false });
+    }
+  }, [auth]);
+  const getAccessToken = (0, import_react.useCallback)(async () => {
+    if (auth) {
+      try {
+        const token = await auth.getAccessToken();
+        if (token) {
+          return token;
+        }
+      } catch {
+      }
+    }
+    if (session?.error) {
+      throw new Error(
+        session.error === "TokenExpired" ? "Session expired. Please log in again." : `Authentication error: ${session.error}`
+      );
+    }
+    if (session?.accessToken) {
+      return session.accessToken;
+    }
+    throw new Error("No access token available");
+  }, [auth, session]);
+  return {
+    user,
+    session,
+    isLoading,
+    isLoggingIn,
+    isAuthenticated,
+    signIn: handleSignIn,
+    signOut: handleSignOut,
+    getAccessToken,
+    auth
+  };
+}
+function useAccessToken() {
+  const { getAccessToken } = useImmutableAuth();
+  return getAccessToken;
+}
+function useHydratedData(props, fetcher) {
+  const { getAccessToken, auth } = useImmutableAuth();
+  const {
+    ssr,
+    data: serverData,
+    fetchError
+  } = props;
+  const needsClientFetch = !ssr || Boolean(fetchError);
+  const [data, setData] = (0, import_react.useState)(serverData);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(needsClientFetch);
+  const [error, setError] = (0, import_react.useState)(
+    fetchError ? new Error(fetchError) : null
+  );
+  const hasFetchedRef = (0, import_react.useRef)(false);
+  const fetchIdRef = (0, import_react.useRef)(0);
+  const prevPropsRef = (0, import_react.useRef)({ serverData, ssr, fetchError });
+  (0, import_react.useEffect)(() => {
+    const prevProps = prevPropsRef.current;
+    const propsChanged = prevProps.serverData !== serverData || prevProps.ssr !== ssr || prevProps.fetchError !== fetchError;
+    if (propsChanged) {
+      prevPropsRef.current = { serverData, ssr, fetchError };
+      hasFetchedRef.current = false;
+      fetchIdRef.current += 1;
+      if (ssr && !fetchError) {
+        setData(serverData);
+        setIsLoading(false);
+        setError(null);
+      } else {
+        setData(null);
+        setIsLoading(true);
+        setError(fetchError ? new Error(fetchError) : null);
+      }
+    }
+  }, [serverData, ssr, fetchError]);
+  const fetchData = (0, import_react.useCallback)(async () => {
+    const currentFetchId = fetchIdRef.current;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const token = await getAccessToken();
+      const result = await fetcher(token);
+      if (fetchIdRef.current === currentFetchId) {
+        setData(result);
+      }
+    } catch (err) {
+      if (fetchIdRef.current === currentFetchId) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    } finally {
+      if (fetchIdRef.current === currentFetchId) {
+        setIsLoading(false);
+      }
+    }
+  }, [fetcher, getAccessToken]);
+  (0, import_react.useEffect)(() => {
+    if (hasFetchedRef.current) return;
+    if (!needsClientFetch) return;
+    if (!ssr && !auth) return;
+    hasFetchedRef.current = true;
+    fetchData();
+  }, [needsClientFetch, ssr, auth, fetchData]);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchData
+  };
+}
+
+// src/callback.tsx
+var import_react3 = require("react");
+var import_navigation = require("next/navigation");
+var import_react4 = require("next-auth/react");
+var import_auth3 = require("@imtbl/auth");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getSearchParams() {
+  if (typeof window === "undefined") {
+    return new URLSearchParams();
+  }
+  return new URLSearchParams(window.location.search);
+}
+function CallbackPage({
+  config,
+  redirectTo = "/",
+  loadingComponent = null,
+  errorComponent,
+  onSuccess,
+  onError
+}) {
+  const router = (0, import_navigation.useRouter)();
+  const [error, setError] = (0, import_react3.useState)(null);
+  const callbackProcessedRef = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    const searchParams = getSearchParams();
+    const handleCallback = async () => {
+      try {
+        const auth = new import_auth3.Auth({
+          clientId: config.clientId,
+          redirectUri: config.redirectUri,
+          popupRedirectUri: config.popupRedirectUri,
+          logoutRedirectUri: config.logoutRedirectUri,
+          audience: config.audience || DEFAULT_AUDIENCE,
+          scope: config.scope || DEFAULT_SCOPE,
+          authenticationDomain: config.authenticationDomain || DEFAULT_AUTH_DOMAIN,
+          passportDomain: config.passportDomain
+        });
+        const authUser = await auth.loginCallback();
+        if (window.opener) {
+          if (!authUser) {
+            throw new Error("Authentication failed: no user data received from login callback");
+          }
+          const user = {
+            sub: authUser.profile.sub,
+            email: authUser.profile.email,
+            nickname: authUser.profile.nickname
+          };
+          if (onSuccess) {
+            await onSuccess(user);
+          }
+          window.close();
+        } else if (authUser) {
+          const tokenData = {
+            accessToken: authUser.accessToken,
+            refreshToken: authUser.refreshToken,
+            idToken: authUser.idToken,
+            accessTokenExpires: getTokenExpiry(authUser.accessToken),
+            profile: {
+              sub: authUser.profile.sub,
+              email: authUser.profile.email,
+              nickname: authUser.profile.nickname
+            },
+            zkEvm: authUser.zkEvm
+          };
+          const result = await (0, import_react4.signIn)(IMMUTABLE_PROVIDER_ID, {
+            tokens: JSON.stringify(tokenData),
+            redirect: false
+          });
+          if (result?.error) {
+            throw new Error(`NextAuth sign-in failed: ${result.error}`);
+          }
+          if (!result?.ok) {
+            throw new Error("NextAuth sign-in failed: unknown error");
+          }
+          const user = {
+            sub: authUser.profile.sub,
+            email: authUser.profile.email,
+            nickname: authUser.profile.nickname
+          };
+          if (onSuccess) {
+            await onSuccess(user);
+          }
+          const resolvedRedirectTo = typeof redirectTo === "function" ? redirectTo(user) || "/" : redirectTo;
+          router.replace(resolvedRedirectTo);
+        } else {
+          throw new Error("Authentication failed: no user data received from login callback");
+        }
+      } catch (err) {
+        const errorMessage2 = err instanceof Error ? err.message : "Authentication failed";
+        if (onError) {
+          onError(errorMessage2);
+        }
+        setError(errorMessage2);
+      }
+    };
+    const handleOAuthError = () => {
+      const errorCode = searchParams.get("error");
+      const errorDescription = searchParams.get("error_description");
+      const errorMessage2 = errorDescription || errorCode || "Authentication failed";
+      if (onError) {
+        onError(errorMessage2);
+      }
+      setError(errorMessage2);
+    };
+    if (callbackProcessedRef.current) {
+      return;
+    }
+    const hasError = searchParams.get("error");
+    const hasCode = searchParams.get("code");
+    if (hasError) {
+      callbackProcessedRef.current = true;
+      handleOAuthError();
+      return;
+    }
+    if (hasCode) {
+      callbackProcessedRef.current = true;
+      handleCallback();
+      return;
+    }
+    callbackProcessedRef.current = true;
+    const errorMessage = "Invalid callback: missing OAuth parameters. Please try logging in again.";
+    if (onError) {
+      onError(errorMessage);
+    }
+    setError(errorMessage);
+  }, [router, config, redirectTo, onSuccess, onError]);
+  if (error) {
+    if (errorComponent) {
+      return errorComponent(error);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: "2rem", textAlign: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: { color: "#dc3545" }, children: "Authentication Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => router.push("/"),
+          type: "button",
+          style: {
+            padding: "0.5rem 1rem",
+            marginTop: "1rem",
+            cursor: "pointer"
+          },
+          children: "Return to Home"
+        }
+      )
+    ] });
+  }
+  if (loadingComponent) {
+    return loadingComponent;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "2rem", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "Completing authentication..." }) });
+}
+
+// src/index.ts
+var import_auth4 = require("@imtbl/auth");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CallbackPage,
+  ImmutableAuthProvider,
+  MarketingConsentStatus,
+  useAccessToken,
+  useHydratedData,
+  useImmutableAuth
+});

package/dist/node/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @imtbl/auth-next-client
+ *
+ * Client-side components for Immutable Auth.js v5 integration with Next.js.
+ * This package provides React components and hooks for authentication.
+ *
+ * Note: This package depends on @imtbl/auth and should only be used in
+ * browser/client environments. For server-side utilities, use @imtbl/auth-next-server.
+ */
+export { ImmutableAuthProvider, useImmutableAuth, useAccessToken, useHydratedData, type UseHydratedDataResult, type HydratedDataProps, } from './provider';
+export { CallbackPage, type CallbackPageProps } from './callback';
+export type { ImmutableAuthProviderProps, UseImmutableAuthReturn, ImmutableUserClient, ImmutableTokenDataClient, ZkEvmInfo, } from './types';
+export type { ImmutableAuthConfig, ImmutableTokenData, ImmutableUser, AuthProps, AuthPropsWithData, ProtectedAuthProps, ProtectedAuthPropsWithData, } from '@imtbl/auth-next-server';
+export type { LoginOptions, DirectLoginOptions } from '@imtbl/auth';
+export { MarketingConsentStatus } from '@imtbl/auth';