clerk/javascript

No way to skip authentication with Clerk + Remix

tmcw opened this issue · 5 comments

tmcw commented

Preliminary Checks

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 commented

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

  • 👎1
tmcw commented

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 commented

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.

ConnectWithNoor commented

Facing almost similar issue for Next.js 14.

I have a /chatbot route that is iframed to another domain. Clerk is not able to initialize itself for those domains.

I am using "@clerk/nextjs": "^5.1.3", where it exports clerkMiddleware, which doesn't support ignoredRoutes feature. (as mentioned by @iqqmuT

Do we have a way in Clerk v5 to make it work for iframes?

Would be happy to provide additional information if required.

anagstef commented

Hello @ConnectWithNoor! What are you trying to achieve?

Authenticated routes inside cross-origin iframes do not work out of the box, due to security reasons.
If you just want to embed a page in an iframe without authentication, you can just exclude the path from the protected pages; you don't need the ignoredRoutes.