From d4bd9dc33295e1250fe338dbe83d5e5f0fd5c54f Mon Sep 17 00:00:00 2001 From: Nikos Douvlis Date: Wed, 7 Dec 2022 11:38:55 +0200 Subject: [PATCH] fix(remix): Remix 1.8 hotfix We temporarily throw the interstitial page from within getAuth in addition to the rootAuthLoader.ts See https://github.com/remix-run/remix/issues/4791 for details --- packages/remix/src/errors.ts | 4 ---- packages/remix/src/experimental/errors.ts | 4 ---- packages/remix/src/experimental/ssr/getAuth.ts | 10 +++------- .../remix/src/experimental/ssr/rootAuthLoader.ts | 4 ++-- packages/remix/src/experimental/ssr/utils.ts | 5 +++-- packages/remix/src/ssr/getAuth.ts | 15 ++++++--------- packages/remix/src/ssr/rootAuthLoader.ts | 4 ++-- packages/remix/src/ssr/utils.ts | 9 +++++++-- 8 files changed, 23 insertions(+), 32 deletions(-) diff --git a/packages/remix/src/errors.ts b/packages/remix/src/errors.ts index 08e5b90553d..81968b0865a 100644 --- 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 support@clerk.dev 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 index 7889864273b..9e73448dfbe 100644 --- 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 support@clerk.dev 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 index f033e9abd1f..e86917e884d 100644 --- 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 index 1dae338f7be..2c2a2b7105d 100644 --- 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 index db18e0814f1..8fe755ad449 100644 --- 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 { - 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 index a69e8016abd..2b6d2fd244f 100644 --- 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 index 331c08135a3..067666ee102 100644 --- 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 index ea6a7ade5dd..a1f56f84dd5 100644 --- 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 { - 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 }, );