Hydration issue after refreshing signin page

Hi there I am getting this issue with AuthUI, need some help looking into it.

It happens when I refresh the signin page. Not when I transition from the home page (http://localhost:3000/) to signin page but after I transition and refresh I get this hydration error:

Here is the code for my AuthUI.tsx

'use client';

import { useSupabase } from '@/app/supabase-provider';
import { getURL } from '@/utils/helpers';
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';

export default function AuthUI() {
  const { supabase } = useSupabase();
  return (
    <div className="flex flex-col space-y-4">
      <Auth
        supabaseClient={supabase}
        providers={['google']}
        redirectTo={getURL()}
        magicLink={true}
        appearance={{
          theme: ThemeSupa,
          variables: {
            default: {
              colors: {
                brand: '#000000',
                brandAccent: '#000000'
              }
            }
          }
        }}
        theme="default"
      />
    </div>
  );
}

Here is my code for signin/page.tsx:

import AuthUI from './AuthUI';
import { getSession } from '@/app/supabase-server';
import Logo from '@/components/icons/Logo';
import { redirect } from 'next/navigation';

export default async function SignIn() {
  const session = await getSession();

  if (session) {
    redirect('/account');
  }

  return (
    <div className="height-screen-helper flex justify-center">
      <div className="m-auto flex w-80 max-w-lg flex-col justify-between p-3 ">
        <div className="flex justify-center pb-4 ">
          <Logo width="64px" height="64px" />
        </div>
        <AuthUI />
      </div>
    </div>
  );
}

vercel / nextjs-subscription-payments

Hydration issue after refreshing signin page #241