This is my first time here, and I have an issue with my next app. This is my first next project with supabase. Upon user registration, a verification link is sent, which functions correctly. The account is successfully authorized, but it redirects to localhost:300. This is quite strange because most of this code is copied from supabase documentation.
SignUp function from my client component:
const onSubmit = async (data: TSignUpSchema) => {
const supabase = createClientComponentClient<Database>();
const { error } = await supabase.auth.signUp({
email: data.user_email,
password: data.password,
options: {
emailRedirectTo: `${location.origin}/api/auth/callback`,
},
});
if (error) {
setFormError(error.message);
}
if (!error) {
const res = await fetch(`${location.origin}/api/auth/users`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data.user_email),
});
const json = await res.json();
if (json.error) {
console.log(json.error);
}
router.push('/verify');
}
};
my route in api/callback directory:
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export async function GET(request: NextRequest) {
const requestUrl = new URL(request.url);
const code = requestUrl.searchParams.get('code');
if (code) {
const cookieStore = cookies();
const supabase = createRouteHandlerClient<Database>({
cookies: () => cookieStore,
});
await supabase.auth.exchangeCodeForSession(code);
}
// URL to redirect to after sign in process completes
return NextResponse.redirect(requestUrl.origin);
}
Also I put here middleware:
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export async function middleware(req: NextRequest) {
const res = NextResponse.next();
// Create a Supabase client configured to use cookies
const supabase = createMiddlewareClient<Database>({ req, res });
// Refresh session if expired - required for Server Components
await supabase.auth.getSession();
return res;
}
// Ensure the middleware is only called for relevant paths.
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
'/((?!_next/static|_next/image|favicon.ico).*)',
],
};
I have checked the code, and I can't find any errors. I checked and I don't have "localhost" anywhere in my code anymore. I tried also changing "requestUrl.origin" to something else like "google.com" but still same problem. It worked with google when I started my local server. Anyone have any idea how can I fix it?