Supabase•7mo ago•

4 replies

Magic Link Redirects, Local Development, and Docker

I know there have been other post on this topic but I am still having some issues getting magic link auth redirects to work in my local docker development instance.

Problem: Magic Link redirects and auth flow is broken in my docker development. Links are sent, and appear in InBucket, but upon clicking the link, the user is redirected to the url

http://127.0.0.1:54321/auth/v1/verify?token=pkce_....&type=magiclink&redirect_to=http://127.0.0.1:3000/auth/confirm

http://127.0.0.1:54321/auth/v1/verify?token=pkce_....&type=magiclink&redirect_to=http://127.0.0.1:3000/auth/confirm

, and upon landing on the page, the user is not authed. I do see the authenticated user in supabase's

auth

auth

and my custom

profiles

profiles

(setup via a function and trigger), but the user session is

null

null

. In addition to this, the Supbase UI via docker does not have the options to easily edit Redirect URLs, email templates, etc.

My Email Template (prod):

<h2>You have requested to login to your account.</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>

<h2>You have requested to login to your account.</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>

SignIn function:

export async function signInWithEmail(email: string) {
    const supabase = await createClient()

    const { data, error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        // set this to false if you do not want the user to be automatically signed up
        // shouldCreateUser: false,
        // I set this to this URL for development only
        // Previously set to localhost:3000 w/ no docker and it   worked
        emailRedirectTo: 'http://127.0.0.1:3000/auth/confirm',
      },
    })

    console.log("sign in started", data)
  }

export async function signInWithEmail(email: string) {
    const supabase = await createClient()

    const { data, error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        // set this to false if you do not want the user to be automatically signed up
        // shouldCreateUser: false,
        // I set this to this URL for development only
        // Previously set to localhost:3000 w/ no docker and it   worked
        emailRedirectTo: 'http://127.0.0.1:3000/auth/confirm',
      },
    })

    console.log("sign in started", data)
  }

I also saw a post that mentioned being able to set the site URL in the

supbase/config.toml

supbase/config.toml

could help

site_url = "http://localhost:3000"

site_url = "http://localhost:3000"

And for additional context, here is my

app/api/auth/confirm/route.ts

app/api/auth/confirm/route.ts

Conclusion: I am still unsure how to approach using magic link logins in docker vs just localhost:3000. Any help or feedback would be appreciated.

Magic Link Redirects, Local Development, and Docker

http://127.0.0.1:54321/auth/v1/verify?token=pkce_....&type=magiclink&redirect_to=http://127.0.0.1:3000/auth/confirm

http://127.0.0.1:54321/auth/v1/verify?token=pkce_....&type=magiclink&redirect_to=http://127.0.0.1:3000/auth/confirm

, and upon landing on the page, the user is not authed. I do see the authenticated user in supabase's

auth

auth

and my custom

profiles

profiles

(setup via a function and trigger), but the user session is

null

null

. In addition to this, the Supbase UI via docker does not have the options to easily edit Redirect URLs, email templates, etc.

My Email Template (prod):

<h2>You have requested to login to your account.</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>

<h2>You have requested to login to your account.</h2>

<p>Follow this link to login:</p>
<p><a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Log In</a></p>

SignIn function:

export async function signInWithEmail(email: string) {
    const supabase = await createClient()

    const { data, error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        // set this to false if you do not want the user to be automatically signed up
        // shouldCreateUser: false,
        // I set this to this URL for development only
        // Previously set to localhost:3000 w/ no docker and it   worked
        emailRedirectTo: 'http://127.0.0.1:3000/auth/confirm',
      },
    })

    console.log("sign in started", data)
  }

export async function signInWithEmail(email: string) {
    const supabase = await createClient()

    const { data, error } = await supabase.auth.signInWithOtp({
      email: email,
      options: {
        // set this to false if you do not want the user to be automatically signed up
        // shouldCreateUser: false,
        // I set this to this URL for development only
        // Previously set to localhost:3000 w/ no docker and it   worked
        emailRedirectTo: 'http://127.0.0.1:3000/auth/confirm',
      },
    })

    console.log("sign in started", data)
  }

I also saw a post that mentioned being able to set the site URL in the

supbase/config.toml

supbase/config.toml

could help

site_url = "http://localhost:3000"

site_url = "http://localhost:3000"

And for additional context, here is my

app/api/auth/confirm/route.ts

app/api/auth/confirm/route.ts

Conclusion: I am still unsure how to approach using magic link logins in docker vs just localhost:3000. Any help or feedback would be appreciated.

Magic Link Redirects, Local Development, and Docker

Magic Link Redirects, Local Development, and Docker

Similar Threads

Similar Threads

Similar Threads