javascript: Remix v2_errorBoundary makes sign in 401 error

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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 26 (17 by maintainers)

Commits related to this issue

fix(remix): Support v2_errorBoundary future flags ref: https://remix.run/docs/en/main/pages/v2\#catchboundary-and-errorboundary issue: https://github.com/clerkinc/javascript/issues/965 — committed to clerk/javascript by dimkl a year ago

Most upvoted comments

Thanks a lot! This refactored code seems to work in case anyone needs it:

import {
  RemixRootDefaultCatchBoundary,
  RemixRootDefaultErrorBoundary,
} from "@remix-run/react/dist/errorBoundaries";

export const 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 }} />;
    }
    //  Current CatchBoundary Component
    return <RemixRootDefaultCatchBoundary />;
  } else if (error instanceof Error) {
    return <RemixRootDefaultErrorBoundary error={error} />;
  } else {
    let errorString =
      error == null
        ? "Unknown Error"
        : typeof error === "object" && "toString" in error
        ? error.toString()
        : JSON.stringify(error);
    return <RemixRootDefaultErrorBoundary error={new Error(errorString)} />;
  }
};

+13

ZeldOcarina on Apr 20, 2023

@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 on Apr 3, 2023

I agree with @vedovelli it’s getting increasingly urgent…

ZeldOcarina on May 2, 2023

Bump

nicksrandall on Jun 15, 2023

hello 👋 We will try to prioritise the changes to support v2 in the next couple of weeks. In the meantime @clerk/remix is an open source package, if someone wants to contribute, feel free to open a PR and we will try to review it as soon as possible.

dimkl on May 2, 2023

Hello 👋

As Remix V2 is close to be released, does Clerk have an estimate on when an update can be expected? I am specifically asking about v2_errorBoundary.

Thank you!

vedovelli on May 2, 2023

I’d prefer to keep the configuration to disable it while we work on the improvements for V2.

We can discuss internally, if we want to put this in depending on the amount of time it will take us to add it to our SDK support.

perkinsjr on May 16, 2023

In the meantime can someone please add a note to the docs so others like me don’t spend 2 days trying to figure out why Clerk is not working with their shiny new Remix app.

suryarajendhran on May 15, 2023

I can confirm that the current Clerk tutorial for Remix isn’t working with current version of Remix, 1.15, and that adding the code above to root.jsx makes the app run again.

xixixao on Apr 27, 2023

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
  );
}

nicksrandall on Apr 3, 2023

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

arjunyel on Mar 22, 2023

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

arjunyel on Mar 22, 2023