No way to skip authentication with Clerk + Remix

[tmcw]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs
• I have searched for existing issues: https://github.com/clerk/javascript/issues
• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

.

Publishable key

.

Description

We've been suffering from the various remix issues and have an app that supports iframe embeds. Clerk does not work with iframe embeds at all - it produces a 401 and breaks. Ideally, Clerk wouldn't break when used inside of iframes. But, sparing that, it would be nice if we could disable Clerk for certain routes.

We got recommended to something like this:

export const loader = (args: LoaderFunctionArgs) => {
  const u = new URL(args.request.url);
  // If we're loading an embed path, skip authentication
  // because of Clerk's quality problems.
  if (u.pathname.startsWith("/embed")) {
    return loaderInner({
      ...args,
      request: {
        ...args.request,
        auth: {
          // Faking the request just in case a downstream
          // loader expects realism
          sessionClaims: {} as any,
          userId: null,
          orgId: null,
          debug: false as any,
          orgRole: null,
        } as any,
      },
    } satisfies LoaderFunctionArgsWithAuth);
  } else {
    return rootAuthLoader(args, loaderInner);
  }
};

To resolve this without an update on Clerk's end, but that produces the error message:

🔒 Clerk: Looks like you didn't pass 'clerkState' to "".
 
Use 'rootAuthLoader' as your root loader. Then, simply wrap the App component with ClerkApp and make it the default export.
Example:

So, in short:

• Clerk doesn't work in iframes. When it renders an interstitial, it breaks the page.
• We'd love for it to work in iframes, but if not, for it to be disable'able on specific routes, like it appears it is for Next.js

Steps to reproduce:

1. Embed a page that uses clerk
2. Have an expired session

Expected behavior:

Clerk shouldn't authenticate in the iframe.

Actual behavior:

It does and breaks the iframe environment

Environment

@remix-run/dev: 2.8.0 => 2.8.0
    @remix-run/eslint-config: 2.6.0 => 2.8.0
    @remix-run/node: 2.6.0 => 2.8.0
    @remix-run/react: 2.6.0 => 2.8.0
    @remix-run/serve: 2.6.0 => 2.8.0
    @clerk/backend: ^0.38.3 => 0.38.3
    @clerk/clerk-sdk-node: ^4.13.11 => 4.13.11
    @clerk/remix: ^3.1.21 => 3.1.21

[iqqmuT]

You can prevent Clerk being in use on specific routes by skipping them in config.matcher or adding them to ignoreRoutes in middleware.js:

middleware.js

export default authMiddleware({
  // ...
  ignoredRoutes: ['/embed(.*)'],
});

https://clerk.com/docs/references/nextjs/auth-middleware#options

[tmcw]

This issue is "No way to skip authentication with Clerk + Remix" - authMiddleware is a feature for the Next.js integration, not the Remix integration.

[anagstef]

Hello! This issue has been resolved with the release of Core 2, which totally replaces the Interstitial with a new mechanism that does not break inside iframes.

I'll be closing this issue as it is fixed on the latest version of @clerk/remix package.