NextResponse.redirect(requestUrl.origin) redirect to localhost:3000

55 Views Asked by At

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?

0

There are 0 best solutions below