Password Reset Flow

[kohbongchoi]

Is the documentation out of date? It seems to be.

I'm using Vue.

Upon clicking the reset password link in the email, it redirects and I briefly see the # escaped fragment in the url, then it disappears. I have a function that allows user to update their password, it seems like supabase auth is automatically detecting the temporary access token cause I haven't done any parsing of it.

Like everything works correctly, I'm just wondering if that's some new "magic" in the supabase library.

Love what you guys are doing but you definitely need to get better with documentation, since your start it's been a weak point of the project.

const setPassword = async() => {
  const { user, error } = await supabase.auth.update(access_token, {
    password: vm.password,
  })

  console.log(user)
  return user
  
}

[silentworks]

The documentation is being worked on constantly, thanks for your feedback on this. The reset password flow should however still be the same. I'm going to test it out and get back to you soon.

[kohbongchoi]

Yeah, like, the whole escaped fragment after # flashes so I see the link works but I haven't done anything to parse than and when I call the setPassword function it updates the user password fine, just to clarify.

Like I tested newpassword123456 and then went to login as that user with the new password and it worked

[ulisses-cruz]

Hello, about password reset flow, the documentation says:

Your app must detect type=recovery in the fragment and display a password reset form to the user.

Does supabase provide a way to detect the type=recovery in the url?

[ulisses-cruz]

It looks like, when I click the recovery link in my email, the application receives a SIGNED_IN event before receiving the PASSWORD_RECOVERY event.

[ichbinedgar]

I have the same issue :(

[tourbillonlabs]

I've implemented onAuthStateChange as described by @ulisses-cruz and have it redirect to a reset password form (a modified version of the one in https://github.com/supabase/ui/blob/master/src/components/Auth/Auth.tsx). The password recovery link does log the user in like a magic link, but the user can still change their password successfully with supabaseClient.auth.update({ password }) and does not need the token, so the outcome is still effectively the same. It would be preferable if it didn't log the user in, but is workable.

Because the user is already authenticated, it isn't strictly necessary to go through what @gmmurray implemented to get the access token, but I haven't checked if bypassing the access token to reset the password causes any inconsistencies in the db with any flags or states set in the auth.users table.

[mbappai]

It looks like, when I click the recovery link in my email, the application receives a SIGNED_IN event before receiving the PASSWORD_RECOVERY event.

Exactly! Like what is the point of emitting two events for password recovery? And even if it's 2 that will get sent, at least send the "PASSWORD_RECOVERY" event first so we can catch it early, since that is priority

[kangmingtay]

Hey everyone, we're looking into this and we have made a PR to stop firing the SIGNED_IN event if a PASSWORD_RECOVERY link is detected. You can find details of the PR here but we're also discussing it abit more to figure out if it could be a breaking change for any existing users.

[westbrookc16]

IS there any update to this issue? When I click the reset link in the email, I get redirected to my site url with a # on hte end, but no access token or type parameter or anything. Is the new expected way to listen for the recovery event?

[raroque]

Hi, I can confirm what @ulisses-cruz is seeing here.

It is impossible for a user to reset their password because supabase.auth.onAuthStateChange() is called with SIGNED_IN as the event, causing the URL to be wiped before it can be used.

Also can confirm that SIGNED_IN is being called before PASSWORD_RECOVERY.

I think the SIGNED_IN event should be removed when a user clicks the password recovery link. I'm guessing it sees the recovery link as a "magic link" as well. This should be changed.

[gmmurray]

I can also confirm that this is the issue. I was able to step through these events and my app attempted to show the recover page but was redirected (due to the behavior of my routing and configuration of my app) since the app recognized the SIGNED_IN event and authorized the user. As you said, the password recovery email link effectively behaves like a magic link + a PASSWORD_RECOVERY event after signing in.

For those looking for a temporary solution, I was able to get things working in a somewhat hacky way in React but the concepts should be the same for Vue etc.

I created a state variable to keep track of the access token, then used React's useEffect to update that state variable whenever the current route has that # in it.

const [recoveryToken, setRecoveryToken] = useState<string | null>(null);
...
useEffect(() => {
    if (hash !== '') {
        const query = new URLSearchParams(hash.substring(1));
        const isRecovery = query.get('type') === 'recovery';

        if (isRecovery) {
            setRecoveryToken(query.get('access_token') ?? null);
        }
    }
}, [hash, navigate]);

Then, when I detect that password recovery event, I log out the user and navigate to my app's password recovery page.

if (event === 'PASSWORD_RECOVERY') {
    await supabaseClient.auth.signOut();
    navigate(`/login?access_token=${recoveryToken}&type=recovery`);
}

Again, not the best way to do things, but it works for now until there is some kind of update on this.

[kangmingtay]

Hey everyone, we're looking into this and we have made a PR to stop firing the SIGNED_IN event if a PASSWORD_RECOVERY link is detected. You can find details of the PR supabase/auth-js#629 but we're also discussing it abit more to figure out if it could be a breaking change for any existing users.

[laygir]

Looking forward to this!

[ichbinedgar]

What I did was

import queryString from "query-string";

...
supabase.auth.onAuthStateChange((event, session) => {
  if (event === "PASSWORD_RECOVERY") {
    // redirect user to the page where it creates a new password
  router.push({
        pathname: "/authentication/reset-password",
        query: queryString.parse(router.asPath.split("#")[1]),
      });
  } else {
    // save the user session
  }
})

[umutuygar]

My full workaround for Vue-3: Unlike what was said above, logging out the user is not necessary before the redirect.
The team should either update the documentation in alignment with this workaround, or find a proper solution and update the documentation. But, updating the documentation stands there as an urgent deal in any way.

App.vue:

supabase.auth.onAuthStateChange((event, session) => {
      if (event === "PASSWORD_RECOVERY") {
        const fullPath = router.currentRoute.value.fullPath;
        const urlSearchParams = new URLSearchParams(fullPath);
        const searchQuery = Object.fromEntries(urlSearchParams.entries());
        store.methods.setResetAccessToken(searchQuery["/access_token"]);
      } else {
        store.methods.setUser(session);
      }
    });

Routing:

Router.beforeEach((to,from,next) => {
    const tempToken = store.methods.getResetAcessToken()
    if (from.name !== "UpdatePassword" && tempToken) {
      store.methods.setResetAccessToken()
      next({name: "UpdatePassword",
          query: {
            type: "recovery",
            access_token: tempToken,
          }})
    } else next()
  })

Store:

const state = reactive({
  user: null,
  reset_access_token: null,
})

const methods = {
  setUser(payload) {
    state.user = payload ? payload.user : null;
  },
  setResetAccessToken(payload) {
    state.reset_access_token = payload ? payload : null;
  },
  getResetAcessToken() {
    return state.reset_access_token
  }
}

UpdateUser.vue form submit action:

const onSubmit = async () => {
      try {
        const { error, data } = await supabase.auth.api.updateUser(
          // get access token from url, because the one in store was reset after router.beforeEach to avoid infinite router.beforeEach actions
          route.query["access_token"],
          { password: password.value }
        );
        if (error) throw error;
        router.push({ name: "Home" }); // Because the user is automatically logged in after this
        // Some code to notify user
      } catch (error) {
        // Some code to notify user
      }
    };

[EdgarsLv]

Was setting up password recovery for user.

And problem is that clicking on recovery link it opens my page in new tab. In new tab auth events are SIGNED_IN and then PASSWORD_RECOVERY.

But in original tab from which i was requesting for password recovery i'm signed in and there i'm even not getting password_recovery event.

Why would user keep reseting password if he's already loged in in tab he requested for password recovery?
Is really recovery link should open new tab?

[EdgarsLv]

SIGNED_IN event should not happen when requesting password recovery.

[EdgarsLv]

In both tabs i'm getting logged in. Main tab from which i requested recovery is even not getting recovery event.

[silentworks]

Correct you get logged in when you click a password recovery link, you should redirect the user to a page to update their password at this point and that page should be a page for signed in user. You can use await supabase.auth.update({ password: new_password }) to the password. The documentation for this needs updating as the behaviour doesn't reflect what the documentation says and leaves users confused as to why its happening.

[EdgarsLv]

This is what documentation says:
const { error, data } = await supabase.auth.api
.updateUser(access_token, { password : new_password })

You are telling me to do this:
const { user, error } = await supabase.auth.update({password: 'new password'})

But that's not how password recovery should work.

Ofcourse i can do like this. Tested just now, recovery link logs in user and i can redirect user to password change page. But still in 1st tab i'm loged in and redirected to main page because initial tab does not receives PASSWORD_RECOVERY event.

[zidkim]

When I use this:

const { error, data } = await supabase.auth.api.updateUser(access_token, { password });

I get a 401 with "Invalid token: token contains an invalid number of segments".
I used the query-string library, and it appears to have parsed correctly.

As @silentworks suggests, await supabase.auth.update({ password: new_password }) works, and can be found in the docs here https://supabase.com/docs/reference/javascript/auth-update.

The approach requires the user the be logged in, which works as the user is authenticated as they are sent from the reset email.
This is certainly more of a working solution rather than a workaround, at least in my case.

[derek-rein]

Hi all,

Not sure if anyone else has had a similar problem, but I'm getting the following response from the supabase reset email link:
{"message":"no Route matched with those values"}

My app is hosted on a subdomain ie: app.project.com -- however the redirect url does not include the subdomain.

The url includes the subdomain on the supabase admin, as well in the redirect option as follows:
supabase.auth.api.resetPasswordForEmail(email, {redirectTo: ${process.env.PUBLIC_URL}/new-password}),

[gwvt]

This works for me as expected according to the documentation at https://supabase.com/docs/reference/javascript/auth-api-resetpasswordforemail, but only for my dev app hitting a local Supabase. In that case, the email sent through Inbucket has the URL for localhost with the fragment containing the access_token and type=recovery, and the browser opens the reset password screen. The API call to reset the password also works as expected for the local Supabase db. However, in production the link in the email is for the API URL (<project-code>.supabase.co/...) instead of the Site URL for my deployed front end. So, clicking on that link signs in the user (and in my app redirects to the home page) without ever displaying the reset password page. As far as I can see then there is no functional way for a user on my production app to reset their password via email...

[gwvt]

Update: I see that the link for the local Supabase also is to the API URL, not the Site URL, and the expected flow is to then redirect the browser to an allowed URL with the fragment. I don't know why it works as expected (or at least desired) in my dev env but not in production. I thought I could add some logic in my app to prevent redirecting on detecting type=recovery in the fragment, but it did not work. Then using the redirectTo option on the resetPasswordForEmail method to specify the reset password page in my app, as well as removing all redirect logic in my app, still did not work. In production when the user clicks on the email link they are signed in and redirected to the base site url with apparently no way of preventing this flow so that they can be directed to my reset password page.

[Hiklub2022]

@gwvt could you share your code?
I wanna implement that issue and have some questions. like:
If you arent logged in do you get access token on auth context and use resetPasswordForEmail in a new password page? or how did you do?

[gwvt]

@Hiklub2022 when you generate the email with resetPasswordForEmail the link first hits the Supabase back end and authenticates the user, then redirects to the Site base URL. (This behavior is at variance with the documentation at https://supabase.com/docs/reference/javascript/auth-api-resetpasswordforemail#notes.) So wherever the user lands in your app they will be logged in. In my case, only in the local environment, the user is successfully directed to the password reset page where they can type in the new password and then my app logic calls updateUser to reset it, then the user is redirected to the home page (which in my app is protected content requiring authentication). However since they are actually authenticated in the client when they are redirected to your site URL and you send them to the reset password page, they can actually visit (or be redirected to on page reload) protected content without resetting their password. And in production, as noted above, they are immediately redirected to the home page without even having a chance to reset their password.

I have a Vue 3 app, so if it's of any use to you here's some code:

1. On the redirect from the Supabase API the query string looks like this: ?redirect=/access_token=abcdef&expires_in=3600&refresh_token=abcdef&token_type=bearer&type=recovery. Vue router parses this as a single param on the query object, with the string /access_token=abcdef&expires_in=3600&refresh_token=abcdef&token_type=bearer&type=recovery as the param value. So I have a utility function to parse that string to an object:

// src/modules/utils.js
export const getRedirectObj = (redirectString) =>
  redirectString
    .split('&')
    .reduce((acc, keyValuePair) => {
      const [
        key,
        value,
      ] = keyValuePair.split('=');
      acc[key] = value;
      return acc;
    }, {});

2. which I can use in the beforeEach navigation guard to test for when the password reset page should be displayed:

// router.js
import { getRedirectObj } from 'src/modules/utils';

router.beforeEach((to) => {
  let ret;

  let redirectTypeIsRecovery = false;

  if (to.query.redirect) {
    const redirectObj = getRedirectObj(to.query.redirect);

    redirectTypeIsRecovery = redirectObj.type === 'recovery';
  });

  if (redirectTypeIsRecovery) {
    // add logic for reset password page, like ret = { path: '/reset-password' };
  }

  // either return undefined to continue with navigation or an object with path, etc. to override it
  return ret;
}

3. Then in your reset password page you need to grab the access token from that "redirect string" and use it in the updateUser method:

import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getRedirectObj } from 'src/modules/utils';

const router = useRouter();
const route = useRoute();

let accessToken = '';

const newPassword = ref(''); // the user enters this value in your UI

onMounted(() => {
  if (route.query.redirect) {
    const redirectObj = getRedirectObj(to.query.redirect);

    accessToken = redirectObj['/access_token'];
  }
});

async function resetPassword() {
  try {
    const { error } = await supabase.auth.api
      .updateUser(accessToken, {
        password: newPassword.value,
      });
    if (error) {
      throw error;
    }

    router.push('/'); // or whatever you want to do
  } catch (error) {
    // handle error
  }
}

[IBakeCookies]

Hello,
I have the same issue here, however, I have some other things to report.
When I try to use the resetPasswordForEmail I get 2 cookies sb-refresh-token and sb-access-token added direclty after this function exits. Edit: this doesnt even happen all the time and I am yet to find an accurate reproduction steps...

Edit: since those 2 cookies have secure true, using supabse.auth.signout() later in the app doesnt not delete those cookies...

I am using SSR and having those cookies means the user is authenticated, but has no active session, which breaks many pages in my case.
Once you click the reset link in the email, you get redirected to your app and then it logs you in which adds a session and everything works fine after.

However the redirect link doesnt have any token, nor type (what doc says) all I see is localhost/# though before that for an instant I could see the link that has the token and type recovery, but it instantly redirects me to localhost/# .

Another issue is that the cookies that gets written has completely another expiration date, relative to the session.
I have already used a solution like in this thread #3198 (comment)
to write a cookie after a user logs in to match the expiry of the session.

Please excuse me for maybe some stupid things, but I have never done any BE / Auth work, so its all new and mostly following the docs.

Edit: I have mostly tested on localhost for now, but I dont think that should matter.

[lanbau]

What worked for me

1. Listen to the event PASSWORD_RECOVERY, redirect to /set-password page
2. Update password WITHOUT any access token

This works

const { data, error } = await supabase.auth.update({
        password,
      });

This doesn't work (from documentation)

const { error, data } = await supabase.auth.api
      .updateUser(access_token, { password : new_password })

[jacob-buscher]

This really needs resolved in the documentation, it's been 9 months since this discussion was created and the docs still aren't clear on this. Maybe this should probably be created in an issue instead of discussion?

I'm new to Supabase and we have prod apps in Firebase and we're evaluating Supabase because switching to postgres without the infrastructure headache is super appealing. Everything has been great except how to handle auth flow for things like password resets.

[kiwicopple]

Just a heads-up that there are docs for this: https://supabase.com/docs/reference/javascript/auth-api-resetpasswordforemail#notes

Looks like we just need to be more explicit about how to create a reset form. I'll start an issue for this now

[asciidiego]

@kiwicopple do you mind referencing the issue here? Thanks!

[bennik88]

Is there already an issue being created?

[masnwilliams]

So my setup for password reset is a forgot password page where the user enters their email and submits a form which calls supabase.auth.api.resetPasswordForEmail()

That works great and the email is sent however I decided to add a redirect_to parameter to the function which looks like this:

await supabase.auth.api.resetPasswordForEmail(email, {
  redirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/profile/reset-password`,
})

This, in local development, automatically redirects the user to that page without needing to listen for the PASSWORD_RECOVERY event like the above discussion has included. Once I click the link that is sent to the supabase local instance email server, which is hosted here http://localhost:54324/, I am sent to the redirected to /profile/reset-password1 and I am able to capture the token using this useEffect hook with the queryString npm package:

useEffect(() => {
  if (router.query) {
    setAccessToken(
      queryString.parse(router.asPath.split('#')[1]).access_token as string
    )
  }
}, [router.query, router.asPath])

This all works perfectly, and is pretty clean, on local development but when I deploy it to my test server it just decides not to work at all. The issue occurs when the link that is sent in the email is created. For some reason it doesn't append the token to the end of the redirect url using my Supabase Cloud DB but does when I use Supabase Local Development DB.

I will add that the error I get on my deployed test server when submitting a new password is that the user has to be reauthenticated to update the password.

I agree with @jacob-buscher, this should not be as much of an issue as it is. Documentation really is sparse and this took more time than I had to put towards it and still doesn't work.

[rromikas]

I would add that it's very hard to implement password recovery when app is using hash router.

[KolbySisk]

Another problem with the hash: Nextjs isn't able to read hashes on the server/edge. I'd like to handle the redirect at the edge, but I'm not able to because of the hash. I'd love to see a solution where we can specify our own url for the reset link, rather than just index.

[ZackKnopp]

I'm having the same problem with this integrating with Appsmith. Appsmith uses this format for deployment with git enabled - "https://app.appsmith.com/app/crm-app/PageName-62d1724768242a2a5680?branch=master"

When Supabase redirects for resetting the password we get something like this
"https://app.appsmith.com/app/crm-app/PageName-62d1724768242a2a5680?branch=master**#**access_token=asdfasdfasdf" etc..

The # breaks the link and makes it unusable if the redirect already had any query params in it...

My workaround:

if(appsmith.URL.hash.includes("type=recovery")) {
  // Handle supabase adding hash to the base url ie. https://supabase.com/docs/reference/javascript/auth-api-resetpasswordforemail#notes
  const no_hash = appsmith.URL.hash.substring(1);
  console.log(no_hash);
  const url_param_string = "?" + no_hash;
  const urlParams = new URLSearchParams(url_param_string);
  const params = Object.fromEntries(urlParams);
  console.log("params",params);
  
  // Store token and redirect to password reset page

  }

[codewriter73]

I'm working with supabase-rc@2.0.0-rc.10, and I'm still running into the problem that when listening to onAuthStateChange, only a SIGNED_IN event is registered and no PASSWORD_RECOVERY events. I'm working with next.js. The access token and type=recovery are both present in the path for a short period of time, but is reset because of the signed in event.

[fizerkhan]

+1 Any update on this

It seems to be a simple use case. I don't know why it is not solved yet.

[kangmingtay]

Hi everyone, just to clarify a couple of misconceptions I'm seeing from this discussion regarding the password reset flow:

On the high level, the password reset flow consists of 2 broad steps: (i) Allowing the user to login via the password reset link and (ii) Updating the user's password. This is what the password reset flow should look like in detail:

1. User requests for password reset link (via a "Forgot your password?" button). You should set the options.redirectTo param in resetPasswordForEmail to point to your password reset form
2. Supabase auth sends a password reset link to the user's email
3. User clicks on password reset link in email
4. If the password reset link is valid and hasn't expired, the user will get redirected to the password reset form with the following values in the url fragment: access_token, refresh_token, type, expires_in.

Note: If you are using supabase-js, the client library will parse the url fragments for you. A "SIGNED_IN" and "PASSWORD_RECOVERY" event will be emitted when a password recovery link is clicked. You can use onAuthStateChange to listen and invoke a callback on these events.
5. User enters new password on password reset form and submits it. (This should call the updateUser method and the user's password will be successfully updated.)

Other important points to note:

1. Currently, we do not support hash-based routers because supabase auth supports an implicit grant flow between the client and supabase which indicates that the access token should be returned in the URL fragment.
2. Clicking the password recovery link emits 2 events - the "SIGNED_IN" event and "PASSWORD_RECOVERY" event.
3. Currently, onAuthStateChange does not work across tabs. What this means is that the original tab which requested for the password reset link will not receive the "SIGNED_IN" and "PASSWORD_RECOVERY" event when the user clicks on the link. This is because clicking on the link would open up a new tab and onAuthStateChange is localised to that tab. We have plans in v3 to change this behaviour such that onAuthStateChange works across multiple tabs.
4. If you are using SSR or you want to handle the reset flow on the server-side first, you cannot set the options.redirectTo param in the resetPasswordForEmail to your server-side endpoint. This is because your server-side environment will not be able to parse the URL fragments since that is only present in the browser. To handle this, you can redirect to the client-side first and then call your server-side endpoint with the access / refresh tokens in a header (which is what the auth-helpers library would do for you).
5. If your redirectTo param is different from your SITE_URL. You will need to include the redirectTo url in your project's allow list which can be found in the "Authentication -> Settings" tab when you login to your Supabase account (under "Redirect URLs").
6. We have an example for React in our docs.
7. Link to docs

[tarkanlar]

I made this with react native navigation and can pull the URL to resetpasswordscreen but authstate change is not being triggered.

useEffect(() => {
Linking.addEventListener("url", (event: any) => { console.log('yey1.1', event) }) // this works
		supabase.auth.onAuthStateChange(async (event, session) => {
			console.log('yey2', event, session) // this doesn't work
		
		  if (event == "PASSWORD_RECOVERY") {
			console.log('yey3', event, session)
			const { data, error } = await supabase.auth
			  .updateUser({ password: "randomPassword123!" })
	 
			if (data) 
			toast.show({
				description: "Password updated",
				bg: "green.500",
				placement: "top"
			})
			if (error) 
			toast.show({
				description: error.error_description || error.message,
				bg: "red.500",
				placement: "top"
			})
		  } 
		  
		})
	  }, [])```

[henningko]

@kangmingtay Thank you for this. When resetting a user's password via the dashboard, no redirectTo option can be set. How should this be best handled?

[NielsVeen]

I currently have the problem that the user is not getting logged in automatically. I have the onAuthStateChanged in an auth provider, but when a user clicks the link from the email nothing happens. For some reason the useEffect never fires and it just keeps displaying a loading state. Any help would be much appreciated.

import { supabase } from "./supabaseContext";
import { Session, User } from "@supabase/supabase-js";
import { useSearchParams, useLocation } from "react-router-dom";

interface AuthContextProps {
    user: User | null | undefined;
    session: Session | null | undefined;
    signIn: (email: string, password: string) => Promise<void>;
    signUp: (email: string, password: string) => Promise<void>;
    signOut: () => Promise<void>;
    resetPassword: (email: string) => Promise<void>;
}

const AuthContext = createContext<AuthContextProps>({
    user: null,
    session: null,
    signIn: () => Promise.resolve(),
    signUp: () => Promise.resolve(),
    signOut: () => Promise.resolve(),
    resetPassword: () => Promise.resolve(),
});

interface AuthProviderProps {
    children: React.ReactNode;
}

export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
    const [user, setUser] = useState<User | null>();
    const [session, setSession] = useState<Session | null>(null);
    const [loading, setLoading] = useState(true);


    useEffect(() => {
        supabase.auth.getSession().then(({ data: { session } }) => {
            setSession(session);
            setUser(session?.user);
            setLoading(false);
        });

        const {
            data: { subscription },
        } = supabase.auth.onAuthStateChange((_event, session) => {
            setSession(session);
            setUser(session?.user);
            setLoading(false);
        });

        return () => subscription.unsubscribe();
    }, []);

    const signIn = async (email: string, password: string) => {
        const { error } = await supabase.auth.signInWithPassword({ email, password });
        if (error) {
            throw new Error(error.message);
        }
    };

    const signUp = async (email: string, password: string) => {
        const { error } = await supabase.auth.signUp({ email, password });
        if (error) {
            throw new Error(error.message);
        }
    };

    const signOut = async () => {
        const { error } = await supabase.auth.signOut();

        if (error) {
            throw new Error(error.message);
        } else {
            setUser(null);
        }
    };

    const resetPassword = async (email: string) => {
        const { data, error } = await supabase.auth.resetPasswordForEmail(email);

        if (error) {
            console.log(error);
        }

        if (data) {
            console.log(data);
        }
    };
    return <AuthContext.Provider value={{ user, session, signIn, signUp, signOut, resetPassword }}>{loading ? <>Loading</> : children}</AuthContext.Provider>;
};

export const useAuth = () => useContext(AuthContext);

[Alucard2169]

I am using NodeJS , for the password reset page I send the access_token, refresh_token and new password.

This is what my backend controller function looks like

const resetPassword = async (req:Request, res:Response) => {
  try {
    const { email, password, access_token, refresh_token } = req.body;

    // Validate email and password here if needed

    // Set the session
    const { data: userSession, error: sessionError } =
      await supabase.auth.setSession({
        access_token,
        refresh_token,
      });

    if (sessionError) {
      throw new Error(sessionError.message);
    }

    // Reset the user's password
    const { data, error } = await supabase.auth.updateUser({
      email,
      password,
    });

    if (error) {
      throw new Error(error.message);
    }

    // Respond with a success message
    res.json({ message: "Password reset successfully" });
  } catch (error) {
    console.error(error);
    // Handle errors appropriately
    res.status(500).json({ error: "An error occurred" });
  }
};

but I am still getting Auth Session Missing! error

[cormacncheese]

"PASSWORD_RECOVERY" is never omitted.

Using Auth component from @supabase/auth-ui-react and setting redirectTo to {${getURL()}/auth/callback}.

No clear way to set distinct redirectTo for PasswordReset form

[jkohlin]

@kangmingtay Thanks for the extensive walk through. I have one question though, the React example indicates that I need supabase in the browser. Isn't that a no no? That means I have to store the anonkey and the supabaseurl in the browser? doesn't seem safe?..

[tvogel]

The anonkey is exactly meant for being used in the browser. And yes, users can grab it from your JS files and access supabase, therefore: Your data should be protected by useful RLS policies! Relying on anonkey being safe is not what the supabase design has in mind.

[zupz5]

I have a problem with supabase resetemail
for password it says resetEmailForPassword is undefined
` const { data, error } = await supabase.auth.api.resetPasswordForEmail(email)

if (data) {
  console.log(data)
}
if (error) {
  console.log(error)
}

}`

[kangmingtay]

can you please check which supabase-js version you're on? if you're on v2, it should be supabase.auth.resetPasswordForEmail(email)

[jopfre]

Following the react example I don't get a "password recovery" event, only the "signed in" event. I can see the that url has type="recovery" in it though. Anyone else getting the same?

[Stan-l-e-y]

@mryechkin Thanks for the greatly detailed blog post and repo! Unfortunately, I'm still having the password recovery event issue in my Nextjs 13 app (without the new app dir, however). Seems like the browser supabase client watches for the URL fragment, extracts it, populates the session cookie, and then does a page reload to remove the URL fragment (probably for safety reasons since the access and refresh tokens are in the URL). Its annoying because this page reload means I cant persist any state at the PASSWORD_RECOVERY event check so that my app can display an update password form. I notice in your repo you have a switch case that checks for the pw_recovery event, my check is similar and the info also gets persisted into a context value, however, this page reload from the supabase client kills all of my applications logical flow:/

[mryechkin]

@Stan-l-e-y have you considered putting your password reset form at a different route, something like /update-password let's say?

Would need to set that URL as redirectTo in the original password request (ie. when calling supabase.auth.resetPasswordForEmail()) and add it to the list of allowed redirect URL's in Supabase settings, but at least that way your app would stay on the same page after Supabase client parses the token from the URL (in theory).

I'm not sure what else to suggest, as it sounds like you have a pretty similar setup to mine.

[Stan-l-e-y]

@mryechkin yep, my form is on a new route and ive done all the configuration. All good tho I'll figure out another way to make it work, thanks again for the help and the codebase you provided!

[kangmingtay]

Hey everyone, we've looked into a possible medium-term fix for this and also highlighted the case where it would fail in this PR.

[JanRuettinger]

@Stan-l-e-y have you found a workaround for the issue with the missing PASSWORD_RECOVERY event?

[ihadabs]

Is there a way to send users an OTP they then could use in the app to reset their password?

Docs suggest we set redirectTo: 'io.supabase.flutter://reset-callback/' but what about if the user opens the link from the Desktop?

OTP could be anything that is short an easy to copy from email to app.
E.g. Notion uses some-random-words or it could 4-6 numbers as usual.

[ihadabs]

hey @ihadabs, we have that already, you can check out the email template section on the dashboard to see the available template arguments you can pass into your email template.

{{ .ConfirmationURL }} : URL to confirm the password reset
{{ .Token }} : The 6-digit numeric email OTP
{{ .TokenHash }} : The hashed token used in the URL

here are the options... not sure which you mean?

[kangmingtay]

{{ .Token }} : The 6-digit numeric email OTP

This is the one you should be using.

[ihadabs]

{{ .Token }} : The 6-digit numeric email OTP

This is the one you should be using.

How would I then update the password with this token?

supabase.auth.updateUser(...new pass); where should the token go

[kangmingtay]

@ihadabs the password reset flow is a 2-step process (refer to the earlier message) so you would have to do the following:

1. Call verifyOtp first with the email OTP to log the user in
2. Call updateUser to update the user's password.

After verifyOtp is successful, you can choose to redirect the user to the page to update their password.

[mbkaj]

sep 21, 2024 and we still have this issue. this company should not be allowed to provide auth services. this a total car crash

[jrfii-animation]

Any idea why my reset password email link is properly directing to a url that looks like the one below:

https://www.website.com/reset-password#access_token=eyJhbGci...kzgw51o9G4&expires_in=7200&refresh_token=hdmtjgsmH3xCnQ&token_type=bearer&type=recovery

...but then immediately redirecting to:

https://www.website.com/reset-password#

FWIW, I'm using SvelteKit v1.0.1 and supabase-js v2.2.2. The redirect occurs so quickly that my onMount function doesn't even have time to capture the original url.

I had this functionality working properly with Supabase v1, but am struggling to get it working in Supabase v2--an updated SvelteKit example would be oh so greatly appreciated! :)

[kangmingtay]

Have you read this comment? (#3360 (comment)) In particular,

Note: If you are using supabase-js, the client library will parse the url fragments for you. A "SIGNED_IN" and "PASSWORD_RECOVERY" event will be emitted when a password recovery link is clicked. You can use onAuthStateChange to listen and invoke a callback on these events.

[jrfii-animation]

Thank you for your response, @kangmingtay! Yes, I had read your previous comment multiple times--thank you, without it I wouldn't have made it this far! :) Unfortunately, I'm having trouble translating your advice into workable code.

Has anyone been able to get this working in a SvelteKit project? What was your approach? Should we put the onAuthStateChange function in a +page.ts file's on PageLoad function? If so, what would that look like?

Or should we just place it within a +page.server.ts file Action (such as the one where we are calling updateUser)? Maybe it would look something like this:

    submitResetPassword: async ({ request } : any) => {
        const submitResetPasswordFormData = await request.formData();

        let newPassword = submitResetPasswordFormData.get('new-password') as string;

        newPassword = newPassword.trim();

        supabaseClient.auth.onAuthStateChange(async (event) => {
            if (event === 'PASSWORD_RECOVERY') {

                const { error, data } = await supabaseClient.auth.updateUser({
                    password: newPassword,
                });

                if (error) {
                    console.error(error);
                    return {
                        status: 500,
                        message: error.message
                    }
                }

                if (data) {
                    throw redirect(303, '/contributor-portal/dashboard');
                }
            }
        });
	}

Any thoughts or suggestions would be greatly appreciated.

[silentworks]

Hi @jrfii-animation I've created a repo outlining how things work in an SSR environment and it's making use of SvelteKit. Listening to the events in an SSR environment doesn't make much sense since the server loads before the client and would render the onAuthStateChange listener null if its on a server protected page. I added a flow diagram to show how it should be handled in the repo too, let me know if this helps. https://github.com/silentworks/reset-flow

[jrfii-animation]

Hello, @silentworks! Thank you for your response!

I'll have to take a closer look at things later today; but, at a glance, it appears that there's enough there to allow me to get things working again. Though, I must admit, I'm still a bit perplexed by some of the minor details of implementing an SSR approach (e.g., not being able to confirm a valid token before submitting the update). I'll have to put some deeper thought into it.

It's been great seeing you on various YouTube videos lately--thanks for all of your hard work! It'd be nice to see more from the Supabase team, maybe even a video of you discussing your password reset flow in more detail? Better yet, and I hope you don't mind me being so forward, I'd love to see you, David Plugge and some other SvelteKit/Supabase hotshots discussing your workflows and best practices--even better if you mix in some Svelte superstars like Li Hau Tan! :)

[jrfii-animation]

Thank you for providing a reference, @silentworks! I was finally able to get things properly working again. Not sure that would've been possible with your and @kangmingtay's assistance--thank you both! :)

There was one additional step that I added to your reset flow: if the call to updateUser fails, I end the session.

I do have one last question: when declaring my Redirect URLs (under Authentication > URL Configuration), should I use the full redirect url that includes the secondary redirect, e.g.:

www.website.com/logging-in?redirect=/account/update-password

... or do I just need to list the initial redirect url? Or should I list both the initial and the secondary redirect urls separately?

Thanks again!

[adamzerner]

Hm, for me onAuthStateChange never gets hit. I have a Next.js app and this code in _app.tsx:

const [supabase] = useState(() => createBrowserSupabaseClient());

useEffect(() => {
  supabase.auth.onAuthStateChange(async (event) => {
    alert("onAuthStateChange");

    if (event == "PASSWORD_RECOVERY") {
      const newPassword = prompt(
        "What would you like your new password to be?"
      );
      const { data, error } = await supabase.auth.updateUser({
        password: newPassword as string,
      });

      if (data) alert("Password updated successfully!");
      if (error) alert("There was an error updating your password.");
    }
  });
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

(The supabase instance seems like it's legit because it's doing it's job for other things, so I don't think that's where the problem is.)

I also have this on my forgot password page to handle form submission:

try {
  const { error } = await supabase.auth.resetPasswordForEmail(email);

  if (error) throw error;

  toast({
    title: "Success",
    description: "An email has been sent with further instructions.",
    status: "success",
    isClosable: true,
  });
} catch (e: any) {
  toast({
    title: "Error",
    description: e.error_description || e.message,
    status: "error",
    isClosable: true,
  });
  console.log(e);
} finally {
  setIsLoading(false);
}

I successfully get sent the email contain a link like this:

https://hadtcyfslfvtkuytglxe.supabase.co/auth/v1/verify?token=b5f6de1c7d42ead46daf461e1d745d545c56dfd10dce9448bfd2fe9a&type=recovery&redirect_to=http://localhost:3000/

When I click the link it redirects to http://localhost:3000 after some other link that starts with http://localhost:3000 and has some other stuff after it but is too quick for me to see. Anyway, I never see the alert("onAuthStateChange");, which means that the onAuthStateChange never is reached. Any ideas why?

Update: I noticed that onAuthStateChange gets hit (three times) when I log in and then also subsequently when I log out (also three times).

[tvogel]

That hash blanking code still has the potential to break hash-based SPA routing, so I have to manually save/filter/restore the hash part for Vue router.

[chrisk-7777]

Ah yep, that is true - I have not tested with hash based routing at all. I was addressing more the Next query somewhere in the above thread

[adamzerner]

Updating @supabase/supabase-js from 2.4.0 to 2.8.0 solved my problem except for the fact that the prompt shows up twice. It shows up twice regardless of how many browser tabs I have open or whether I put createBrowserSupabaseClient inside or outside of the useEffect.

[chrisk-7777]

@adamzerner Are you running this locally / in development?

React fires useEffect twice while in development mode.

Also, in your example, you're not unsubscribing in your useEffect. I made a note about that here: supabase-community/auth-ui#77 (comment) (see "bonus" section of the comment).

I'm reasonably sure the supabase docs should show an example of unsubscribing within the useEffect.

[adamzerner]

@chrisk-7777 Sorry for the late reply here. I have moved on from the project.

[rmolines]

I've also been struggling with the password reset flow with NextJS. At first I wasn't receiving the neither the SIGN_IN nor the PASSWORD_RECOVERY events on the onAuthStateChange callback. After disabling React strict mode and adding the supabase client as a dependency on the useEffect that created the callback, I began to receive the SIGN_IN event, but not the PASSWORD_RECOVERY.

[tvogel]

As far as I understand, the idea of the PASSWORD_RECOVERY event is that you don't need to use a recovery specific location redirect and will still be informed about it.

[silentworks]

Are you trying to use this in a server-side rendering (SSR) mode or is this in single page application (SPA) mode?

[Ashxvi]

For me It's in a SSR mode using Remix.

[rmolines]

For me it's in an SPA using NextJS. I tried creating a listener both on the _app.tsx and the route that the password recovery email redirects to. Both present the same behavior where I only receive a SIGN_IN event.

[LeviOP]

I'm having a very similar issue using sveltekit. After clicking on the password recovery link in my email, the page never sends PASSWORD_RECOVERY. Interestingly other tabs with the site already open receive the event, but the page that loads after clicking the link doesn't receive anything.

[enricdema]

Hi everyone I'm gonna put here the code that I used to recover the password in my app when the user forgot the password before log in.
This is the logic that your app should follow :

export class AppComponent implements OnInit {
supabase: any;
showLogOut = false;
working = false;
emailSend = false;
otpOk = false;
passChanged = false;

//button to send the confirmation code
async sendResetEmail(email: string) {
this.working = true;
const { data, error } = await this.supabase.auth.resetPasswordForEmail(
email
);
if (data) {
console.log(data);
this.emailSend = true;
this.working = false;
}
}
//check that the code is correct
async checkAndSessionStart(email, token) {
if (!email || !token) return console.log('Email y token requerido');
this.working = true;
// Cuando la funcion valida el token OTP, devuelve una respuesta
// que indica que el usuario esta autenticado.
const type = 'recovery';
const { data, error } = await this.supabase.auth.verifyOtp({
email,
token,
type,
});
if (data) {
console.log(data); // <--- Contiene propiedades de un objeto de inicio de session.
this.otpOk = true; // <--- Check de OTP realizado, se muestra el input del password.
this.isLoggedIn(); // <--- Check de usuario logeado, en este punto deberia estarlo.
this.working = false;
}
}
//update a new password
async newPassword(pass: string) {
if (pass.length < 6)
return console.log('Supabase pide un pass >= a 6 digitos');

this.working = true;
const { data, error } = await this.supabase.auth.updateUser({
  password: pass,
});
if (data) {
  console.log(data);
  console.log('Password actualizado a: ', pass);
  this.passChanged = true;
  this.working = false;
}

}

async isLoggedIn() {
const { data, error } = await this.supabase.auth.getSession();
if (data && data?.session?.access_token) {
console.log(data);
this.showLogOut = true;
}
}

async logOut() {
const { error } = await this.supabase.auth.signOut();
this.showLogOut = false;
this.isLoggedIn();
}

ngOnInit() {
this.isLoggedIn();
}

constructor() {
this.supabase = createClient(SUPABASE.projectUrl, SUPABASE.anonKey);
}
}

[DinAnsh]

Hi, would you please tell us which token should we use in the checkAndSessionStart function?

[webmonch]

Looks like PASSWORD_RECOVERY event is never sent.
A simple workaround is to modify Reset password email template in Supabase dashboard and to add parameter to recovery url
e.g.

<a href="{{ .ConfirmationURL }}app?action=pass-reset">Reset Password</a>

And in your app start reset password flow when you detect this parameter.

[ethanfox]

This is the move 👍

[travistylervii]

👍 Use the Supabase Auth UI! It will be easy they said... unfortunately I spend way more time figuring this out then I would have just coding everything from scratch.

This is the easiest solution, thank you.

For people who need more of a detailed explanation:
Im using NextJS:

1. Add "?action=pass-reset" in the password email template in supabase dashboard.

2. Then in your login component if your <Auth tag redirects to your callback:

<Auth
        supabaseClient={supabase}
        //view="magic_link"
        appearance={{ theme: ThemeSupa }}
        //theme="dark"
        showLinks={true}
        providers={['google']}
        redirectTo="http://localhost:3000/auth/callback"
      />

3. in your callback route file add a conditional to redirect to the page you want.

export async function GET(req: Request) {
    const reqURL = new URL(req.url)
    const {searchParams} = reqURL
    const action = searchParams.get('action')

if(action === 'pass-reset'){
            return NextResponse.redirect(`${reqURL.origin}/account/reset-password`)
        }

Hope this helps!

[LeakedDave]

This is silly but it's pretty much similar to what I did.

My redirectUrl is set to just be "https://domain.com/" the base path. So in the auth email I just did:

<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p><a href="{{ .ConfirmationURL }}reset-password">Reset Password</a></p>

and this takes you to /reset-password page LOL

[kei-kusanagi]

I finally combined several answers given here and this worked quite well for me, only to return true or false if the current password matches and a couple of error handling (It is worth mentioning that I use supabase locally with its Docker).

CREATE OR REPLACE FUNCTION new_verify_user_password(password text)
RETURNS BOOLEAN SECURITY DEFINER AS
$$
DECLARE
  user_id uuid;
BEGIN
  IF (password = '') IS NOT FALSE THEN
    RAISE EXCEPTION 'La contraseña actual esta vacia';
  END IF;
  user_id := auth.uid();

  IF NOT EXISTS (
    SELECT id
    FROM auth.users
    WHERE id = user_id
    AND encrypted_password = crypt(password::text, auth.users.encrypted_password)
  ) THEN
    RAISE EXCEPTION 'Contraseña incorrecta, vuelva a intentarlo';
  END IF;

  RETURN true;
END;

sorry for my bad English 😅

[edwinmoss]

Using Flutter with AutoRoute. Struggled to get the supabase path to recognize properly. Tried changing template and URLs per comments. This was the solution :

--- SupaBase ---

In SupaBase Authentication - URL Configuration:
Site URL: http://localhost:1234
Redirect URLs
http://localhost:1234/**

In SupaBase Authentication - Email Templates:
Reset Password:
...

Reset Password

...

----Flutter code----

Added this to the router configuration:

...
        MaterialApp.router(
          routerConfig: _appRouter.config(deepLinkBuilder: (deepLink) {
            mainState.errorMessage = '';
            if (deepLink.path.contains('error=unauthorized_client')) {
              // Goto login-page and display error message (optional)
              var elements = deepLink.path.split('error_description=');
              mainState.errorMessage = elements[1].replaceAll('+', ' ');
              String path = '/login';
              return DeepLink.path(path);
            } else if (deepLink.path.contains('type=recovery')) {
              // Goto login-page
              String path = '/login?${deepLink.path}';
              return DeepLink.path(path);
            }
            return deepLink;
          }),
...

Supabase API Calls

Future<String> resetPassword(String email) async {
  String result = 'If user for email address exists. An email sent to you from supabase to reset your password.';
  try {
    await supabaseClient.auth.resetPasswordForEmail(email);
  } catch (e) {
    result = 'resetPassword error: $e';
  }
  return result;
}

Future<String> updatePassword(String password) async {
  String result = '';
  try {
    await supabaseClient.auth.updateUser(UserAttributes(password: password));
  } catch (e) {
    result = 'updatePassword error: $e';
  }
  return result;
}

Widget integration - path of Login Page is at /#/login) :

class AuthLoginPage extends StatefulWidget {
...
  @override
  void initState() {
    super.initState();
    supabaseClient.auth.onAuthStateChange.listen((data) {
      final sup_auth.AuthChangeEvent event = data.event;
      // final Session? session = data.session;
      if (event == sup_auth.AuthChangeEvent.passwordRecovery) {
        print('test');
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => AuthPasswordResetPage()),
        );
      }
    });
  }
...

class AuthPasswordResetPage extends StatefulWidget {
...
Future<String> doUpdate(context, String password) async {
    String result = await updatePassword(password);
    return result;
  }

class AuthPasswordResetRequestPage extends StatefulWidget {
...
doReset(context, String email) async {
    String message = await resetPassword(email);
    ...
  }
...

I hope that helps.