Too many redirects

auth.tsx

import {NextPage} from 'next';
import {supabaseClient} from '@supabase/auth-helpers-nextjs';
import {useUser} from '@supabase/auth-helpers-react';
import {useEffect, useState} from 'react';
import {Auth} from '@supabase/ui';
import styles from '../styles/Home.module.css';
import Meta from '../components/Meta';
import Header from '../components/Header';
import Footer from '../components/Footer';
import {useRouter} from 'next/router';

const AuthPage: NextPage = () => {
  const router = useRouter();
  const {user, error} = useUser();
  const [data, setData] = useState();

  useEffect(() => {
    if (user) router.push('/projects').then(() => console.log('Redirecting...'));
  }, [user]);

  if (!user)
    return (
      <>
        <div className={styles.container}>
          <Meta titlePrefix={`Login`} description={'todo'}></Meta>
          <Header />
          <main className={styles.main}>
            <div className={styles.formFieldWide}>
              {error && <p className={styles.errorText}>{error.message}</p>}
              <Auth
                supabaseClient={supabaseClient}
                socialLayout='horizontal'
                socialButtonSize='xlarge'
              />
            </div>
          </main>
          <Footer />
        </div>
      </>
    );
  return (
    <>
      <div className={styles.container}>
        <Meta titlePrefix={`Login`} description={'todo'}></Meta>
        <Header />
        <main className={styles.main}>
          <p>Welcome back!</p>
        </main>
        <Footer />
      </div>
    </>
  );
};

export default AuthPage;