Infinite Redirect Loop When Home URL is current URL

[jeremysawesome]

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 / Replay Link

https://gitlab.com/jeremysawesome/clerk-minimal-reproduction

Publishable key

pk_test_dG9nZXRoZXItZWdyZXQtMzUuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

If the Home URL and the current url are the same, and there is a SignIn or SignUp component mounted on the page, then Clerk will infinitely redirect.

Here's a gif to illustrate

Steps to reproduce:

1. Drop the index.html file into a directory where it can be accessed via browser
   (i.e. $DEVHOST/clerk-minimal-reproduction/).
2. Adjust the script src and publishable key for your Clerk app.
3. Navigate to Developers > Paths in your Clerk Dashboard
4. Change your Application homepage to /clerk-minimal-reproduction/
5. Do the same for all the User redirects in Configure > Account Portal > Redirects
6. Log in or sign up for your application via $DEVHOST/clerk-minimal-reproduction/ in your browser.

Behold the redirect loop.

Expected behavior:

1. Don't redirect to the same url (in the case where the Home URL and current URL are the same)
2. Output a warning or error in the console if the preconditions fail.
3. Don't render the components if the preconditions fail (i.e. the urls are the same).

Actual behavior:

Clerk initiates an infinite redirect loop. It's hard to find the reason why unless you are able to pause the page after the Clerk message appears in the console but before the page reloads.

Environment

Not necessary. This is a simple index.html page hosted at a publicly accessible url.

[younessaita]

I'm facing the same issue currently, any fix?

[Eventrope]

Same issue!

[panteliselef]

Hello @jeremysawesome

By default the <SignIn /> will perform a route navigation to / if user is signed in. This is because the common pattern is to mount the component a different page (e.g /sign-in) than your home page.

To fix this in vanilla JS you can simply check if the user exists and avoid mounting the component.

<script>
    async function clerkLoad() {
        await Clerk.load()
        if(Clerk.user) return ; // This line is needed
        const signInContainer = document.getElementById("SignIn")
        Clerk.mountSignIn(signInContainer)
    }
</script>

[panteliselef]

I'm closing due to inactivity, if the snippet above does not solve the issue, feel free to reopen

[jeremysawesome]

Hi @panteliselef
Thanks for the response. I appreciate the code suggestion and will likely implement it.

I still think that, rather than redirecting, the component should just not be rendered.

As it is the warnings that are output in the console cannot be read unless one can expertly stop the redirect loop.

That said, I think that #2251, when it is released, will resolve some of the confusion.

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.