fix(remix): Remix 1.8 hotfix

We temporarily throw the interstitial page from within getAuth in addition to the rootAuthLoader.ts See remix-run/remix#4791 for details
clerk · Dec 7, 2022 · d4bd9dc · d4bd9dc
1 parent baa58e0
commit d4bd9dc
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 32 deletions.
diff --git a/packages/remix/src/errors.ts b/packages/remix/src/errors.ts
@@ -66,10 +66,6 @@ export const loader: LoaderFunction = args => rootAuthLoader(args, ({ auth }) =>
 })
 `);
 
-export const getAuthInterstitialErrorRendered = createErrorMessage(
-  `This state shouldn't be possible. Please reach out to [email protected] so we can help, or use the links below:`,
-);
-
 export const noFrontendApiError = createErrorMessage(`
 The CLERK_FRONTEND_API environment variable must be set before using Clerk.
 During development, grab the Frontend Api value from the Clerk Dashboard, create an .env file and set the CLERK_FRONTEND_API key.

diff --git a/packages/remix/src/experimental/errors.ts b/packages/remix/src/experimental/errors.ts
@@ -66,10 +66,6 @@ export const loader: LoaderFunction = args => rootAuthLoader(args, ({ auth }) =>
 })
 `);
 
-export const getAuthInterstitialErrorRendered = createErrorMessage(
-  `This state shouldn't be possible. Please reach out to [email protected] so we can help, or use the links below:`,
-);
-
 export const noFrontendApiError = createErrorMessage(`
 The CLERK_FRONTEND_API environment variable must be set before using Clerk.
 During development, grab the Frontend Api value from the Clerk Dashboard, create an .env file and set the CLERK_FRONTEND_API key.

diff --git a/packages/remix/src/experimental/ssr/getAuth.ts b/packages/remix/src/experimental/ssr/getAuth.ts
@@ -1,11 +1,7 @@
-import { json } from '@remix-run/server-runtime';
-
-import { getAuthInterstitialErrorRendered, noLoaderArgsPassedInGetAuth } from '../errors';
+import { noLoaderArgsPassedInGetAuth } from '../errors';
 import { getAuthState } from './getAuthState';
 import { GetAuthReturn, LoaderFunctionArgs } from './types';
-import { sanitizeAuthData } from './utils';
-
-const EMPTY_INTERSTITIAL_RESPONSE = { message: getAuthInterstitialErrorRendered };
+import { interstitialJsonResponse, sanitizeAuthData } from './utils';
 
 export async function getAuth(args: LoaderFunctionArgs): GetAuthReturn {
   if (!args || (args && (!args.request || !args.context))) {
@@ -14,7 +10,7 @@ export async function getAuth(args: LoaderFunctionArgs): GetAuthReturn {
   const authState = await getAuthState(args);
 
   if (authState.isInterstitial || !authState) {
-    throw json(EMPTY_INTERSTITIAL_RESPONSE, { status: 401 });
+    throw interstitialJsonResponse(authState, { loader: 'nested' });
   }
 
   return sanitizeAuthData(authState);

diff --git a/packages/remix/src/experimental/ssr/rootAuthLoader.ts b/packages/remix/src/experimental/ssr/rootAuthLoader.ts
@@ -4,11 +4,11 @@ import { LoaderFunctionArgs, LoaderFunctionReturn, RootAuthLoaderCallback, RootA
 import {
   assertObject,
   injectAuthIntoRequest,
+  interstitialJsonResponse,
   isRedirect,
   isResponse,
   returnLoaderResultJsonResponse,
   sanitizeAuthData,
-  throwInterstitialJsonResponse,
 } from './utils';
 
 interface RootAuthLoader {
@@ -35,7 +35,7 @@ export const rootAuthLoader: RootAuthLoader = async (
   const authState = await getAuthState(args, opts);
 
   if (authState.isInterstitial) {
-    throw throwInterstitialJsonResponse(authState);
+    throw interstitialJsonResponse(authState, { loader: 'root' });
   }
 
   if (!callback) {

diff --git a/packages/remix/src/experimental/ssr/utils.ts b/packages/remix/src/experimental/ssr/utils.ts
@@ -80,9 +80,10 @@ export function assertObject(val: any, error?: string): asserts val is Record<st
 /**
  * @internal
  */
-export const throwInterstitialJsonResponse = (authState: AuthState) => {
-  throw json(
+export const interstitialJsonResponse = (authState: AuthState, opts: { loader: 'root' | 'nested' }) => {
+  return json(
     wrapWithClerkState({
+      __loader: opts.loader,
       __clerk_ssr_interstitial_html: clerk.localInterstitial({
         debugData: clerk.debugAuthState(authState),
         frontendApi: authState.frontendApi,

diff --git a/packages/remix/src/ssr/getAuth.ts b/packages/remix/src/ssr/getAuth.ts
@@ -1,21 +1,18 @@
-import { json } from '@remix-run/server-runtime';
-
-import { getAuthInterstitialErrorRendered, noRequestPassedInGetAuth } from '../errors';
+import { noRequestPassedInGetAuth } from '../errors';
 import { getAuthData } from './getAuthData';
 import { GetAuthReturn, LoaderFunctionArgs } from './types';
-import { sanitizeAuthData } from './utils';
-
-const EMPTY_INTERSTITIAL_RESPONSE = { message: getAuthInterstitialErrorRendered };
+import { interstitialJsonResponse, sanitizeAuthData } from './utils';
 
-export async function getAuth(argsOrReq: Request | LoaderFunctionArgs): GetAuthReturn {
+export async function getAuth(argsOrReq: Request | LoaderFunctionArgs, opts?: any): GetAuthReturn {
   if (!argsOrReq) {
     throw new Error(noRequestPassedInGetAuth);
   }
   const request = 'request' in argsOrReq ? argsOrReq.request : argsOrReq;
-  const { authData, showInterstitial } = await getAuthData(request);
+  const { authData, showInterstitial, errorReason } = await getAuthData(request);
 
   if (showInterstitial || !authData) {
-    throw json(EMPTY_INTERSTITIAL_RESPONSE, { status: 401 });
+    const frontendApi = process.env.CLERK_FRONTEND_API || opts.frontendApi;
+    throw interstitialJsonResponse({ frontendApi, errorReason, loader: 'nested' });
   }
 
   return sanitizeAuthData(authData);

diff --git a/packages/remix/src/ssr/rootAuthLoader.ts b/packages/remix/src/ssr/rootAuthLoader.ts
@@ -5,11 +5,11 @@ import { LoaderFunctionArgs, LoaderFunctionReturn, RootAuthLoaderCallback, RootA
 import {
   assertObject,
   injectAuthIntoRequest,
+  interstitialJsonResponse,
   isRedirect,
   isResponse,
   returnLoaderResultJsonResponse,
   sanitizeAuthData,
-  throwInterstitialJsonResponse,
 } from './utils';
 
 interface RootAuthLoader {
@@ -39,7 +39,7 @@ export const rootAuthLoader: RootAuthLoader = async (
   const { authData, showInterstitial, errorReason } = await getAuthData(args.request, opts);
 
   if (showInterstitial) {
-    throw throwInterstitialJsonResponse({ frontendApi, errorReason });
+    throw interstitialJsonResponse({ frontendApi, errorReason, loader: 'root' });
   }
 
   if (!callback) {

diff --git a/packages/remix/src/ssr/utils.ts b/packages/remix/src/ssr/utils.ts
@@ -75,12 +75,17 @@ export function assertObject(val: any, error?: string): asserts val is Record<st
 /**
  * @internal
  */
-export const throwInterstitialJsonResponse = (opts: { frontendApi: string; errorReason: string | undefined }) => {
-  throw json(
+export const interstitialJsonResponse = (opts: {
+  frontendApi: string;
+  errorReason: string | undefined;
+  loader: 'root' | 'nested';
+}) => {
+  return json(
     wrapWithClerkState({
       __clerk_ssr_interstitial: true,
       __frontendApi: opts.frontendApi,
       __lastAuthResult: opts.errorReason,
+      __loader: opts.loader,
     }),
     { status: 401 },
   );