TypeError: Cannot read properties of null (reading 'useState') with @supabase/auth-ui-react

[Stacy-Oz]

Bug Report: TypeError: Cannot read properties of null (reading 'useState') with @supabase/auth-ui-react

Describe the bug:

When using the @supabase/auth-ui-react library in a Next.js 15.2.3 application, I encounter a TypeError: Cannot read properties of null (reading 'useState') error on the client-side when rendering the AuthComponent. This error prevents the authentication UI from displaying correctly.

To Reproduce:

1. Create a new Next.js 15.2.3 project.

2. Install the following dependencies:

   npm install @supabase/auth-ui-react @supabase/auth-ui-shared @supabase/supabase-js react react-dom next

3. Create a basic Supabase client setup.

4. Create an /auth page with the following code:

   import dynamic from 'next/dynamic';
   import { useRouter } from 'next/router';
   import { useEffect, useState } from 'react';
   import { supabase } from '../lib/supabaseClient'; // Replace with your Supabase client setup
   import { ThemeSupa } from '@supabase/auth-ui-shared';
   
   const AuthComponent = dynamic(
     () => import('@supabase/auth-ui-react').then((mod) => mod.Auth),
     {
       ssr: false,
     }
   );
   
   export default function AuthPage() {
     const router = useRouter();
     const [isMounted, setIsMounted] = useState(false);
   
     useEffect(() => {
       setIsMounted(true);
     }, []);
   
     useEffect(() => {
       const { data: authListener } = supabase.auth.onAuthStateChange(
         (event, session) => {
           if (session) {
             router.push('/dashboard');
           }
         }
       );
   
       return () => {
         authListener.subscription.unsubscribe();
       };
     }, [router]);
   
     return (
       <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
         <h1 className="text-2xl font-bold mb-6 text-center">Planning Assistant</h1>
         {isMounted && (
           <AuthComponent
             supabaseClient={supabase}
             appearance={{ theme: ThemeSupa }}
             theme="light"
             providers={[]}
           />
         )}
       </div>
     );
   }

5. Navigate to the /auth page in your browser.

6. Open the browser's developer console.

7. Observe the TypeError: Cannot read properties of null (reading 'useState') error.

Expected behaviour:

The @supabase/auth-ui-react component should render the authentication UI without errors.

Screenshots:

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: Version 130.0.6723.91 (Official Build) (arm64)

Additional context:

• Node.js version: [e.g. 20.10.0]
• npm version: [e.g. 10.2.3]
• @supabase/auth-ui-react version: 0.4.7
• react version: 19.0.0
• next version: 15.2.3
• I have tried using resolutions in my package.json to force @supabase/auth-ui-react to use the same React version as my project, but the error persists.
• The error occurs even after updating Node.js and reinstalling dependencies.
• This issue is reproducible on both local development and deployed Vercel environments.
• Deployed Vercel URL: https://planning-assistant-lrx4teoh2-stacys-projects-fc21e94e.vercel.app/auth

Error Stack Trace:

[wildlyinaccurate]

I'm having the exact same issue on a new React Router project.

[vickywane]

Ran into this issue, and I think it might be due to different versions.

Related issue: https://stackoverflow.com/a/76703679