fix(clerk-react): Make isomorphicClerk loading idempotent

Author: nikosdouvlis

packages/react/src/contexts/ClerkContextProvider.tsx

@@ -1,25 +1,24 @@
 import { ActiveSessionResource, ClientResource, InitialState, Resources, UserResource } from '@clerk/types';
 import React from 'react';
 
-import IsomorphicClerk from '../isomorphicClerk';
+import IsomorphicClerk, { NewIsomorphicClerkParams } from '../isomorphicClerk';
 import { AuthContext } from './AuthContext';
 import { ClientContext } from './ClientContext';
 import { IsomorphicClerkContext } from './IsomorphicClerkContext';
 import { SessionContext } from './SessionContext';
 import { UserContext } from './UserContext';
 
-type ClerkContextWrapperProps = {
-  isomorphicClerk: IsomorphicClerk;
+type ClerkContextProvider = {
+  isomorphicClerkOptions: NewIsomorphicClerkParams;
   initialState: InitialState | undefined;
   children: React.ReactNode;
-  clerkLoaded: boolean;
 };
 
 type ClerkContextProviderState = Resources;
 
-export function ClerkContextProvider(props: ClerkContextWrapperProps): JSX.Element | null {
-  const { isomorphicClerk, children, clerkLoaded, initialState } = props;
-  const clerk = isomorphicClerk;
+export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element | null {
+  const { isomorphicClerkOptions, initialState, children } = props;
+  const { isomorphicClerk: clerk, loaded: clerkLoaded } = useLoadedIsomorphicClerk(isomorphicClerkOptions);
 
   const [state, setState] = React.useState<ClerkContextProviderState>({
     client: clerk.client as ClientResource,
@@ -62,6 +61,17 @@ export function ClerkContextProvider(props: ClerkContextWrapperProps): JSX.Eleme
   );
 }
 
+const useLoadedIsomorphicClerk = (options: NewIsomorphicClerkParams) => {
+  const [loaded, setLoaded] = React.useState(false);
+  const isomorphicClerk = React.useMemo(() => IsomorphicClerk.getOrCreateInstance(options), []);
+
+  React.useEffect(() => {
+    isomorphicClerk.addOnLoaded(() => setLoaded(true));
+  }, []);
+
+  return { isomorphicClerk, loaded };
+};
+
 // This should be provided from isomorphicClerk
 // TODO: move inside isomorphicClerk
 function deriveState(

packages/react/src/contexts/ClerkProvider.tsx

@@ -1,8 +1,7 @@
 import { InitialState } from '@clerk/types';
-import React, { useEffect, useMemo, useState } from 'react';
+import React from 'react';
 
 import { multipleClerkProvidersError } from '../errors';
-import IsomorphicClerk from '../isomorphicClerk';
 import type { IsomorphicClerkOptions } from '../types';
 import { withMaxAllowedInstancesGuard } from '../utils';
 import { ClerkContextProvider } from './ClerkContextProvider';
@@ -15,25 +14,15 @@ export interface ClerkProviderProps extends IsomorphicClerkOptions {
 }
 
 function ClerkProviderBase(props: ClerkProviderProps): JSX.Element {
-  const [clerkLoaded, setClerkLoaded] = useState(false);
-
-  const clerk = useMemo(() => {
-    const { frontendApi = '', Clerk: ClerkConstructor, ...options } = props;
-    return IsomorphicClerk.getOrCreateInstance({ frontendApi, options, Clerk: ClerkConstructor });
-  }, []);
-
-  useEffect(() => {
-    void clerk.loadClerkJS().then(() => setClerkLoaded(true));
-  }, []);
+  const { initialState, children, Clerk, frontendApi, ...options } = props;
 
   return (
     <StructureContext.Provider value={StructureContextStates.noGuarantees}>
       <ClerkContextProvider
-        initialState={props.initialState}
-        isomorphicClerk={clerk}
-        clerkLoaded={clerkLoaded}
+        initialState={initialState}
+        isomorphicClerkOptions={{ frontendApi: frontendApi || '', Clerk, options }}
       >
-        {props.children}
+        {children}
       </ClerkContextProvider>
     </StructureContext.Provider>
   );

packages/react/src/isomorphicClerk.ts

@@ -34,14 +34,14 @@ type MethodName<T> = {
 }[keyof T];
 type MethodCallback = () => void;
 
-type NewIsomorphicClerkParams = {
+export type NewIsomorphicClerkParams = {
   frontendApi: string;
   options: IsomorphicClerkOptions;
   Clerk: ClerkProp | null;
 };
 
 export default class IsomorphicClerk {
-  private mode: string;
+  private mode: 'browser' | 'server';
   private frontendApi: string;
   private options: IsomorphicClerkOptions;
   private Clerk: ClerkProp;
@@ -80,10 +80,11 @@ export default class IsomorphicClerk {
     this.options = options;
     this.Clerk = Clerk;
     this.mode = inClientSide() ? 'browser' : 'server';
+    void this.loadClerkJS();
   }
 
   async loadClerkJS(): Promise<BrowserClerk | undefined> {
-    if (this.#loaded) {
+    if (this.mode !== 'browser' || this.#loaded) {
       return;
     }