I am currently developing an app using Next.js 13 and Supabase for the backend. I have been facing a challenge in determining the most effective way to create a context or provider for the logged-in user.
The process of retrieving the user from Supabase involves:
- Signing in with an OAuth Provider.
- Extracting the user ID from the session through the Supabase onAuthStateChanged hook.
- Fetching the complete user object from the Supabase DB using the obtained user ID.
In my layout, I have implemented a Supabase listener that effectively handles authentication state changes and updates the current session.
Initially, I attempted to execute the fetchUser function within the onAuthStateChanged hook, but encountered issues related to late update hydration errors.
This is how the application looks based on the examples provided:
// layout.tsx
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const supabase = createServerComponentSupabaseClient<Database>({
headers,
cookies,
});
const {
data: { session },
} = await supabase.auth.getSession();
return (
<html>
<head />
<body>
<NavMenu session={session} />
<SupabaseListener accessToken={session?.access_token} />
{children}
</body>
</html>
);
}
// supabase-listener.tsx
// sourced directly from the supabase-auth-helpers library.
"use client";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import supabase from "../lib/supabase/supabase-browser";
export default function SupabaseListener({
accessToken,
}: {
accessToken?: string;
}) {
const router = useRouter();
useEffect(() => {
supabase.auth.onAuthStateChange(async (event, session) => {
if (session?.access_token !== accessToken) {
router.refresh();
}
});
}, [accessToken, router]);
return null;
}
Essentially, I plan to incorporate a LoggedInUserProvider around the root layout, trigger the fetch user call during the initial page load, and set the state within the provider for the current logged-in user.
Other methods I explored involved executing the fetch user call from the root layout and utilizing a LoggedInUserListener client component that accepts the user as a property and updates the state only if the profile exists. However, this approach resulted in incorrect state setting errors.
Your assistance is greatly appreciated.