google oAuth issue with NextJS

// src/app/(public)/sign-in/page.tsx
'use client';
import { Container, Spinner, Stack } from '@chakra-ui/react';
import { useState } from 'react';
import { FaGoogle } from 'react-icons/fa';

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { toaster } from '@/components/ui/toaster';
import { createClient } from '@/utils/supabase/client';

export default function SignInPage() {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const supabase = createClient();

  async function signInWithGoogle() {
    setIsLoading(true);
    try {
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: `${window.location.origin}/`,
        },
      });
      if (error) {
        throw error;
      }
    } catch (error) {
      console.error(error);
      toaster.create({
        title: 'Please try again.',
        description: 'There was an error logging in with Google.',
        type: 'error',
      });
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <Container>
      <Stack alignItems={'center'}>
        <Card
          description="Already have a mobile app subscription? Please use the same sign-in method to sync your account."
          title="Login and Start Exploring"
        >
          <Button onClick={signInWithGoogle} variant={'outline'}>
            {isLoading ? <Spinner size="sm" /> : <FaGoogle />} Continue with
            Google
          </Button>
        </Card>
      </Stack>
    </Container>
  );
}

// src/app/(public)/sign-in/page.tsx
'use client';
import { Container, Spinner, Stack } from '@chakra-ui/react';
import { useState } from 'react';
import { FaGoogle } from 'react-icons/fa';

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { toaster } from '@/components/ui/toaster';
import { createClient } from '@/utils/supabase/client';

export default function SignInPage() {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const supabase = createClient();

  async function signInWithGoogle() {
    setIsLoading(true);
    try {
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: `${window.location.origin}/`,
        },
      });
      if (error) {
        throw error;
      }
    } catch (error) {
      console.error(error);
      toaster.create({
        title: 'Please try again.',
        description: 'There was an error logging in with Google.',
        type: 'error',
      });
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <Container>
      <Stack alignItems={'center'}>
        <Card
          description="Already have a mobile app subscription? Please use the same sign-in method to sync your account."
          title="Login and Start Exploring"
        >
          <Button onClick={signInWithGoogle} variant={'outline'}>
            {isLoading ? <Spinner size="sm" /> : <FaGoogle />} Continue with
            Google
          </Button>
        </Card>
      </Stack>
    </Container>
  );
}