Clerk core v2 - Clerk fails to load under cypress iframe - "Browser unauthenticated"

AlonMiz commented 4 months ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] 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

https://github.com/clerk/example-cypress-nextjs

Publishable key

pk_test_cHJvcGVyLXNwYXJyb3ctNDkuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Im struggling with upgrading to the latest clerk. i already migrated the app to the new core, but all of my e2e tests are broken now.

Steps to reproduce:

Upgrading to latest Clerk
run e2e tests

Expected behavior:

tests should work as before

Actual behavior:

tests are failing with cookie issues

{
    "errors": [
        {
            "message": "Browser unauthenticated",
            "long_message": "Unable to authenticate this browser for your development instance. Check your Clerk cookies and try again. If the issue persists reach out to support@clerk.com.",
            "code": "dev_browser_unauthenticated"
        }
    ],
    "clerk_trace_id": "7d1c50d0956fd9d3fcf0e724ee113c37"
}

    "@clerk/clerk-sdk-node": "5.0.0",
    "@clerk/nextjs": "5.0.1",
    "@clerk/themes": "2.0.0",
    "next": "14.2.2",

exception

Uncaught (in promise) Error: ClerkJS: Something went wrong initializing Clerk.
    at o (VM2800 clerk.browser.js:2:73614)
    at $e.<anonymous> (VM2800 clerk.browser.js:2:223897)
    at async $e.load (VM2800 clerk.browser.js:2:202798)
    at async _IsomorphicClerk.loadClerkJS (VM2822 node_modules_@clerk_clerk-react_dist_51047c._.js:1728:17)

sign in method

Cypress.Commands.add(`signIn`, () => {
  cy.log(`Signing in.`);
  cy.setCookie(languageUtils.languageCookieKey, 'he');
  cy.visit('/');

  cy.window().should((win) => {
    expect(win).to.not.have.property(`Clerk`, undefined);
    expect(win.Clerk?.loaded).to.eq(true);
  });
  cy.window().then((win) => {
    cy.clearCookies({ domain: win.location.host });
    cy.log(`Clear cookies.`);
  });
  cy.window().then(async (win) => {
    cy.log(`Creating user.`);
    await win.Clerk.signOut();
    const res = await win.Clerk.client?.signIn.create({
      identifier: 'clerk_test@example.com',
      password: 'asdqwe123',
    });
    cy.log(`Signing in.`);
    await win.Clerk?.setActive?.({
      session: res?.createdSessionId,
    });
    cy.log(`Finished Signing in.`);
  });
});

Environment

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 59.81 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.0/bin/npm
    pnpm: 8.5.0 - ~/Library/pnpm/pnpm
    bun: 1.0.1 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 106.1.44.105
    Chrome: 124.0.6367.158
    Safari: 17.4.1
  npmPackages:
    @clerk/clerk-sdk-node: 5.0.5 => 5.0.5
    @clerk/nextjs: 5.0.8 => 5.0.8
    @clerk/themes: 2.1.3 => 2.1.3
    cypress: 13.9.0 => 13.9.0
    next: 14.2.3 => 14.2.3
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1

LekoArts commented 3 months ago

Hi!

I think this could be fixed by https://github.com/clerk/javascript/pull/3245 but it wasn't released yet to autoload for everyone.

Can you change your <ClerkProvider> inside your Next.js application to the following?

<ClerkProvider clerkJSVersion="5.2.3-snapshot.v47a3ff9">

And then try again? This would be a temporary test of the new version to see if it works.

LekoArts commented 3 months ago

https://github.com/clerk/javascript/pull/3245 was released now. Please retry again with latest versions.

AlonMiz commented 3 months ago

Thanks @LekoArts it does work now 🥳 ill update if anything goes wrong 😉

clerk / javascript