- 13Make User State Globally Accessible in Next.js with React Context and Providers5m
Make User State Globally Accessible in Next.js with React Context and Providers
Share this video with your friends
Using React Context, we can create global variables that are available throughout our Next.js application. In this video, we create a useUser hook that exposes the state of our Supabase user to our tree of React components.
To get the state of our Supabase user when our application loads, we can use supabase.auth.user(). When the state of our user changes - e.g. our user logs in - Supabase will call the supabase.auth.onAuthStateChange callback. We can use this to update the state of our user object whenever the user signs in or out.
In order to consume our user context, we need to wrap our root component in our Context Provider. This can be done in the pages/_app.js file. Now any component in our tree of decedents can call useUser to get the state of our global singleton user.
Lastly, our user object only contains values from the auth.users table. In order to enrich our user with data from the profile table, we need to add a request to our Supabase db within our user provider.
Hey, I'm trying to access the user object from useUser in a component, but if I try to render {user.username} I get a "Cannot read username property of null" error.
The user appears in my console.log, but I'm suspecting it first tries to access the property on the object, before the user object is fetched from Supabase.
Any idea how I can remedy that? I was thinking I can provide some default values for the user object before I get it from Supabase, but not sure that's best practice. Thanks!
Hey! Very good question! This is because the first render of the Next.js application happens on the server (SSR), and our useUser hook uses a useState variable - only available on the client.
One way we can get around this is by using Next.js' getServerSideProps function, pulling the user out of the cookie and returning it in the prop object making it available to our component. This will be available during the first render (SSR) and for the regular client-side renders 👍
What is the best approach for setting this context and avoiding conflict alongside the Supabase auth helpers. For example, if app is already wrapped in SessionContextProvider.
Hey Jake, I don't have a specific answer for you but the Supabase GitHub discussions is active and someone might be able to help you there: https://github.com/supabase/supabase/discussions
No worries, I just went ahead and used the Supabase auth helpers for session context and a custom context for user account/profile. Thanks for everything, great tutorial!
This may need to be updated to make use of the supbase auth helpers. They now provide a useUser hook [1]
import { useUser, useSupabaseClient } from '@supabase/auth-helpers-react'[1] https://supabase.com/docs/guides/auth/auth-helpers/nextjs#client-side-data-fetching-with-rls