Effect CommunityEC
Effect Community•2y ago•
8 replies
IAFalconX

Implementing Supabase Authentication with useEffect in React

Hello, I want to play a bit with supabase and so I took the example from their website and of course it works, I now want to make it the Effect way:
const supabase = createClient('https://example.supabase.co', 'aaa')

function App() {
    const [session, setSession] = useState<Session | null>(null)

    useEffect(() => {
      supabase.auth.getSession().then(({ data: { session } }) => {
        setSession(session)
      })

      const {
        data: { subscription },
      } = supabase.auth.onAuthStateChange((_event, session) => {
        setSession(session)
      })

      return () => subscription.unsubscribe()
    }, [])

    if (!session) {
      return (<Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />)
    }
    else {
      return (<div>Logged in!</div>)
    }
}


would it make sense to have supabase as a service? if so, should I define in that service the getSession and onAuthStateChange as fields? does it have any return value? or maybe should I rename it to my preference naming? how would you go about it? thank you !!
Was this page helpful?