chore(clerk-expo): Use getClerkInstance

clerk · May 24, 2024 · ac33c7d · ac33c7d
1 parent b9fce29
commit ac33c7d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 43 deletions.
diff --git a/packages/expo/src/ClerkProvider.tsx b/packages/expo/src/ClerkProvider.tsx
@@ -7,25 +7,24 @@ import React from 'react';
 import type { TokenCache } from './cache';
 import { MemoryTokenCache } from './cache';
 import { isReactNative } from './runtime';
-import { buildClerk } from './singleton';
+import { getClerkInstance } from './singleton';
 
 export type ClerkProviderProps = ClerkReactProviderProps & {
   tokenCache?: TokenCache;
 };
 
 export function ClerkProvider(props: ClerkProviderProps): JSX.Element {
   const { children, tokenCache = MemoryTokenCache, publishableKey, Clerk, ...rest } = props;
-  const pkClerk = typeof Clerk !== 'function' ? Clerk?.publishableKey : undefined;
-  const key = publishableKey || pkClerk || process.env.CLERK_PUBLISHABLE_KEY || '';
+  const pk = publishableKey || process.env.CLERK_PUBLISHABLE_KEY || '';
 
   return (
     <ClerkReactProvider
       // Force reset the state when the provided key changes, this ensures that the provider does not retain stale state.
       // See JS-598 for additional context.
-      key={key}
+      key={pk}
       {...rest}
-      publishableKey={key}
-      Clerk={Clerk || buildClerk({ publishableKey: key, tokenCache })}
+      publishableKey={pk}
+      Clerk={getClerkInstance({ publishableKey: pk, tokenCache })}
       standardBrowser={!isReactNative()}
     >
       {children}

diff --git a/packages/expo/src/index.ts b/packages/expo/src/index.ts
@@ -21,7 +21,7 @@ export { isClerkAPIResponseError, isEmailLinkError, isKnownError, isMetamaskErro
  * @deprecated Use `createClerkClient()` instead.
  */
 export { clerk as Clerk } from './singleton';
-export { createClerkClient } from './singleton';
+export { getClerkInstance } from './singleton';
 
 export * from './ClerkProvider';
 export * from './useOAuth';

diff --git a/packages/expo/src/singleton.ts b/packages/expo/src/singleton.ts
@@ -13,58 +13,50 @@ Clerk.sdkMetadata = {
 const KEY = '__clerk_client_jwt';
 
 /**
- * @deprecated This export will be dropped
+ * @deprecated Use `getClerkInstance` instead. `Clerk` will be removed in the next major version.
  */
 export let clerk: HeadlessBrowserClerk;
+let __internal_clerk: HeadlessBrowserClerk;
 
 type BuildClerkOptions = {
   publishableKey?: string;
   tokenCache?: TokenCache;
 };
 
-export function createClerkClient({
+export function getClerkInstance({
   publishableKey = process.env.CLERK_PUBLISHABLE_KEY || '',
   tokenCache = MemoryTokenCache,
 }: BuildClerkOptions): HeadlessBrowserClerk {
-  const clerk = new Clerk(publishableKey);
-
-  tokenCache.clearToken?.(KEY);
-
-  const getToken = tokenCache.getToken;
-  const saveToken = tokenCache.saveToken;
-
-  clerk.__unstable__onBeforeRequest(async (requestInit: FapiRequestInit) => {
-    // https://reactnative.dev/docs/0.61/network#known-issues-with-fetch-and-cookie-based-authentication
-    requestInit.credentials = 'omit';
-
-    requestInit.url?.searchParams.append('_is_native', '1');
-
-    const jwt = await getToken(KEY);
-    (requestInit.headers as Headers).set('authorization', jwt || '');
-  });
+  // Support "hot-swapping" the Clerk instance at runtime. See JS-598 for additional details.
+  const hasKeyChanged = __internal_clerk && publishableKey !== __internal_clerk.publishableKey;
 
-  // @ts-expect-error
-  clerk.__unstable__onAfterResponse(async (_: FapiRequestInit, response: FapiResponse<unknown>) => {
-    const authHeader = response.headers.get('authorization');
-    if (authHeader) {
-      await saveToken(KEY, authHeader);
+  if (!__internal_clerk || hasKeyChanged) {
+    if (hasKeyChanged) {
+      tokenCache.clearToken?.(KEY);
     }
-  });
 
-  return clerk;
-}
+    const getToken = tokenCache.getToken;
+    const saveToken = tokenCache.saveToken;
+    __internal_clerk = clerk = new Clerk(publishableKey);
 
-export function buildClerk({ publishableKey, tokenCache }: Required<BuildClerkOptions>): HeadlessBrowserClerk {
-  // Support "hot-swapping" the Clerk instance at runtime. See JS-598 for additional details.
-  const hasKeyChanged = clerk && publishableKey !== clerk.publishableKey;
+    // @ts-expect-error
+    __internal_clerk.__unstable__onBeforeRequest(async (requestInit: FapiRequestInit) => {
+      // https://reactnative.dev/docs/0.61/network#known-issues-with-fetch-and-cookie-based-authentication
+      requestInit.credentials = 'omit';
 
-  if (hasKeyChanged) {
-    tokenCache.clearToken?.(KEY);
-  }
+      requestInit.url?.searchParams.append('_is_native', '1');
 
-  if (!clerk || hasKeyChanged) {
-    clerk = createClerkClient({ publishableKey, tokenCache });
-  }
+      const jwt = await getToken(KEY);
+      (requestInit.headers as Headers).set('authorization', jwt || '');
+    });
 
-  return clerk;
+    // @ts-expect-error
+    __internal_clerk.__unstable__onAfterResponse(async (_: FapiRequestInit, response: FapiResponse<unknown>) => {
+      const authHeader = response.headers.get('authorization');
+      if (authHeader) {
+        await saveToken(KEY, authHeader);
+      }
+    });
+  }
+  return __internal_clerk;
 }