forceRedirectUrl is not working when using SignInButton

[spacecat]

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

https://github.com/spacecat/clerk-01

Publishable key

pk_test_ZXhvdGljLXJhYmJpdC00MC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:
In Google Chrome:

1. Follow https://clerk.com/docs/quickstarts/nextjs
2. Create some routes, e.g. /dashboard, /dashboard/blog. These are included in the repo.
3. Configure your sign in button like this: ``
4. Navigate to /dashboard
5. Click on the "Sign in" link
6. Log in using google

For more info: https://discord.com/channels/856971667393609759/1236251832763023420

Expected behavior:

You should end up at /dashboard/blog

Actual behavior:

You end up at /dashboard

Environment

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 274.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    bun: 1.0.13 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  npmPackages:
    @clerk/nextjs: ^5.0.6 => 5.0.6
    @types/node: ^20 => 20.12.8
    @types/react: ^18 => 18.3.1
    @types/react-dom: ^18 => 18.3.0
    eslint: ^8 => 8.57.0
    eslint-config-next: 14.2.3 => 14.2.3
    next: 14.2.3 => 14.2.3
    postcss: ^8 => 8.4.38
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    tailwindcss: ^3.4.1 => 3.4.3
    typescript: ^5 => 5.4.5

[kevinvincent]

Is there a workaround for this? I am unable to launch my app since once the user completes their sign up using the SignUpButton on the homepage, they are not taken to my onboarding flow.

I'm using the signup button like so:

<SignUpButton signInForceRedirectUrl={"/dashboard/alerts"} forceRedirectUrl={"/dashboard/alerts"}>
  <Button>
    Get Started<FaChevronRight className="ml-2"></FaChevronRight>
  </Button>
</SignUpButton>

But when I click the button I'm taken to https://funny-mite-97.accounts.dev/sign-up?redirect_url=http%3A%2F%2Flocalhost%3A3000%2F

I've also noticed that

clerk.buildSignUpUrl({
                signUpForceRedirectUrl: "/dashboard/alerts",
            })

doesn't build the right url. It gives me https://funny-mite-97.accounts.dev/sign-up?__clerk_db_jwt=eyJhb....#/?redirect_url=http%3A%2F%2Flocalhost%3A3000%2F

[cfortuner]

+1 here.

[nikosdouvlis]

Hello everyone, props passed to the SignUpButton button were not supposed to be transferred to Account Portal. That being said, we've received reports from users finding this behavior confusing so we're discussing internally about potential solutions for this one.

I will have an update for you within the day, thank you!

[jakobevangelista]

+1

[jnnnthnn]

I will have an update for you within the day, thank you!

@nikosdouvlis any updates here?

Just to clarify -- the issue is that forceRedirectUrl and signInForceRedirectUrl in SignUpButton and SignInButton are simply ignored. Instead, the user gets redirected to the default redirect_url. This prevents one from sending the user to an onboarding flow or a checkout flow.

I tried side-stepping the issue through the corresponding environment variables and that didn't work either.

[kevinvincent]

I was able to use this as temporary workaround. But its not ideal:

const SignUpButton = ({ className }: SignUpButtonProps) => {

    const clerk = useClerk()

    return (
      <Button className={className} onClick={()=>{clerk.redirectToSignUp({
        redirectUrl: `${window.location.origin}/dashboard/alerts`,
    })}}>
        Get Started<FaChevronRight className="ml-2" />
      </Button>
    );
  }

[LekoArts]

This has been fixed with #3361 and was released in @clerk/clerk-react@5.0.5

[Chenalejandro]

Hi! I'm still facing the same issue (I'm using the latest release, @clerk/nextjs 5.0.10).

[Chenalejandro]

This issue only happens when I have a custom sign up/sign in page

[brkalow]

@Chenalejandro could you provide a minimal reproduction so we can investigate? Thanks!