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

[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!

[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/[email protected]

[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!

[Chenalejandro]

@BRKalow
Here are the steps to reproduce

1. clone the basic create-next-app with clerk integrated: https://github.com/Chenalejandro/clerk-bug
   my .env.local env values:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZGVsaWNhdGUtbW9yYXktNS5jbGVyay5hY2NvdW50cy5kZXYk
# Put your clerk secret key here:
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

3. npm run dev
4. go to localhost:3000/test
5. click the SECOND sign-in button in the page (The first sign-in button is generated from the layout page).
6. login with credentials

Expected: redirected to the /test page, since we had forced it by adding forceRedirectUrl prop:

            <SignInButton
                signUpForceRedirectUrl="/test"
                forceRedirectUrl="/test"
            >

Actual: redirected to the root page

The same happends when signing up

I noticed that when clicking the SECOND sign-in button in /test, it redirected me to the /sign-in page with the following url parameters:
http://localhost:3000/sign-in?sign_up_force_redirect_url=http%3A%2F%2Flocalhost%3A3000%2Ftest&sign_in_force_redirect_url=http%3A%2F%2Flocalhost%3A3000%2Ftest&redirect_url=http%3A%2F%2Flocalhost%3A3000%2Ftest

If I remove &redirect_url=http%3A%2F%2Flocalhost%3A3000%2Ftest and just use this url http://localhost:3000/sign-in?sign_up_force_redirect_url=http%3A%2F%2Flocalhost%3A3000%2Ftest&sign_in_force_redirect_url=http%3A%2F%2Flocalhost%3A3000%2Ftest, then I was redirected correctly to the /test page.

[spacecat]

@LekoArts please reopen. I'm still facing this issue. Please see my latest comments here: https://discord.com/channels/856971667393609759/1236251832763023420

[slig]

I'm having the same issue using the JS library directly {{ CLERK_FRONTEND_API_URL }}/npm/@clerk/clerk-js@5/dist/clerk.browser.js.

[LekoArts]

@spacecat Please provide a new reproduction if the old one with updated dependencies isn't showing your issue. On our end your reproduction with the fix worked.