Open myhendry opened 2 years ago
I was experiencing the same issue during refresh and when completing or cancelling a payment.
I believe it is caused by the user being set to supabase.auth.user() in the user.js context file when setting the initial useState. I changed this to null and the error has been eliminated. I haven't seen any other negative issue or error since making this change.
`const Provider = ({ children }) => {
const [user, setUser] = useState(null); //<---- this changed to null
const [isLoading, setIsLoading] = useState(true);
const router = useRouter(); .... `
You could also just set the user state back to supabase.auth.user()
on logout so it keeps it consistent and provide a null user attribute if the user is logged out.
const signOut = async () => {
try {
const data = await supabase.auth.signOut();
setUser(supabase.auth.user()); // will result in { user: null }
push("/auth");
return data;
} catch (error) {
console.log(error);
}
};
The user state doesn't match on the server and the client
When I logged in and refresh a page, I see the following error in my browser console
next-dev.js?3515:32 Warning: Text content did not match. Server: "Auth" Client: "Exit"
In my browser, my user state returns a boolean true that shows I'm authenticated; however, in my server, my user state returns a boolean false that shows I'm not authenticated
If I navigate via the client side without refreshing the page, the auth status works fine
Anyone knows why is my server and client authentication status different? I followed the example in the youtube video. Anything I missed out? Thanks
Full Repo
AuthContext.tsx
Navbar.tsx