Theo's Typesafe Cult•15mo ago

better supabase auth than with useEffect & getSession on each page?

apparently the way i was doing this was very noob, but not sure what the best alternative would be before i had a useEffect on each page in my webapp like this

  useEffect(() => {
    const getUser = async () => {
      const {
        data: { session },
      } = await supabase.auth.getSession()

      if (!session) {
        console.log('no session')
      } else if (!session.user) {
        console.log('no user')
      } else {
        // console.log('session.user: ', session.user)
        setUser(session.user)
      }
    }

    void getUser()
  }, [])

  useEffect(() => {
    const getUser = async () => {
      const {
        data: { session },
      } = await supabase.auth.getSession()

      if (!session) {
        console.log('no session')
      } else if (!session.user) {
        console.log('no user')
      } else {
        // console.log('session.user: ', session.user)
        setUser(session.user)
      }
    }

    void getUser()
  }, [])

apparently this is really bad, especially on each page. what should i be doing instead when using supabase auth? id like to have the session/user data and details available on every page without have the same useeffect call on every page

7 Replies

oadster•15mo ago

You can do something like create a hook / auth context

oadster•15mo ago

https://gist.github.com/chadmuro/b1c398d68da90eeac70bf1ca01d4a822

Gist

Supabase Auth Context

Supabase Auth Context. GitHub Gist: instantly share code, notes, and snippets.

oadster•15mo ago

Another guide

oadster•15mo ago

https://ruanmartinelli.com/posts/supabase-authentication-react/

Authentication with Supabase and React

Supabase is an open source managed backend platform. It's a direct alternative Firebase, which is owned by Google...

Domcario•15mo ago

how different is that approach from this? https://supabase.com/docs/guides/auth/auth-helpers/nextjs or https://supabase.com/docs/guides/auth/quickstarts/react

Supabase Auth with Next.js | Supabase Docs

Authentication helpers for Next.js API routes, middleware, and SSR.

Use Supabase Auth with React | Supabase Docs

oadster•15mo ago

It is more or less the same But you aren’t doing your useEffect fetch for every page

Domcario•15mo ago

yea idk useUser seems broken, always returns null. there's a lot of posts in the supabase discord and the supabase-js github discussion about it maybe ill just switch to nextauth

Gaming

Programming

better supabase auth than with useEffect & getSession on each page?