Auth UI not working

Hi! I followed the documentation to create a login page using Supabase's Auth UI. My code looks like this:

import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { useSupabaseClient } from '@supabase/auth-helpers-react'

export default function Login() {
  const supabaseClient = useSupabaseClient()
  return (
    <Auth
      supabaseClient={supabaseClient}
      appeararance={{ theme: ThemeSupa }}
      theme="dark"
      socialLayout='horizontal'
      redirectTo="http://localhost:3000/"
    />
  )
}

import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { useSupabaseClient } from '@supabase/auth-helpers-react'

export default function Login() {
  const supabaseClient = useSupabaseClient()
  return (
    <Auth
      supabaseClient={supabaseClient}
      appeararance={{ theme: ThemeSupa }}
      theme="dark"
      socialLayout='horizontal'
      redirectTo="http://localhost:3000/"
    />
  )
}

But my UI ends up looking like the image attached.
Also, the redirect does not work. I am still able to login and logout but its just the styling and redirect that is the issue.

Thank you!

Supabase•4y ago•

4 replies

Zeph

Auth UI not working

Hi! I followed the documentation to create a login page using Supabase's Auth UI. My code looks like this:

import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { useSupabaseClient } from '@supabase/auth-helpers-react'

export default function Login() {
  const supabaseClient = useSupabaseClient()
  return (
    <Auth
      supabaseClient={supabaseClient}
      appeararance={{ theme: ThemeSupa }}
      theme="dark"
      socialLayout='horizontal'
      redirectTo="http://localhost:3000/"
    />
  )
}

import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
import { useSupabaseClient } from '@supabase/auth-helpers-react'

export default function Login() {
  const supabaseClient = useSupabaseClient()
  return (
    <Auth
      supabaseClient={supabaseClient}
      appeararance={{ theme: ThemeSupa }}
      theme="dark"
      socialLayout='horizontal'
      redirectTo="http://localhost:3000/"
    />
  )
}

But my UI ends up looking like the image attached.
Also, the redirect does not work. I am still able to login and logout but its just the styling and redirect that is the issue.

Thank you!

Auth UI not working

Similar Threads

Auth UI not working

Similar Threads

Similar Threads

Similar Threads