replace ClerkJSScript with ClerkScripts to inject clerk/clerk-js and clerk/ui in nextjs apps

Author: nikosdouvlis

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

@@ -10,7 +10,7 @@ import React, { useEffect, useTransition } from 'react';
 import { useSafeLayoutEffect } from '../../client-boundary/hooks/useSafeLayoutEffect';
 import { ClerkNextOptionsProvider, useClerkNextOptions } from '../../client-boundary/NextOptionsContext';
 import type { NextClerkProviderProps } from '../../types';
-import { ClerkJSScript } from '../../utils/clerk-js-script';
+import { ClerkScripts } from '../../utils/clerk-script';
 import { canUseKeyless } from '../../utils/feature-flags';
 import { mergeNextClerkPropsWithEnv } from '../../utils/mergeNextClerkPropsWithEnv';
 import { RouterTelemetry } from '../../utils/router-telemetry';
@@ -130,7 +130,7 @@ const NextClientClerkProvider = (props: NextClerkProviderProps) => {
     <ClerkNextOptionsProvider options={mergedProps}>
       <ReactClerkProvider {...mergedProps}>
         <RouterTelemetry />
-        <ClerkJSScript router='app' />
+        <ClerkScripts router='app' />
         {children}
       </ReactClerkProvider>
     </ClerkNextOptionsProvider>

packages/nextjs/src/pages/ClerkProvider.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { useSafeLayoutEffect } from '../client-boundary/hooks/useSafeLayoutEffect';
 import { ClerkNextOptionsProvider } from '../client-boundary/NextOptionsContext';
 import type { NextClerkProviderProps } from '../types';
-import { ClerkJSScript } from '../utils/clerk-js-script';
+import { ClerkScripts } from '../utils/clerk-script';
 import { invalidateNextRouterCache } from '../utils/invalidateNextRouterCache';
 import { mergeNextClerkPropsWithEnv } from '../utils/mergeNextClerkPropsWithEnv';
 import { removeBasePath } from '../utils/removeBasePath';
@@ -55,7 +55,7 @@ export function ClerkProvider({ children, ...props }: NextClerkProviderProps): J
         initialState={initialState}
       >
         <RouterTelemetry />
-        <ClerkJSScript router='pages' />
+        <ClerkScripts router='pages' />
         {children}
       </ReactClerkProvider>
     </ClerkNextOptionsProvider>

packages/nextjs/src/utils/clerk-js-script.tsx

@@ -0,0 +1,80 @@
+import { useClerk } from '@clerk/react';
+import {
+  buildClerkJsScriptAttributes,
+  buildClerkUiScriptAttributes,
+  clerkJsScriptUrl,
+  clerkUiScriptUrl,
+} from '@clerk/react/internal';
+import NextScript from 'next/script';
+import React from 'react';
+
+import { useClerkNextOptions } from '../client-boundary/NextOptionsContext';
+
+type ClerkScriptProps = {
+  scriptUrl: string;
+  attributes: Record<string, string>;
+  dataAttribute: string;
+  router: 'app' | 'pages';
+};
+
+function ClerkScript(props: ClerkScriptProps) {
+  const { scriptUrl, attributes, dataAttribute, router } = props;
+
+  /**
+   * Notes:
+   * `next/script` in 13.x.x when used with App Router will fail to pass any of our `data-*` attributes, resulting in errors
+   * Nextjs App Router will automatically move inline scripts inside `<head/>`
+   * Using the `nextjs/script` for App Router with the `beforeInteractive` strategy will throw an error because our custom script will be mounted outside the `html` tag.
+   */
+  const Script = router === 'app' ? 'script' : NextScript;
+
+  return (
+    <Script
+      src={scriptUrl}
+      {...{ [dataAttribute]: true }}
+      async
+      // `nextjs/script` will add defer by default and does not get removed when async is true
+      defer={router === 'pages' ? false : undefined}
+      crossOrigin='anonymous'
+      strategy={router === 'pages' ? 'beforeInteractive' : undefined}
+      {...attributes}
+    />
+  );
+}
+
+export function ClerkScripts({ router }: { router: ClerkScriptProps['router'] }) {
+  const { publishableKey, clerkJSUrl, clerkJSVersion, clerkJSVariant, nonce, clerkUiUrl } = useClerkNextOptions();
+  const { domain, proxyUrl } = useClerk();
+
+  if (!publishableKey) {
+    return null;
+  }
+
+  const opts = {
+    publishableKey,
+    clerkJSUrl,
+    clerkJSVersion,
+    clerkJSVariant,
+    nonce,
+    domain,
+    proxyUrl,
+    clerkUiUrl,
+  };
+
+  return (
+    <>
+      <ClerkScript
+        scriptUrl={clerkJsScriptUrl(opts)}
+        attributes={buildClerkJsScriptAttributes(opts)}
+        dataAttribute='data-clerk-js-script'
+        router={router}
+      />
+      <ClerkScript
+        scriptUrl={clerkUiScriptUrl(opts)}
+        attributes={buildClerkUiScriptAttributes(opts)}
+        dataAttribute='data-clerk-ui-script'
+        router={router}
+      />
+    </>
+  );
+}

packages/nextjs/src/utils/clerk-script.tsx

@@ -6,5 +6,7 @@ export { useDerivedAuth } from './hooks/useAuth';
 export {
   clerkJsScriptUrl,
   buildClerkJsScriptAttributes,
+  clerkUiScriptUrl,
+  buildClerkUiScriptAttributes,
   setClerkJsLoadingErrorPackageName,
 } from '@clerk/shared/loadClerkJsScript';

packages/react/src/internal.ts

@@ -36,6 +36,10 @@ export type IsomorphicClerkOptions = Without<ClerkOptions, 'isSatellite'> & {
    * The npm version for `@clerk/clerk-js`.
    */
   clerkJSVersion?: string;
+  /**
+   * The URL that `@clerk/ui` should be hot-loaded from.
+   */
+  clerkUiUrl?: string;
   /**
    * The Clerk Publishable Key for your instance. This can be found on the [API keys](https://dashboard.clerk.com/last-active?path=api-keys) page in the Clerk Dashboard.
    */

packages/react/src/types.ts

@@ -2,15 +2,15 @@ import { buildErrorThrower, ClerkRuntimeError } from './error';
 import { createDevOrStagingUrlCache, parsePublishableKey } from './keys';
 import { loadScript } from './loadScript';
 import { isValidProxyUrl, proxyUrlToAbsoluteURL } from './proxy';
-import type { ClerkOptions, SDKMetadata, Without } from './types';
+import type { SDKMetadata } from './types';
 import { addClerkPrefix } from './url';
 import { versionSelector } from './versionSelector';
 
 const { isDevOrStagingUrl } = createDevOrStagingUrlCache();
 
 const errorThrower = buildErrorThrower({ packageName: '@clerk/shared' });
 
-export type LoadClerkJsScriptOptions = Without<ClerkOptions, 'isSatellite'> & {
+export type LoadClerkJsScriptOptions = {
   publishableKey: string;
   clerkJSUrl?: string;
   clerkJSVariant?: 'headless' | '';
@@ -27,7 +27,7 @@ export type LoadClerkJsScriptOptions = Without<ClerkOptions, 'isSatellite'> & {
   scriptLoadTimeout?: number;
 };
 
-export type LoadClerkUiScriptOptions = Without<ClerkOptions, 'isSatellite'> & {
+export type LoadClerkUiScriptOptions = {
   publishableKey: string;
   clerkUiUrl?: string;
   proxyUrl?: string;
@@ -104,7 +104,7 @@ export const loadClerkJsScript = async (opts?: LoadClerkJsScriptOptions): Promis
     async: true,
     crossOrigin: 'anonymous',
     nonce: opts.nonce,
-    beforeLoad: applyClerkJsScriptAttributes(opts),
+    beforeLoad: applyAttributesToScript(buildClerkJsScriptAttributes(opts)),
   }).catch(error => {
     throw rejectWith(error);
   });
@@ -113,8 +113,6 @@ export const loadClerkJsScript = async (opts?: LoadClerkJsScriptOptions): Promis
 };
 
 export const loadClerkUiScript = async (opts?: LoadClerkUiScriptOptions): Promise<HTMLScriptElement | null> => {
-  console.log('here?');
-
   const timeout = opts?.scriptLoadTimeout ?? 15000;
   const rejectWith = (error?: Error) =>
     new ClerkRuntimeError('Failed to load Clerk UI' + (error?.message ? `, ${error.message}` : ''), {
@@ -142,8 +140,8 @@ export const loadClerkUiScript = async (opts?: LoadClerkUiScriptOptions): Promis
     async: true,
     crossOrigin: 'anonymous',
     nonce: opts.nonce,
+    beforeLoad: applyAttributesToScript(buildClerkUiScriptAttributes(opts)),
   }).catch(error => {
-    console.log('nikos 2', error);
     throw rejectWith(error);
   });
 
@@ -167,13 +165,11 @@ export const clerkUiScriptUrl = (opts: LoadClerkUiScriptOptions) => {
   const { clerkUiUrl, proxyUrl, domain, publishableKey } = opts;
 
   if (clerkUiUrl) {
-    console.log('got clerk ui url', clerkUiUrl);
-
     return clerkUiUrl;
   }
 
   const scriptHost = buildScriptHost({ publishableKey, proxyUrl, domain });
-  // TODO @nikos add version selector
+  // TODO: add version selector for clerk/ui similar to clerk-js
   return `https://${scriptHost}/npm/@clerk/ui@latest/dist/ui.browser.js`;
 };
 
@@ -199,8 +195,12 @@ export const buildClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions)
   return obj;
 };
 
-const applyClerkJsScriptAttributes = (options: LoadClerkJsScriptOptions) => (script: HTMLScriptElement) => {
-  const attributes = buildClerkJsScriptAttributes(options);
+export const buildClerkUiScriptAttributes = (options: LoadClerkUiScriptOptions) => {
+  // TODO @nikos do we need this?
+  return buildClerkJsScriptAttributes(options);
+};
+
+const applyAttributesToScript = (attributes: Record<string, string>) => (script: HTMLScriptElement) => {
   for (const attribute in attributes) {
     script.setAttribute(attribute, attributes[attribute]);
   }