Search code examples
reactjstypescriptnext.jssupabase

Supabase Auth-UI Issue: Uncaught TypeError: Cannot read properties of null (reading 'useState')

Issue

Everytime I add this Auth (this is a component) in my login page i am having issue, I am trying to follow the docs about Supabase Auth with Next.js Pages Directory. If you guys think this is a version issue please let me know. Been trying to search this issue on internet but haven't found related to auth-ui but i do think that this issue is from Auth since it only happens everytime i add this.

Code

import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useTheme } from 'next-themes'
import { Database } from '../../types/database.types'

export default function AuthForm() {
    const supabase = createClientComponentClient<Database>()
    const { theme } = useTheme();

    return ( 
            <Auth
            supabaseClient={supabase}
            appearance={{ theme: ThemeSupa }}
            socialLayout="horizontal"
            onlyThirdPartyProviders={true}
            theme={theme === 'dark' ? 'light' : 'dark'}
            showLinks={false}
            providers={['google', 'twitter', 'discord']}
            redirectTo="http://localhost:3000/api/auth/callback"
            />
    )
}

Demo

issue

Packages / Dependencies

"@supabase/auth-helpers-nextjs": "^0.7.2",
"@supabase/auth-helpers-react": "^0.4.0",
"@supabase/auth-ui-react": "^0.4.2",
"@supabase/auth-ui-shared": "^0.1.6",
"@supabase/supabase-js": "^2.25.0",
"next": "^12.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",

Views

Solution

  • The issue is the compatibility. So i have decided to update:

        "react": "18.2.0",
    "react-dom": "18.2.0",
    "@supabase/auth-helpers-nextjs": "^0.7.2",
    "@supabase/auth-helpers-react": "^0.4.0",
    "@supabase/auth-ui-react": "^0.4.2",
    "@supabase/auth-ui-shared": "^0.1.6",
    "@supabase/supabase-js": "^2.25.0",