Password reset is not working

[renardeinside]

Bug report

I'm trying to set up password reset flow in my nextjs app with supabase and supabase auth ui. It's not working and I'm struggling to understand the root cause.

Describe the bug

When a reset link is clicked, no password reset dialog is shown.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Instantiate a nextjs app with supabase and auth-ui
2. Create a new page with the following content:

// LOCATED IN pages/auth-ui.jsx
import {
    Auth,
    // Import predefined theme
    ThemeSupa,
} from '@supabase/auth-ui-react'
import {useSupabaseClient} from "@supabase/auth-helpers-react";
import Container from "@mui/material/Container";

const AuthUi = () => {
    const supabase = useSupabaseClient();

    return(
        <Container maxWidth={"sm"}>
            <Auth
                supabaseClient={supabase}
                appearance={{ theme: ThemeSupa }}
                theme="dark"
                redirectTo={`http://app.local/auth-ui`}
            />
        </Container>

    )
}

export default AuthUi

2. Setup your auth settings in supabase:

Site URL: http://app.local
Redirect Url: http://app.local

Side note - I'm using http here since I have a local instance of my app on this redirect URL, so the certificate is not a concern.

3. Using the AuthUI, generate an email for a password reset. The link in the email will be in the format of:

https://XXX.supabase.co/auth/v1/verify?token=XXX&type=recovery&redirect_to=http://app.local/auth-ui

4. Click the link
5. Auth flow will end up with the following path:

http:/app.local/auth-ui#

The user will remain signed in, but no reset password view will be shown.

Expected behavior

It works and doesn't require users to debug this - it's such a basic functionality, strange that it's not working correctly by default.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows] macos
• Browser (if applies) [e.g. chrome, safari] chrome
• Version of supabase-js: [e.g. 6.0.2]:

    "@supabase/auth-helpers-nextjs": "^0.5.2",
    "@supabase/auth-helpers-react": "^0.3.1",
    "@supabase/auth-ui-react": "^0.2.6",
    "@supabase/supabase-js": "^2.1.0",

• Version of Node.js: [e.g. 10.10.0]:

> node -v    
v16.7.0

Additional context

If you'll click the link second time, you'll not get a proper error handle, instead, the redirect will look like this:

http://xxx.local/auth-ui#error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

It's quite clear that it should look like this (query, not an anchor):

http://xxx.local/auth-ui?error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired

[0x111]

Possible duplicate of #72

[mryechkin]

Seems like issue #349 in the gotrue-js repo is related.

In the past, with the old Auth component from the now-deprecated Supabase UI library and v1 of the client lib, I had to listen to the changes in auth state manually in my auth provider, and set the UI view accordingly:

useEffect(() => {
  const activeSession = supabase.auth.session();
  setSession(activeSession);
  setUser(activeSession?.user ?? null);

  const { data: authListener } = supabase.auth.onAuthStateChange(
    (event, currentSession) => {
      // ...
      switch (event) {
          case EVENTS.PASSWORD_RECOVERY:
            setView(VIEWS.UPDATE_PASSWORD);
            break;
          case EVENTS.SIGNED_OUT:
          case EVENTS.USER_UPDATED:
            setView(VIEWS.SIGN_IN);
            break;
          default:
        }
    }
  );

  return () => {
    authListener?.unsubscribe();
  };
}, []);

Then manually show the "Reset Password" form, as it seemed to be the only way to get this to work:

if (view === VIEWS.UPDATE_PASSWORD) {
  return (
    <Auth.UpdatePassword supabaseClient={supabase} />
  );
}

return (
  <Layout>
    {user && (
      {/** Logged-in state */}
    )}
    {!user && <Auth view={view} supabaseClient={supabase} />}
  </Layout>
);

But I'm now discovering this doesn't work anymore for some reason. The PASSWORD_RECOVERY event never seems to fire after going to the URL in the Reset Password email.

Even with the old code and library versions, it doesn't seem to work anymore. I wrote a full post on doing this with the old library, and discovered this issue while updating it for v2 and the new Auth UI.

Seems like the issue is present in both v1 and v2. I found more related issues on this as well:

supabase/auth#960
supabase/auth-js#305

And this comment goes into more detail on the reset password flow.

EDIT: Found another comment that may shed some light on this behaviour.

The TL;DR is that it seems like the Auth UI still doesn't automatically handle what should be a pretty straightforward auth flow.

[jt6677]

The provided Auth UI code just does not work whatsoever. It did not mention @supabase/auth-helpers-react. If you cannot provide any working example, why bother to release this?

[silentworks]

@jt6677 this repository has no relation to auth-helpers-react, they are two independent projects which can be used together if the developer wishes to. There are many examples inside of storybook in this repo. Also there are projects using the Auth UI, so I would think its working, it would be useful if you provided more concrete example of what is not working, even better if you provide a minimal reproducible repository with the issue you are having.

[silentworks]

@renardeinside please provide a repo with the issue you are having, since you are using NextJS its likely that you are getting redirected to the wrong page because the server loads before the client and you get redirect by the server as when it checks to see if you are logged in you would not be at the time the server side page renders.

[Jared-Dahlke]

im having this problem too. After i click 'reset password' link in email, i just get taken to my regular login page.

[hiroshinishio]

Im having this problem too.
https://discordapp.com/channels/839993398554656828/1068736076140773466/1068736076140773466

[giovanniRodighiero]

I didn't try it properly yet, but I can se that in the Solid.js version of the Auth component there's an event listener that handles the redirect you're talking about.

  createEffect(() => {
    /**
     * Overrides the authview if it is changed externally
     */
    const { data: authListener } =
      mergedProps().supabaseClient.auth.onAuthStateChange((event, session) => {
        if (event === 'PASSWORD_RECOVERY') {
          setAuthView(VIEWS.UPDATE_PASSWORD)
        } else if (event === 'USER_UPDATED') {
          setAuthView(VIEWS.SIGN_IN)
        }
      })
    setAuthView(mergedProps().view)

    onCleanup(() => authListener.subscription.unsubscribe())
  })

In the React.js version it's missing

  useEffect(() => {
    /**
     * Overrides the authview if it is changed externally
     */
    setAuthView(view)
  }, [view])

I don't know the project, so it might be that I'm missing something here, but to me it looks like those two bits of code should be the same.

[chrisk-7777]

I've created a very minimal example here: https://github.com/chrisk-7777/supabase-reset-test

It does "work", but it doesn't feel entirely intuitive or documented. Unless I'm missing something in the docs.
I've read this dicusssion a half dozen times to really "get" what is going on.

Disclaimer, I'm new to Supabase and its ecosystem, but not new to authentication.

There were two key points that I initially missed:

1. Auth UI includes a "forget password" view, but not a "reset password" view. To me this was confusing. The confusion comes from my experience with other auth solutions like Auth0 and Laravel's Sanctum/Fortify/Breeze - where a reset flow isn't also a magic link / sign in combo. I can't recall which one Firebase uses, I'll check later. I noticed this recent PR, which is off the back of this confusion. But if anything, that makes it more confusing because someone (like myself) may conflate that to mean that "forgot" is "reset".
   If the team is open to it, I would like to raise a PR saying that "reset password" view is excluded.
   The docs kind of hint to the user being signed in here but it doesn't actually mention a session is started, just that a sign in event occurred. Maybe that is obvious to others, but reading around on various issues/discussions its not.

2. Within the React version of Auth UI, it never reaches the update_password by itself (correct me if I'm wrong). So for the particular case of a post-forget-magic-link-login PASSWORD_RECOVERY event, we need to set some app level state, and manually set the view in consumer land. In hindsight, I guess this makes sense, it makes it handy to have that view available for general password updates, but its confusing that view is sometimes handled internally (swapping between login, register and forgot views), and sometimes handled externally (update password view). Maybe its just me?

Bonus: One other thing that completely caught me off guard was onAuthStateChange should be unregistered, like this, right? Again, I'm new to Supabase, but without unsubscribing, a component re-render will re-fire useEffect, and queue up multiple listeners - is that right? I bring it up because the documentation here outlines the subscribe occurring in a useEffect without any cleanup.

Separately, I believe there is some NextJS funkiness going on. The same thing that @mryechkin is experiencing (sorry to @ you, but I've seen you pop up in nearly every password reset discussion/issue across supabase's repo's, and have helped me understand what is going on). As mentioned somewhere else, the "PASSWORD_RECOVERY" event isn't fired, but is probably related to a clash with Next' routing / rendering modes. I'll try put together a minimal repo for that too.

None of this should be taken as criticism, I'm just trying to clarify my understanding after a day of going around in circles.

[chrisk-7777]

A minimal repo for NextJS: https://github.com/chrisk-7777/supabase-reset-next-test

I'm intentionally avoiding the convenience helpers to keep the surface area small.

If onAuthStateChange is subscribed to within a root page (like index.tsx), or a sub page (like reset.tsx) then everything works fine, just with the same notes from my previous comment.

Note: This is all SSG, no SSR.

[mryechkin]

@chrisk-7777 I ended up ditching the Auth UI library and just created my own Auth forms - much easier than trying to work around the gotchas in this library (see my comment here).

Auth UI includes a "forget password" view, but not a "reset password" view. To me this was confusing.
...
But if anything, that makes it more confusing because someone (like myself) may conflate that to mean that "forgot" is "reset"

I wholeheartedly agree with this, and also find it quite strange that the "Forgot" form is included, but not the "Reset". In my mind the two go hand-in-hand.

So for the particular case of a post-forget-magic-link-login PASSWORD_RECOVERY event, we need to set some app level state, and manually set the view in consumer land. In hindsight, I guess this makes sense, it makes it handy to have that view available for general password updates, but its confusing that view is sometimes handled internally (swapping between login, register and forgot views), and sometimes handled externally (update password view). Maybe its just me?

Yup.. also agreed, and no it's not just you - I was also quite confused when I started looking into this initially. It's again the reason I opted to not use the provided UI library once I moved to Supabase v2, and created my own auth forms and the context provider.

[silentworks]

To everyone in this thread I really appreciate the time you've all taken to explain the difficulties you are facing with the library and the lack of documentation which has led to these difficulties. I am taking it all into consideration as we formulate how to best fix these issues. I think the first step is to document how you would go about handling password reset as this is something that keeps on coming up and it differs per environment [server-side generated (SSG) and single page application (SPA)]. There is also scenarios where it may even work different in SPA environments too because in the case of you using a router in your SPA like React Router you would use the component similar to how you would use it in a SSG environment. I've added in the event listener in the auth-ui-react library to match that of the auth-ui-solid version, but this in effect is only useful in an SPA without a router setup.