Remix v2_errorBoundary makes sign in 401 error

[arjunyel]

• Review the documentation: https://docs.clerk.com/
• Search for existing issues: https://github.com/clerkinc/javascript/issues
• Go through package changelog files.
• Provide the Frontend API key from your application dashboard.

Package + Version

• @clerk/clerk-js
• @clerk/clerk-react
• @clerk/nextjs
• @clerk/remix
• @clerk/types
• @clerk/themes
• @clerk/localizations
• @clerk/clerk-expo
• @clerk/backend
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/fastify
• gatsby-plugin-clerk
• build/tooling/chore
• other:

Dependencies + versions

{
  "dependencies": {
    "@clerk/remix": "^2.2.17",
    "@remix-run/node": "^1.14.3",
    "@remix-run/react": "^1.14.3",
    "@remix-run/vercel": "^1.14.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.14.3",
    "@remix-run/eslint-config": "^1.14.3",
    "@remix-run/serve": "^1.14.3",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "cross-env": "^7.0.3",
    "eslint": "^8.9.0",
    "prettier": "^2.5.1",
    "typescript": "^4.6.2"
  }
}

Browser/OS

Chrome 112

Description

https://github.com/arjunyel/remix-auth-starter/tree/bug/v2_errorBoundary

In remix.config.js, if v2_errorBoundary: true login results in a 401 error. v2_errorBoundary: false works fine.

v2_errorBoundary - Combine ErrorBoundary/CatchBoundary into a single ErrorBoundary https://remix.run/blog/future-flags

[dimkl]

Hello @arjunyel. Thank you for reporting this.

I have followed the next steps but i couldn't reproduce the error you are describing:

• git clone https://github.com/arjunyel/remix-auth-starter
• cd remix-auth-starter && git checkout bug/v2_errorBoundary
• mv .env.sample .env && {...populate the envs from dashboard...}
• npm i && npm run dev
• Click on Signin at top left corner in http://localhost:3000

Could you provide more information about the 401 error? Example

• stacktrace if it's logged in server or console
• x-clerk-auth-* response headers in the failed request with http 401
• any other information you might think it could help

[arjunyel]

Oh wow, I am getting no error in the console and there are no headers on the failed request. But it happens 100% of the time for me (and in my other project). Are you signing in with Google? I am.

Any chance we can do a quick screen share in Discord since I can reproduce it 100% of the time? I am @arjunyel in the discord

[arjunyel]

Regular email password login works, but Google sign in throws the 401

[dimkl]

x-clerk-auth-* response headers in the failed request with http 401
The reason the above is not visible is because you need to include those headers in response ( i forgot to mention it above 😅 ).
To do so you can use the following snippet in root.ts file:

import { getClerkDebugHeaders } from '@clerk/remix/ssr.server';

export function headers({
  actionHeaders,
  loaderHeaders,
  parentHeaders,
}: {
  actionHeaders: Headers;
  loaderHeaders: Headers;
  parentHeaders: Headers;
}) {
  return {
    ...getClerkDebugHeaders(loaderHeaders),
  };
}

I managed to reproduce your issue but making the Clerk short lived session expire before refreshing the page.
I will also try the google sign-in flow and come back to you with more information.

[arjunyel]

Headers are

x-clerk-auth-message: null
x-clerk-auth-reason: uat-missing
x-clerk-auth-status: interstitial

Someone in discord is also getting the uat missing error https://discord.com/channels/856971667393609759/1086202715077627905

[dimkl]

Short answer

Supporting v2_errorBoundary flag, would require to export an ClerkErrorBoundary that will handle both CatchBoundary and ErrorBoundary .
We cannot make a quick fix at the moment because the implementation of such ClerkErrorBoundary would require to use useRouteError which is not supported by our minimum peer dependency of the @remix-run/react.

We have created an internal ticket for this and i will keep this issue open. Until we resolve this, i would suggest to avoid using the v2_errorBoundary flag. If it's a must have, i could provide a hack (but i would advise against it).

Extra information

There is special case in Clerk & SSR (eg when an expired session cookie is sent to server) where we do some magic to refresh the session and replay the request (we call it interstitial). In that case an http 401 is returned to the user (using the root CatchBoundary) with an html content.

In the case where v2_errorBoundary is set, the example code (stater template and your provided repo) is not correct since it uses the root level CatchBoundary instead of the the new ErrorBoundary which results in allowing the http 401 code with the interstitial magic to reach Browser and stuck there.

[arjunyel]

@dimkl thank you so much friend! I'll disable v2_errorBoundary for now

[arjunyel]

Would it be possible to increase the minimum peer dependency of the @remix-run/react? Would help getting prepared for Remix v2 which is coming :)

[nicksrandall]

@dimkl latest version of Remix (1.15) will likely be the last before v2 and it now warns when not using the v2_errorBoundary flag. This should probably be addressed soon or not clerk customers will be able to upgrade to Remix v2.

[nicksrandall]

FWIW, this should work as a temporary work around:

export function ErrorBoundary() {
  const error = useRouteError();
  if (isRouteErrorResponse(error)) {
    const { __clerk_ssr_interstitial_html } =
      error?.data?.clerkState?.__internal_clerk_state || {};
    if (__clerk_ssr_interstitial_html) {
      return (
        <html
          dangerouslySetInnerHTML={{ __html: __clerk_ssr_interstitial_html }}
        />
      );
    }
    return (
		//  Current CatchBoundary Component
    );
  }
  return (
    // Current ErrorBoundary Component
  );
}