https://supabase.com/ logo
Join Discord
Powered by
How can I redirect users after they have used magi...
# javascript
c
How can I redirect users after they have used magic link For example: Login page is at www.xyz.com And when they click the magic link, they should be redirected to www.xyz.com/dashboard Are there any parameter I have to add?
g
EDIT: This is likely wrong: I don't use it but you should just be able to edit the email template:
c
you think if I add the path to the end of the {confirmationURL} it would take the person there?
g
You can't use redirectTo which is only used by 3rd party signin to send to a different page.
I may be wrong on the ability to add there... The url may have session info attached already.
If so when signin event occurs in onAuthStateChange handler you could redirect...
c
Thank you so much. please can you break your explanation down.
g
This video shows an example: teed up with the onAuthStateChange.

https://youtu.be/oXWImFqsQF4?t=1301▾

When the user clicks on the link the supabase client code sees session info in the URL and signs in the user behind the scenes. The onAuthStateChange handler then triggers a SIGNIN event. In his code you can see he uses his frame works router command to redirect the page... you can also do the directly in javascript without a framework.
c
yes
I did that but what happend was, it went to www.xyz.com then waited for a second before redirecting to www.xyz.com/welcome
g
Any time you come back from magiclink there is no user for the time it takes for the Supabase client to confirm the session data in the URL is valid at the server, then you get signin event. Even on page refresh there is a short time as it loads from local storage the session and processes it.
c
oh ok. Thank you
This was helpful
g
I also see this in the Supabase signin doc notes:
Copy code
If you provide email without a password, the user will be sent a magic link.
The magic link's destination URL is determined by the SITE_URL config variable. To change this, you can go to Authentication -> Settings on app.supabase.io
Seems a bit odd as on the server that is called: SiteURL -- The base URL of your website But you can also try it, especially if you are only do magic link, to force it to dashboard page, but you would still have no user for a brief time so can't start database calls immediately...
c
This is very true. I will watch the video you sent and I will also look for ways to manage it. I think if an additional parameter is added to the magic link signin function, it would help redirect users (although this would open web apps to a lot of security issues) Thank you Gary, I am grateful
m
is it not done here in auth settings?
g
@mrboutte How would that set an alternate path for magiclink? I think that is a list to validate various redirect links so they can't be "faked" and is mainly used for 3rd party auth providers as mentioned under the field. Email/Password and magiclink (email only) don't use the redirectTo link in SignIn call. I could be wrong though as I don't use magiclink.
m
ok I'm remembering how I did it
I used the following template
Copy code
<h2>Account Recovery</h2>

<p>The link below will automatically log you back into my Awesome app:</p>
<p>
  <a
    clicktracking="off"
    href="{{ .SiteURL }}/member/sign-in/#recovery_token={{ .Token }}"
    >click here to recover your account</a
  >
</p>
the important parts here or 
{{ .SiteURL }}
and 
#recovery_token={{ .Token }}
and yeah, in here
that 
{{ .SiteURL }}
comes from this settings page
i
I think this is wrong, you can use redirectTo with magic link.
Copy code
if (env === "prod") {
    const { data, error } = await supabase.auth.signIn({
email });
  } else {
    const { data, error } = await supabase.auth.signIn(
      { email },
      { redirectTo: "http://localhost:3000" }
    );
  }
I use something like this to send my magic links to localhost for development
s
redirectTo
on the signIn is the way to go.
g
May need another doc update... Sign in with redirect.# Note that the redirectTo param is only relevant for OAuth logins, where the login flow is managed by the Auth server. If you are using email/phone logins you should set up your own redirects (within the email/sms template).
@silentworks
s
Oh wow, I'm almost certain I've used it in the past with magic link. But Kang Ming would know best as thats his domain.
Thanks for that @garyaustin
g
@chizom We have confirmation the documentation is not accurate and redirectTo does work for password less email magiclink. https://github.com/supabase/supabase/issues/6534 If you go back to retry and have issues again please bring it up.
PreviousNext
Powered by