Auth Callback URL not working on mobile devices.
Hey,
I have /auth/callback in my NextJS (App Router) app that gets triggered perfectly when I confirm my email on a desktop/laptop. But it doesn't seem to work when I confirm my email using a mobile phone using a mobile browser (have tried Safari, Chrome).
Why is this happening?
/auth/callback/route.js file:
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";
export async function GET(request) {
const requestUrl = new URL(request.url);
const code = requestUrl.searchParams.get("code");
if (code) {
const supabase = createRouteHandlerClient({ cookies });
await supabase.auth.exchangeCodeForSession(code);
}
// URL to redirect to after sign in process completes
return NextResponse.redirect(
}
Sign Up Component:
const { user, session, error } = await supabase.auth.signUp({
email,
password,
options: {
emailRedirectTo:
data: {
name: name,
qrUID: qrUID,
},
},
});
Can someone please help me out?
I have /auth/callback in my NextJS (App Router) app that gets triggered perfectly when I confirm my email on a desktop/laptop. But it doesn't seem to work when I confirm my email using a mobile phone using a mobile browser (have tried Safari, Chrome).
Why is this happening?
/auth/callback/route.js file:
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";
export async function GET(request) {
const requestUrl = new URL(request.url);
const code = requestUrl.searchParams.get("code");
if (code) {
const supabase = createRouteHandlerClient({ cookies });
await supabase.auth.exchangeCodeForSession(code);
}
// URL to redirect to after sign in process completes
return NextResponse.redirect(
${requestUrl.origin}/profile/qr-setup);}
Sign Up Component:
const { user, session, error } = await supabase.auth.signUp({
email,
password,
options: {
emailRedirectTo:
${location.origin}/auth/callback,data: {
name: name,
qrUID: qrUID,
},
},
});
Can someone please help me out?
