How do I configure redirection for a password reset page

I have a web app using Vue 3 with custom account management pages: email verification page and password reset page. The problem is this:

1) User creates account / requests password reset email
2) User clicks email link to go to custom account management page
3) User is redirected to account management page for a split second
4) User is authenticated immediately thereafter and therefore redirected to a page requiring authentication

With this setup, the user is unable to reset their password, and I'm unable to use the custom pages.

Important notes:

I'm using redirectTo inside the "resetPasswordForEmail" method, and I'm using it correctly.
I have the proper localhost URL inside the Supabase auth dashboard
I'm using Vue router and doing all routing inside App.vue

Please help me resolve this

lil nuggetOP•10/11/22, 5:48 PM

@844001800214020128

lil nuggetOP•10/11/22, 5:48 PM

I believe there are bugs in the way Supabase handles authentication. The redirection URL works, but I'm redirected to the base URL after the sign in event takes place- it always does when using the email link

silentworks•10/11/22, 6:43 PM

Please don't tag the team in messages as this is a community run platform, open a GitHub issue if you think this is a bug with a reproducible example and someone will look into it.

Llil nugget I believe there are bugs in the way Supabase handles authentication. The redirec...

Mark Burggraf•10/11/22, 8:55 PM

Try using the

redirectTo

redirectTo

parameter: https://supabase.com/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect

signInWithOAuth() | Supabase

lil nuggetOP•10/12/22, 1:57 AM

I am using redirectTo

lil nuggetOP•10/12/22, 1:58 AM

I'm only redirected to the proper page for a split second before Supabase logs in and sends me elsewhere

garyaustin•10/12/22, 2:27 AM

Without demonstrating some code here, or as Silentworks suggests on github if you think it is a bug, not sure you are going to get more traction. Many users are using redirectTo in many platforms and environments and there is not a show stopper. So either you have a specific case with a bug, or there is a way to make it work.

lil nuggetOP•10/12/22, 11:27 AM

I'll demonstrate code later today

lil nuggetOP•10/12/22, 12:09 PM

This code sends the user the password reset email:

    async function resetPassword() {
      try {
        const { data, error } = await supabase.auth.api.resetPasswordForEmail(
          emailInput.value,
          { redirectTo: `${import.meta.env.VITE_NETLIFY_URL}/resetPassword/` }
        );
        if (error) throw error;
        setTimeout((_) => {
          router.push("/auth");
        }, 1000);
        showSuccessMessage(
          "Please check your email to reset your password",
          $q
        );
      } catch (error) {
        showErrorMessage(error.message, $q);
      } finally {
        isLoading.value = false;
      }
    }

    async function resetPassword() {
      try {
        const { data, error } = await supabase.auth.api.resetPasswordForEmail(
          emailInput.value,
          { redirectTo: `${import.meta.env.VITE_NETLIFY_URL}/resetPassword/` }
        );
        if (error) throw error;
        setTimeout((_) => {
          router.push("/auth");
        }, 1000);
        showSuccessMessage(
          "Please check your email to reset your password",
          $q
        );
      } catch (error) {
        showErrorMessage(error.message, $q);
      } finally {
        isLoading.value = false;
      }
    }

The email link sent by Supabase is: https://asxmwsvxfpgcpoopqqgj.supabase.co/auth/v1/verify?token=[REDACTED]&type=recovery&redirect_to=https://main--graceful-stardust-a71784.netlify.app/#/resetPassword/

I'm redirected to something like: https://main--graceful-stardust-a71784.netlify.app/#/access_token=[REDACTED]&expires_in=3600&refresh_token=[REDACTED]&token_type=bearer&type=recovery. This shows up as an error not found page, but a split second later it redirects to the homepage, https://main--graceful-stardust-a71784.netlify.app/#/, as an authenticated user.

Please note that I've disabled all my routing code, i.e., non-authenticated users can access pages; however, the problem still exists. I've also tried programatically modifying the URL such that the access_token, expires_in, etc., parameters are query parameters to the resetPassword page. Even with this, I'm still redirected to the base URL. The last thing I tried was setting the base URL in the Supabase authentication settings to the resetPassword page, but this did not change the behavior.

I've also tried the onAuthStateChange event listener, but in console logging the received event, I see no RESET_PASSWORD, only SIGNED_IN and SIGNED_OUT.

lil nuggetOP•10/12/22, 12:23 PM

lil nuggetOP•10/12/22, 12:23 PM

Is this a Supabase bug or a misconfiguration on my part?

silentworks•10/12/22, 12:36 PM

You cannot use ## (fragment) in your redirect code, use the history router. We had a PR to fix the use of hash router issue but not sure if it got merged in as yet.

lil nuggetOP•10/12/22, 12:37 PM

Well that explains a lot

lil nuggetOP•10/12/22, 3:57 PM

I switched to using the history router, but there's still an issue. It routes to the correct page, but the fragment parameters disappear

lil nuggetOP•10/12/22, 3:57 PM

Why don't they stay there?

silentworks•10/12/22, 5:32 PM

My message above said you can't use fragments in your url, the history router doesn't use fragments so not sure what the issus is here.

Dio•10/15/22, 10:52 AM

Same problem here, I've been trying to solve this problem for 3 days now, but it doesn't work. Here is my code (I use Nextjs too) :

    const resetPasswordHandler = async () => {
        const redirectUrl = `${window.location.origin}/Auth/SetNewPassword`;
        console.log(redirectUrl)
        const { data, error } = await supabase.auth.api.resetPasswordForEmail(
            emailToReset, {
            redirectTo: redirectUrl
        });
        if (data) {
            console.log(data)
            triggerInfoNotification("Un email vous a été envoyé pour réinitialiser votre mot de passe.")
        } else {
            triggerErrorNotification(error.message)
        }
    }

    const resetPasswordHandler = async () => {
        const redirectUrl = `${window.location.origin}/Auth/SetNewPassword`;
        console.log(redirectUrl)
        const { data, error } = await supabase.auth.api.resetPasswordForEmail(
            emailToReset, {
            redirectTo: redirectUrl
        });
        if (data) {
            console.log(data)
            triggerInfoNotification("Un email vous a été envoyé pour réinitialiser votre mot de passe.")
        } else {
            triggerErrorNotification(error.message)
        }
    }

Dio•10/15/22, 10:52 AM

Is it me doing something wrong, or is it coming from Supabase?

lil nuggetOP•10/15/22, 11:34 PM

I was able to resolve this. Went through some trouble with the Vue router

lil nuggetOP•10/15/22, 11:34 PM

Make sure the Supabase configuration has the base URL set properly and all redirect links added

lil nuggetOP•10/15/22, 11:34 PM

And test on prod server as well as localhost

DevThoughts•2/23/23, 3:01 PM

Why i dont see the url configration site URL under the user sessions?

DDevThoughts Why i dont see the url configration site URL under the user sessions?

garyaustin•2/23/23, 3:13 PM

It is here:

async function resetPassword() { try { const { data, error } = await supabase.auth.api.resetPasswordForEmail( emailInput.value, { redirectTo: `${import.meta.env.VITE_NETLIFY_URL}/resetPassword/` } ); if (error) throw error; setTimeout((_) => { router.push("/auth"); }, 1000); showSuccessMessage( "Please check your email to reset your password", $q ); } catch (error) { showErrorMessage(error.message, $q); } finally { isLoading.value = false; } }

const resetPasswordHandler = async () => { const redirectUrl = `${window.location.origin}/Auth/SetNewPassword`; console.log(redirectUrl) const { data, error } = await supabase.auth.api.resetPasswordForEmail( emailToReset, { redirectTo: redirectUrl }); if (data) { console.log(data) triggerInfoNotification("Un email vous a été envoyé pour réinitialiser votre mot de passe.") } else { triggerErrorNotification(error.message) } }

How do I configure redirection for a password reset page

Similar Threads

Similar Threads

Similar Threads