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.