poc: Remove contexts and subscribe to clerk changes directly in hooks

packages/clerk-js/src/core/clerk.ts

@@ -80,6 +80,7 @@ import type {
   InstanceType,
   JoinWaitlistParams,
   ListenerCallback,
+  ListenerOptions,
   NavigateOptions,
   OrganizationListProps,
   OrganizationProfileProps,
@@ -1476,11 +1477,11 @@ export class Clerk implements ClerkInterface {
     }
   };
 
-  public addListener = (listener: ListenerCallback): UnsubscribeCallback => {
+  public addListener = (listener: ListenerCallback, options?: ListenerOptions): UnsubscribeCallback => {
     listener = memoizeListenerCallback(listener);
     this.#listeners.push(listener);
     // emit right away
-    if (this.client) {
+    if (this.client && !options?.skipInitialEmit) {
       listener({
         client: this.client,
         session: this.session,

packages/expo/src/hooks/useAuth.ts

@@ -8,8 +8,8 @@ import { SessionJWTCache } from '../cache';
  * This hook extends the useAuth hook to add experimental JWT caching.
  * The caching is used only when no options are passed to getToken.
  */
-export const useAuth = (initialAuthState?: any): UseAuthReturn => {
-  const { getToken: getTokenBase, ...rest } = useAuthBase(initialAuthState);
+export const useAuth = (options?: Parameters<typeof useAuthBase>[0]): UseAuthReturn => {
+  const { getToken: getTokenBase, ...rest } = useAuthBase(options);
 
   const getToken: GetToken = (opts?: GetTokenOptions): Promise<string | null> =>
     getTokenBase(opts)

packages/nextjs/src/app-router/client/ClerkProvider.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { ClerkProvider as ReactClerkProvider } from '@clerk/react';
+import { InitialStateProvider } from '@clerk/shared/react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import React from 'react';
@@ -37,12 +38,6 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
     }
   }, []);
 
-  // Avoid rendering nested ClerkProviders by checking for the existence of the ClerkNextOptions context provider
-  const isNested = Boolean(useClerkNextOptions());
-  if (isNested) {
-    return props.children;
-  }
-
   useSafeLayoutEffect(() => {
     window.__unstable__onBeforeSetActive = intent => {
       /**
@@ -112,6 +107,16 @@ export const ClientClerkProvider = (props: NextClerkProviderProps & { disableKey
   const { children, disableKeyless = false, ...rest } = props;
   const safePublishableKey = mergeNextClerkPropsWithEnv(rest).publishableKey;
 
+  // Avoid rendering nested ClerkProviders by checking for the existence of the ClerkNextOptions context provider
+  const isNested = Boolean(useClerkNextOptions());
+  if (isNested) {
+    if (rest.initialState) {
+      // If using <ClerkProvider dynamic> inside a <ClerkProvider>, we do want the initial state to be available for this subtree
+      return <InitialStateProvider initialState={rest.initialState}>{children}</InitialStateProvider>;
+    }
+    return children;
+  }
+
   if (safePublishableKey || !canUseKeyless || disableKeyless) {
     return <NextClientClerkProvider {...rest}>{children}</NextClientClerkProvider>;
   }

packages/nextjs/src/app-router/server/ClerkProvider.tsx

@@ -1,9 +1,7 @@
 import type { InitialState, Without } from '@clerk/shared/types';
 import { headers } from 'next/headers';
-import type { ReactNode } from 'react';
 import React from 'react';
 
-import { PromisifiedAuthProvider } from '../../client-boundary/PromisifiedAuthProvider';
 import { getDynamicAuthData } from '../../server/buildClerkProps';
 import type { NextClerkProviderProps } from '../../types';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
@@ -32,28 +30,17 @@ export async function ClerkProvider(
 ) {
   const { children, dynamic, ...rest } = props;
 
-  async function generateStatePromise() {
-    if (!dynamic) {
-      return Promise.resolve(null);
-    }
-    return getDynamicClerkState();
-  }
-
-  async function generateNonce() {
-    if (!dynamic) {
-      return Promise.resolve('');
-    }
-    return getNonceHeaders();
-  }
+  const statePromiseOrValue = dynamic ? getDynamicClerkState() : undefined;
+  const noncePromiseOrValue = dynamic ? getNonceHeaders() : '';
 
   const propsWithEnvs = mergeNextClerkPropsWithEnv({
     ...rest,
+    initialState: statePromiseOrValue as InitialState | Promise<InitialState> | undefined,
+    nonce: await noncePromiseOrValue,
   });
 
   const { shouldRunAsKeyless, runningWithClaimedKeys } = await getKeylessStatus(propsWithEnvs);
 
-  let output: ReactNode;
-
   try {
     const detectKeylessEnvDrift = await import('../../server/keyless-telemetry.js').then(
       mod => mod.detectKeylessEnvDrift,
@@ -64,35 +51,15 @@ export async function ClerkProvider(
   }
 
   if (shouldRunAsKeyless) {
-    output = (
+    return (
       <KeylessProvider
         rest={propsWithEnvs}
-        generateNonce={generateNonce}
-        generateStatePromise={generateStatePromise}
         runningWithClaimedKeys={runningWithClaimedKeys}
       >
         {children}
       </KeylessProvider>
     );
-  } else {
-    output = (
-      <ClientClerkProvider
-        {...propsWithEnvs}
-        nonce={await generateNonce()}
-        initialState={await generateStatePromise()}
-      >
-        {children}
-      </ClientClerkProvider>
-    );
   }
 
-  if (dynamic) {
-    return (
-      // TODO: fix types so AuthObject is compatible with InitialState
-      <PromisifiedAuthProvider authPromise={generateStatePromise() as unknown as Promise<InitialState>}>
-        {output}
-      </PromisifiedAuthProvider>
-    );
-  }
-  return output;
+  return <ClientClerkProvider {...propsWithEnvs}>{children}</ClientClerkProvider>;
 }

packages/nextjs/src/app-router/server/keyless-provider.tsx

@@ -1,4 +1,3 @@
-import type { AuthObject } from '@clerk/backend';
 import type { Without } from '@clerk/shared/types';
 import { headers } from 'next/headers';
 import type { PropsWithChildren } from 'react';
@@ -35,12 +34,10 @@ export async function getKeylessStatus(
 type KeylessProviderProps = PropsWithChildren<{
   rest: Without<NextClerkProviderProps, '__unstable_invokeMiddlewareOnAuthStateChange'>;
   runningWithClaimedKeys: boolean;
-  generateStatePromise: () => Promise<AuthObject | null>;
-  generateNonce: () => Promise<string>;
 }>;
 
 export const KeylessProvider = async (props: KeylessProviderProps) => {
-  const { rest, runningWithClaimedKeys, generateNonce, generateStatePromise, children } = props;
+  const { rest, runningWithClaimedKeys, children } = props;
 
   // NOTE: Create or read keys on every render. Usually this means only on hard refresh or hard navigations.
   const newOrReadKeys = await import('../../server/keyless-node.js')
@@ -56,8 +53,6 @@ export const KeylessProvider = async (props: KeylessProviderProps) => {
     return (
       <ClientClerkProvider
         {...mergeNextClerkPropsWithEnv(rest)}
-        nonce={await generateNonce()}
-        initialState={await generateStatePromise()}
         disableKeyless
       >
         {children}
@@ -75,8 +70,6 @@ export const KeylessProvider = async (props: KeylessProviderProps) => {
         // Explicitly use `null` instead of `undefined` here to avoid persisting `deleteKeylessAction` during merging of options.
         __internal_keyless_dismissPrompt: runningWithClaimedKeys ? deleteKeylessAction : null,
       })}
-      nonce={await generateNonce()}
-      initialState={await generateStatePromise()}
     >
       {children}
     </ClientClerkProvider>

packages/nextjs/src/client-boundary/hooks.ts

@@ -1,6 +1,7 @@
 'use client';
 
 export {
+  useAuth,
   useClerk,
   useEmailLink,
   useOrganization,
@@ -23,5 +24,3 @@ export {
   EmailLinkErrorCode,
   EmailLinkErrorCodeStatus,
 } from '@clerk/react/errors';
-
-export { usePromisifiedAuth as useAuth } from './PromisifiedAuthProvider';

packages/react/src/contexts/AuthContext.tsx

@@ -0,0 +1,92 @@
+import type { DeriveStateReturnType } from '@clerk/shared/deriveState';
+import { deriveFromClientSideState, deriveFromSsrInitialState } from '@clerk/shared/deriveState';
+import { useClerkInstanceContext, useInitialStateContext } from '@clerk/shared/react';
+import type {
+  ActClaim,
+  ClientResource,
+  JwtPayload,
+  OrganizationCustomPermissionKey,
+  OrganizationCustomRoleKey,
+  SessionStatusClaim,
+} from '@clerk/shared/types';
+import { useCallback, useDeferredValue, useMemo, useSyncExternalStore } from 'react';
+
+type AuthStateValue = {
+  userId: string | null | undefined;
+  sessionId: string | null | undefined;
+  sessionStatus: SessionStatusClaim | null | undefined;
+  sessionClaims: JwtPayload | null | undefined;
+  actor: ActClaim | null | undefined;
+  orgId: string | null | undefined;
+  orgRole: OrganizationCustomRoleKey | null | undefined;
+  orgSlug: string | null | undefined;
+  orgPermissions: OrganizationCustomPermissionKey[] | null | undefined;
+  factorVerificationAge: [number, number] | null;
+};
+
+export const defaultDerivedInitialState = {
+  actor: undefined,
+  factorVerificationAge: null,
+  orgId: undefined,
+  orgPermissions: undefined,
+  orgRole: undefined,
+  orgSlug: undefined,
+  sessionClaims: undefined,
+  sessionId: undefined,
+  sessionStatus: undefined,
+  userId: undefined,
+};
+
+export function useAuthState(): AuthStateValue {
+  const clerk = useClerkInstanceContext();
+  const initialStateContext = useInitialStateContext();
+  // If we make initialState support a promise in the future, this is where we would use() that promise
+  const initialSnapshot = useMemo(() => {
+    if (!initialStateContext) {
+      return defaultDerivedInitialState;
+    }
+    const fullState = deriveFromSsrInitialState(initialStateContext);
+    return authStateFromFull(fullState);
+  }, [initialStateContext]);
+
+  const snapshot = useMemo(() => {
+    if (!clerk.loaded) {
+      return initialSnapshot;
+    }
+    const state = {
+      client: clerk.client as ClientResource,
+      session: clerk.session,
+      user: clerk.user,
+      organization: clerk.organization,
+    };
+    const fullState = deriveFromClientSideState(state);
+    return authStateFromFull(fullState);
+  }, [clerk.client, clerk.session, clerk.user, clerk.organization, initialSnapshot, clerk.loaded]);
+
+  const authState = useSyncExternalStore(
+    useCallback(callback => clerk.addListener(callback, { skipInitialEmit: true }), [clerk]),
+    useCallback(() => snapshot, [snapshot]),
+    useCallback(() => initialSnapshot, [initialSnapshot]),
+  );
+
+  // If an updates comes in during a transition, uSES usually deopts that transition to be synchronous,
+  // which for example means that already mounted <Suspense> boundaries might suddenly show their fallback.
+  // This makes all auth state changes into transitions, but does not deopt to be synchronous. If it's
+  // called during a transition, it immediately uses the new value without deferring.
+  return useDeferredValue(authState);
+}
+
+function authStateFromFull(derivedState: DeriveStateReturnType) {
+  return {
+    sessionId: derivedState.sessionId,
+    sessionStatus: derivedState.sessionStatus,
+    sessionClaims: derivedState.sessionClaims,
+    userId: derivedState.userId,
+    actor: derivedState.actor,
+    orgId: derivedState.orgId,
+    orgRole: derivedState.orgRole,
+    orgSlug: derivedState.orgSlug,
+    orgPermissions: derivedState.orgPermissions,
+    factorVerificationAge: derivedState.factorVerificationAge,
+  };
+}