PricingDocsAcademy
Bluesky ...
Fri, Dec 13, 9:13 AM
Log inSign up
Log inSign up
All topics

Help with setting up magic link sign-up (Supabase)

  • Tom Ireland

    3 months ago

    Hey, toddle community. I'm currently working on setting up magic link auth via Supabase using the API but struggling to set the session cookies.

    Obviously, until you use the magic link, you're not authenticated, so I need a way of setting the session cookie before I redirect the user to the homepage. The URL contains the access token, so am I retrieving it from there?

    I have the hacky auth check in a component on the homepage to ensure that if the user is not authenticated then they're redirected to the login page but I'm not sure when (and the best way) to grab the access token. When using email and password, you're setting it as soon as you do the login API call but that's not the case for magic link.

  • Lucas G

    3 months ago

    It’s similar to setting it off of the URL when doing a password recovery.
  • You parse the URL and set it from that

  • Janis

    3 months ago

    I can send you a screenshot of my hacky method later, but basically what I’m doing is: Login page sends magic link and on the same page I’m doing a on page load action to check it an access token is present in the url. If yes, then I set the session cookies and the user is redirected to the app. Not sure if it’s best practice but it seems to work fine πŸ™‚
  • You can trace the magic link to see the structure of the access token, then build your formula around it and in the end replacing the magic link string parser with current url
  • @Lucas G
    It’s similar to setting it off of the URL when doing a password recovery.

    Tom Ireland

    3 months ago

    Ah, okay. Never done anything with password recovery. I think Erik maybe did something at some point re auth and covered recovery. How do you do get a hold of the URL in the editor though? I'm pasting my magic link in the browser.
  • @Janis
    I can send you a screenshot of my hacky method later, but basically what I’m doing is: Login page sends magic link and on the same page I’m doing a on page load action to check it an access token is present in the url. If yes, then I set the session cookies and the user is redirected to the app. Not sure if it’s best practice but it seems to work fine πŸ™‚

    Tom Ireland

    3 months ago

    That would be ace, @Janis - thanks. πŸ™‚
  • @Tom Ireland
    Ah, okay. Never done anything with password recovery. I think Erik maybe did something at some point re auth and covered recovery. How do you do get a hold of the URL in the editor though? I'm pasting my magic link in the browser.

    Lucas G

    3 months ago

    Paste that link in a string as test data for your formula
  • I’m post a screenshot later if need

  • Tom Ireland

    3 months ago

    πŸ€¦β€β™‚οΈ Oh my god, of course. Good shout. πŸ˜„
  • /attachments/1279751593973121054/1279892556523638825/image.png

    Janis

    3 months ago

    @Tom Ireland Here's my setup - most likely not the best setup, but like I said it works πŸ˜„
    image.png
    image.png
  • Hope it helps a bit πŸ™‚
  • @Janis
    @Tom Ireland Here's my setup - most likely not the best setup, but like I said it works πŸ˜„

    Tom Ireland

    3 months ago

    Thanks! I did my own version of what you and Lucas mentioned. The link in the email redirects to confirm-token in toddle and the token hash is included via query params, so easy to check that it exists and then set the session cookie with the value without too much effort. I'm doing my confirmation on a separate page (a bit like how toddle does it) to ensure that everything gets set and handle errors. Thanks, folks!
    πŸ”₯1

  • Tom Ireland

    3 months ago

    Okay, made some progress but hit a weird snag. I'm doing an auth check on my sidebar component to check if a user is logged in and redirect to the login page if not true. When checking the auth check API call, I see the following:

    {"code":"PGRST301","details":null,"hint":null,"message":"JWSError (CompactDecodeError Invalid number of parts: Expected 3 parts; got 1)"}

    I am definitely getting the token hash and setting the session cookie with that but it looks way smaller than what you'd normally get set. Any ideas or did you run into this at any point?

  • Janis

    3 months ago

    Hmm I did not encounter this error so far, however, I am doing the auth check in an auth-wrapper component that has my sidenav and main content as children. not sure if that helps though

  • Tom Ireland

    3 months ago

    I figured out the issue, @Janis . I was testing two links in my email. I need the confirmation URL to do the token verification, which returns the hash. Now just to figure out how to handle the redirect depending on the branch I'm on...
    πŸ‘1

  • Tom Ireland

    3 months ago

    Magic! I've now got this working and it works with branches as well.

  • Janis

    3 months ago

    Perfect!

  • Tod

    3 months ago

    Great energy @Janis! Your continuous contribution to the toddle Community just made you advance to Community Level 6!
Leave a comment

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!
The two toddle Co-Founders Andreas and Kasper

Chat with @team-toddle

CEO and Co-Founder of toddle Andreas MΓΈller

Video call our CEO

Hello, toddle!

Get in touch!

Product

PricingPackagesT&CsPrivacy Policy

Company

Press kitContact
Become partnerRefer and earn

Resources

DocumentationAcademyIntegrationsBlogFounder storiesHire experts

Community

DiscordLinkedInXYouTube

Β© Copyright 2024 toddle. All rights reserved.

toddle logo

Built in toddle