Always redirects to localhost despite correct redirect URLs

[fdarkaou]

Hi everyone,

I'm implementing Supabase auth in Next.js 14 following this guide.

I have the exact same setup, the same middleware, server and client components etc.

The only difference is I'm using /auth/confirm instead of /auth/callback and I'm using Magic Link and Google Auth instead of username/password.

Issue:
I keep being redirected to https://localhost:3000 despite having correctly set the production URLs in the Supabase dashboard.

• For magic link, when I hover over the link in my email, the correct production URL appears to be set in the email with the token_hash and type, but still after going to /auth/confirm I am redirected to https://localhost:3000.
• For Google auth, it redirects me to https://localhost:3000/error?code=....

Setup Details:

• Magic Link in auth/route.ts:

  const { error } = await supabase.auth.signInWithOtp({
    email,
    options: {
      emailRedirectTo: "https://*******.com/auth/confirm",
    },
  });

• Google Auth in a client component:

  import { createClient } from "@/utils/supabase/client";
  
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: "https://***.com/auth/confirm",
    },
  });

• auth/confirm/route.ts:

  import { type EmailOtpType } from "@supabase/supabase-js";
  import { type NextRequest, NextResponse } from "next/server";
  
  import { createClient } from "@/utils/supabase/server";
  
  export async function GET(request: NextRequest) {
    const { searchParams } = new URL(request.url);
    const token_hash = searchParams.get("token_hash");
    const type = searchParams.get("type") as EmailOtpType | null;
    const next = searchParams.get("next") ?? "/";
  
    const redirectTo = request.nextUrl.clone();
    redirectTo.pathname = next;
    redirectTo.searchParams.delete("token_hash");
    redirectTo.searchParams.delete("type");
  
    if (token_hash && type) {
      const supabase = createClient();
  
      const { error } = await supabase.auth.verifyOtp({
        type,
        token_hash,
      });
      if (!error) {
        redirectTo.searchParams.delete("next");
        return NextResponse.redirect(redirectTo);
      }
    }
  
    // return the user to an error page with some instructions
    redirectTo.pathname = "/error";
    return NextResponse.redirect(redirectTo);
  }

What could be the issue here? Does the /auth/confirm/route.ts route need to be handled differently for magic link and Google auth?

Any insights would be greatly appreciated. I am really stuck here and have searched through tons of posts and tried everything but could not get it to work.

Thank you!

[silentworks]

Did you set the redirect URL inside your Supabase Dashboard? You can check this here https://supabase.com/dashboard/project/_/auth/url-configuration

[SgtErnestBilko]

I am having the same problem when using inviteUserByEmail. I am running the nextjs app on a lan based development server in development mode served via NGINX proxy server

I am using the same route.ts code as fdarkaou

my page.tsx file

export default async function SendEmail() {
    const sendEmail = async (formData: FormData) => {
        'use server'
        const email = formData.get("email") as string
        const url = process.env.NEXT_PUBLIC_SUPABASE_URL!
        const publickey = process.env.NEXT_PUBLIC_SUPABASE_SERVICE_KEY!

        const supabase = createClient(url, publickey)

        const { error } = await supabase.auth.admin.inviteUserByEmail(email)

        if (error) {
            console.log('error sending email: ', error)
            return redirect("/protected?message=error sending email")
        }

        return redirect("/protected?message=email sent")
    }

In Supabase dashboard:

SiteURL is https://xxx.net/
redirect is https://xx.net/**

The invitation email Template code is
<p><a href="{{ .SiteURL }}/auth/callback?token_hash={{ .TokenHash }}&type=signup">Confirm your mail</a></p>

The email link appears appears to be correctly formatted
https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fxxxx.net%2F%2Fauth%2Fcallback%3Ftoken_hash%. ..... etc

but the url received in route.ts is
https://localhost:3000/auth/callback?token_hash=. .....etc

Like fdarkaou I have spent hours 'trawling' for a solution. I fear there is something fundamental I simply don't understand.

Thank you

[silentworks]

Looking at the invitation email template you posted you have an incorrect url, you are using /auth/callback which is what we recommend when doing OAuth due to Proof Key for Code Exchange (PKCE) but this is not the same when doing normal confirmation or invites. You should be using /auth/confirm with similar code to what the original poster posted above. You can checkout this guide in the Supabase docs about his https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app, what I mentioned above can be seen in step 7 of that guide.

[SgtErnestBilko]

Thank you. I really appreciate your quick response. I think there is something I am not understanding here.

I have set up as you suggest. I am trying to achieve this......

1. Admin send email invitation (this works)
2. User receives the email and clicks on link which verifies the user and sets up auth and profile on Supabase (this works)
3. I then want to redirect the user to a page where a password and name can be added. I could hardcode the redirect but I would have to keep swapping between development and production. 2 issues are 'in my way' a) the request.url is based on localhost and b) 'next' does not appear in request.url.

Maybe the request.url is always local host ? In which case, is getting the site address from headers a viable alternative in order to define a redirect ?

I suspect 'next' is supplied by specifying redirectTo as an option in supabase.auth.admin.inviteUserByEmail ?

const { error } = await supabase.auth.admin.inviteUserByEmail(
            email,
            {
                redirectTo: '/updatepassword'
            })

I don't get a value for 'next' in route.ts when the user clicks the link. As noted above my 'redirect urls' is https://xxxxxxxx.net/**

Thank you for you patience

Ian

[silentworks]

Then pass a redirectTo url (note this has to be a full URL and not just a path as you have in your example above) and then in the email template use the variable to pass it to next.

<p><a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup&next={{ .RedirectTo }}">Confirm your mail</a></p>

Do note you should validate the url in the next query string is what is expected inside of your auth/confirm route otherwise someone could use your auth/confirm for a phishing website and redirect users elsewhere.

[SgtErnestBilko]

That worked. Thank you for your help