forceRedirectUrl is not working when using SignInButton

Question

forceRedirectUrl is not working when using SignInButton

Closed this issue 8 months ago · 16 comments

spacecat commented 8 months ago

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:

Follow https://clerk.com/docs/quickstarts/nextjs
Create some routes, e.g. /dashboard, /dashboard/blog. These are included in the repo.
Configure your sign in button like this: ``
Navigate to /dashboard
Click on the "Sign in" link
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

cfortuner commented 8 months ago

+1 here.

jakobevangelista commented 8 months ago

+1

Answer 1 · 2024-05-08T01:12:34.000Z

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

Answer 2 · 2024-05-09T13:24:52.000Z

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!

Answer 3 · 2024-05-14T03:41:05.000Z

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.

Answer 4 · 2024-05-14T16:20:56.000Z

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>
    );
  }

Answer 5 · 2024-05-15T05:56:24.000Z

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

Answer 6 · 2024-05-15T17:18:00.000Z

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

Answer 7 · 2024-05-15T18:23:07.000Z

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

Answer 8 · 2024-05-15T21:26:56.000Z

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

Answer 9 · 2024-05-15T22:06:46.000Z

@BRKalow
Here are the steps to reproduce

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

npm run dev
go to localhost:3000/test
click the SECOND sign-in button in the page (The first sign-in button is generated from the layout page).
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.

Answer 10 · 2024-05-20T12:24:36.000Z

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

Answer 11 · 2024-05-20T18:02:15.000Z

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

Answer 12 · 2024-05-21T07:04:57.000Z

@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.

Answer 13 · 2024-06-05T18:20:40.000Z

@LekoArts you are correct. The fix works for the reproduction repo in this thread. I updated the npm package to: npm i -E @clerk/nextjs@5.1.4 and now it works.

I will try it again in my real project. There's where I could not get it to work. I'll get back with results.

Answer 14 · 2024-06-05T18:32:16.000Z

Happy to report that it's working in my other project as well 🥳