Supabase auth.update() email_refresh_token workflow

Question

When I want to let an authenticated user change their email address I use auth.update(), found here https://supabase.com/docs/reference/javascript/auth-update

I'm using just a magic link auth, btw.

Right now my project is set up for only one email confirmation.

Im using vue 3 with vu-router v4

When I run this function

 async handleUpdateUser(newEmail: string) {
      try {
        const { user, error } = await supabase.auth.update({
          email: newEmail,
        });

        if (error) throw error;
      } catch (error) {
        console.log(error);
      }
    },

The onAuthStateChange that I log shows as USER_UPDATED, the users.auth table on the server shows the new stuff, and a new_email prop is seen on the user object in the console

My question is how do I make the new_emial into just email.

the link that is sent to the new email is as so

https://correct_info_is_here.supabase.co/auth/v1/verify?token=there_is_a_token_here&type=email_change&redirect_to=http://localhost:3000/

When I click the link, it redirects to a new window just like it does when an initial sign up happens, but other than that nothing changes.

I found this answer, https://github.com/supabase/supabase/discussions/1763

but I have no idea how to implement that procedure. The only way figured out how to get that token is by an rpc function on the client , but I don't know what to do with that token after I receive it.

Also I might add when I use vue-router, I log the to and from properties of the beforeEach like so

router.beforeEach(async (to, from) => {
  console.log("to", to);
  console.log("from", from);...

When I load the confirmation link, it doesn't show anything useful like it does when its redirected form the original sign up link.

Any help would greatly be appreciated.

user_560642 · Answer

I ran into a similar issue, and in my case, it came down to the "Double confirm email changes" setting in Supabase Studio.

From the Supabase docs for supabase.auth.update:

Email updates will send an email to both the user's current and new email with a confirmation link by default. To toggle this behavior off and only send a single confirmation link to the new email, toggle "Double confirm email changes" under "Authentication" -> "Settings" off.

So what may be happening is that when you request the email change, the user receives two emails: one at the old email address, and one at the new email address. The user must click both links in order for that user's email column to actually be updated.

At least, this was the issue in my case — I hope it helps!

Supabase auth.update() email_refresh_token workflow

1 Answers