Router reloading causes race condition with login flow

jonahallibone commented 9 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 / Replay Link

NA

Publishable key

pk_test_bGliZXJhbC1zd2lmdC01NC5jbGVyay5hY2NvdW50cy5kZXYk

Description

useSafeLayoutEffect(() => {
    window.__unstable__onAfterSetActive = () => {
      // Re-run the middleware every time there auth state changes.
      // This enables complete control from a centralised place (NextJS middleware),
      // as we will invoke it every time the client-side auth state changes, eg: signing-out, switching orgs, etc.\
      if (__unstable_invokeMiddlewareOnAuthStateChange) {
        void push(window.location.href);
      }
    };
  }, []);

This line seems to cause a race condition with the example in the docs.

Following this example here

if (result.status === "complete") {
  console.log(result);
  await setActive({ session: result.createdSessionId });
  router.push("/")
}

When I do this, I router.push("/") but immediately get sent back to the previous URL. The only way around this is to pop-out of nextjs and using window.location.href = newUrl.

While this works, it's definitely not ideal. Is there a new way to navigate after session changes or should I continue to use window.location?

Environment

System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 74.81 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.1.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.4 - /opt/homebrew/bin/npm
    pnpm: 8.6.11 - ~/Library/pnpm/pnpm
    bun: 1.0.1 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @axe-core/react: ^4.8.2 => 4.8.2
    @chakra-ui/anatomy: ^2.2.2 => 2.2.2
    @chakra-ui/cli: ^2.4.1 => 2.4.1
    @chakra-ui/react: ^2.8.2 => 2.8.2
    @chakra-ui/react-use-size: ^2.1.0 => 2.1.0
    @chakra-ui/styled-system: ^2.9.2 => 2.9.2
    @clerk/nextjs: ^4.29.4 => 4.29.4
    @datadog/browser-rum: ^5.6.0 => 5.6.0
    @dnd-kit/core: ^6.1.0 => 6.1.0
    @dnd-kit/sortable: ^8.0.0 => 8.0.0
    @dnd-kit/utilities: ^3.2.2 => 3.2.2
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @faker-js/faker: ^8.3.1 => 8.3.1
    @fullstory/browser: ^2.0.1 => 2.0.1
    @hookform/devtools: ^4.3.1 => 4.3.1
    @hookform/resolvers: ^3.3.4 => 3.3.4
    @playwright/test: ^1.40.1 => 1.40.1
    @sentry/nextjs: ^7.92.0 => 7.92.0
    @tanem/react-nprogress: ^5.0.51 => 5.0.51
    @tanstack/eslint-plugin-query: 5.17.7 => 5.17.7
    @tanstack/react-query: ^5.17.9 => 5.17.9
    @tanstack/react-query-devtools: ^5.17.9 => 5.17.9
    @tanstack/react-table: ^8.11.6 => 8.11.6
    @tanstack/react-virtual: ^3.0.1 => 3.0.1
    @testing-library/jest-dom: ^6.2.0 => 6.2.0
    @testing-library/react: ^14.1.2 => 14.1.2
    @testing-library/user-event: ^14.5.2 => 14.5.2
    @tiptap/core: ^2.1.15 => 2.1.15
    @tiptap/extension-bullet-list: ^2.1.15 => 2.1.15
    @tiptap/extension-code: ^2.1.15 => 2.1.15
    @tiptap/extension-code-block: ^2.1.15 => 2.1.15
    @tiptap/extension-color: ^2.1.15 => 2.1.15
    @tiptap/extension-document: ^2.1.15 => 2.1.15
    @tiptap/extension-font-family: ^2.1.15 => 2.1.15
    @tiptap/extension-heading: ^2.1.15 => 2.1.15
    @tiptap/extension-link: ^2.1.15 => 2.1.15
    @tiptap/extension-list-item: ^2.1.15 => 2.1.15
    @tiptap/extension-mention: ^2.1.15 => 2.1.15
    @tiptap/extension-ordered-list: ^2.1.15 => 2.1.15
    @tiptap/extension-paragraph: ^2.1.15 => 2.1.15
    @tiptap/extension-placeholder: ^2.1.15 => 2.1.15
    @tiptap/extension-table: ^2.1.15 => 2.1.15
    @tiptap/extension-table-cell: ^2.1.15 => 2.1.15
    @tiptap/extension-table-header: ^2.1.15 => 2.1.15
    @tiptap/extension-table-row: ^2.1.15 => 2.1.15
    @tiptap/extension-text-align: ^2.1.15 => 2.1.15
    @tiptap/extension-text-style: ^2.1.15 => 2.1.15
    @tiptap/extension-underline: ^2.1.15 => 2.1.15
    @tiptap/react: ^2.1.15 => 2.1.15
    @tiptap/starter-kit: ^2.1.15 => 2.1.15
    @tiptap/suggestion: ^2.1.15 => 2.1.15
    @trivago/prettier-plugin-sort-imports: ^4.3.0 => 4.3.0
    @types/country-list: ^2.1.4 => 2.1.4
    @types/dompurify: ^3.0.5 => 3.0.5
    @types/file-saver: ^2.0.7 => 2.0.7
    @types/jest: ^29.5.11 => 29.5.11
    @types/mime: ^3.0.4 => 3.0.4
    @types/node: 20.10.8 => 20.10.8
    @types/papaparse: ^5.3.14 => 5.3.14
    @types/react: ^18.2.47 => 18.2.47
    @types/react-beautiful-dnd: ^13.1.8 => 13.1.8
    @types/react-color: ^3.0.11 => 3.0.11
    @types/react-datepicker: ^4.19.5 => 4.19.5
    @types/react-dom: ^18.2.18 => 18.2.18
    @types/react-mentions: ^4.1.13 => 4.1.13
    @types/styled-components: ^5.1.34 => 5.1.34
    @types/tinycolor2: ^1.4.6 => 1.4.6
    @typescript-eslint/eslint-plugin: ^6.18.1 => 6.18.1
    @typescript-eslint/parser: ^6.18.1 => 6.18.1
    ag-grid-community: ^31.0.1 => 31.0.1
    ag-grid-react: ^31.0.1 => 31.0.1
    chakra-react-select: ^4.7.6 => 4.7.6
    chart.js: ^4.4.1 => 4.4.1
    core-js: ^3.35.0 => 3.35.0
    country-list: ^2.3.0 => 2.3.0
    dayjs: ^1.11.10 => 1.11.10
    dompurify: ^3.0.8 => 3.0.8
    dotenv: ^16.3.1 => 16.3.1
    eslint: ^8.56.0 => 8.56.0
    eslint-config-airbnb: ^19.0.4 => 19.0.4
    eslint-config-airbnb-typescript: ^17.1.0 => 17.1.0
    eslint-config-next: ^14.0.4 => 14.0.4
    eslint-config-prettier: ^9.1.0 => 9.1.0
    eslint-config-react-app: ^7.0.1 => 7.0.1
    eslint-plugin-deprecation: ^2.0.0 => 2.0.0
    eslint-plugin-import: ^2.29.1 => 2.29.1
    eslint-plugin-jsdoc: ^48.0.2 => 48.0.2
    eslint-plugin-react: ^7.33.2 => 7.33.2
    eslint-plugin-tsdoc: ^0.2.17 => 0.2.17
    eslint-plugin-unused-imports: ^3.0.0 => 3.0.0
    file-saver: ^2.0.5 => 2.0.5
    framer-motion: ^10.17.12 => 10.17.12
    fuse.js: ^7.0.0 => 7.0.0
    husky: ^8.0.3 => 8.0.3
    jszip: ^3.10.1 => 3.10.1
    lint-staged: ^15.2.0 => 15.2.0
    lodash: ^4.17.21 => 4.17.21
    mime: ^4.0.1 => 4.0.1
    nanoid: ^5.0.4 => 5.0.4
    next: ^14.1.0 => 14.1.0
    overlayscrollbars: ^2.4.6 => 2.4.6
    overlayscrollbars-react: ^0.5.3 => 0.5.3
    papaparse: ^5.4.1 => 5.4.1
    pdfjs-dist: ^4.0.379 => 4.0.379
    posthog-js: ^1.97.0 => 1.97.0
    prettier: ^3.1.1 => 3.1.1
    prettier-package-json: ^2.8.0 => 2.8.0
    puppeteer: ^21.7.0 => 21.7.0
    react: ^18.2.0 => 18.2.0
    react-chartjs-2: ^5.2.0 => 5.2.0
    react-color: ^2.19.3 => 2.19.3
    react-confetti: ^6.1.0 => 6.1.0
    react-currency-input-field: ^3.6.14 => 3.6.14
    react-datepicker: ^4.25.0 => 4.25.0
    react-device-detect: ^2.2.3 => 2.2.3
    react-dom: ^18.2.0 => 18.2.0
    react-dropzone: ^14.2.3 => 14.2.3
    react-fast-compare: ^3.2.2 => 3.2.2
    react-hook-form: 7.49.2 => 7.49.2
    react-icons: ^4.12.0 => 4.12.0
    react-imask: ^7.3.0 => 7.3.0
    react-plaid-link: ^3.5.1 => 3.5.1
    react-select: ^5.8.0 => 5.8.0
    react-shepherd: ^4.2.0 => 4.2.0
    rimraf: ^5.0.5 => 5.0.5
    shepherd.js: ^11.2.0 => 11.2.0
    tailwindcss: ^3.4.1 => 3.4.1
    tinycolor2: ^1.6.0 => 1.6.0
    tippy.js: ^6.3.7 => 6.3.7
    ts-node: ^10.9.2 => 10.9.2
    typescript: 5.3.3 => 5.3.3
    urlpattern-polyfill: ^9.0.0 => 9.0.0
    use-local-storage-state: ^19.1.0 => 19.1.0
    zod: ^3.22.4 => 3.22.4
    zustand: ^4.4.7 => 4.4.7

LekoArts commented 8 months ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

clerk-cookie commented 8 months ago

In an effort to keep our GitHub issues clean and focused, we close any issues that are awaiting a reproduction after 8 days on inactivity, and it has been 7 days. This issue will be closed tomorrow unless a reproduction is produced. If it takes longer than this to get a reproduction, that's ok, just drop a comment and we will re-open the issue then.

Thanks for being a part of the Clerk community! 🙏

paschaldev commented 6 months ago

@jonahallibone Did you ever find a solution?

jonahallibone commented 6 months ago

@jonahallibone Did you ever find a solution?

Nope

clerk / javascript