clerk/javascript

[BUG] "forceRedirectUrl" is being ignored on <SignUp /> component. "@clerk/clerk-react": "^5.2.8"

MityoDraganov opened this issue · 2 comments

MityoDraganov commented

Preliminary Checks

Reproduction

https://github.com/MityoDraganov/clerk-react-starter.git

Publishable key

pk_test_Y29ycmVjdC1oZW4tNjEuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:

  1. Step 1 - open the project and install dependencies
  2. Step 2 - navigate to the "/page" Page. (http://localhost:5173/page)
  3. Step 3 - sign up using google account (I have tested it only with google sign in, but it might affect other methods also)

Expected behavior:
Since I have provided the parameter "forceRedirectUrl" with value "currentPage" (where currentPage = window.location.href),
I expect it after sign up, to be redirected to same page ("/page")

Actual behavior:
screen recorded explanation: https://drive.google.com/file/d/1qxhiPU2fFvyjsOj0vXnBmYJKzOuIQkgi/view?usp=sharing

After signing up, I am being redirected to the home page ("/")

One way to work around this, that I have found is to use the "redirectUrl" parameter, but it is deprecated.

Environment

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M3
    Memory: 322.45 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - /usr/local/bin/node
    npm: 10.7.0 - /usr/local/bin/npm
  Browsers:
    Safari: 17.5
  npmPackages:
    @clerk/clerk-react: ^5.2.8 => 5.2.8 
    @radix-ui/react-avatar: ^1.1.0 => 1.1.0 
    @radix-ui/react-slot: ^1.1.0 => 1.1.0 
    @react-three/drei: ^9.109.1 => 9.109.1 
    @react-three/fiber: ^8.16.8 => 8.16.8 
    @types/node: ^20.14.11 => 20.14.11 
    @types/react: ^18.3.3 => 18.3.3 
    @types/react-dom: ^18.3.0 => 18.3.0 
    @types/three: ^0.166.0 => 0.166.0 
    @typescript-eslint/eslint-plugin: ^7.15.0 => 7.16.1 
    @typescript-eslint/parser: ^7.15.0 => 7.16.1 
    @vitejs/plugin-react-swc: ^3.5.0 => 3.7.0 
    autoprefixer: ^10.4.19 => 10.4.19 
    class-variance-authority: ^0.7.0 => 0.7.0 
    clsx: ^2.1.1 => 2.1.1 
    eslint: ^8.57.0 => 8.57.0 
    eslint-plugin-react-hooks: ^4.6.2 => 4.6.2 
    eslint-plugin-react-refresh: ^0.4.7 => 0.4.9 
    lucide-react: ^0.414.0 => 0.414.0 
    postcss: ^8.4.39 => 8.4.39 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    react-hot-toast: ^2.4.1 => 2.4.1 
    react-router-dom: ^6.25.1 => 6.25.1 
    tailwind-merge: ^2.4.0 => 2.4.0 
    tailwindcss: ^3.4.6 => 3.4.6 
    tailwindcss-animate: ^1.0.7 => 1.0.7 
    three: ^0.166.1 => 0.166.1 
    typescript: ^5.2.2 => 5.5.3 
    vite: ^5.3.4 => 5.3.4
wobsoriano commented

Hi, thank you for reporting! I've attempted to reproduce the behavior you described, and I believe it's expected when you sign up using an existing account. Could you please try signing up with a new account and verify if it redirects to /page?

If you also want existing users to be redirected to the /page route after signing up with Google (for example), you can set both forceRedirectUrl and signInForceRedirectUrl to /page in the <SignUp /> component:

<SignUp forceRedirectUrl={'/page'} signInForceRedirectUrl={'/page'} />
  • forceRedirectUrl - this URL will always be redirected to after the user signs up
  • signInForceRedirectUrl - this URL will always be redirected to after the user signs in (this is what's happening in your screen record because you most likely signed up using that email already)

You can find all <SignUp /> props here. Let us know if that fixes your issue!

MityoDraganov commented

Thank you for the response and for helping clarify the behavior of the component. Upon further investigation, I realize that the issue stemmed from my misunderstanding of how the forceRedirectUrl and signInForceRedirectUrl parameters work, particularly with existing accounts.

After testing with the updated configuration you provided, everything works as expected. I appreciate your guidance and support in resolving this matter.

Thanks again for your assistance!

Best regards,
Mityo Draganov

  • ❤️1