forceRedirectUrl is not working when using SignInButton about javascript

[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/[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.