👋 Hey everyone,

I'm working on a Next.js 13 project, and I'm using @supabase/auth-helpers-nextjs for authentication. In my layout.tsx file, I'd like to find a way to check whether a user is signed in or not, and use this information to modify the layout, specifically changing the buttons displayed to the user based on their authentication status.

I came across the method supabase.auth.getSession(), which returns the session object. It looks like I can check if the returned session is null to determine the user's signed-in status. Here's what I have in mind:

const isLoggedIn = (await supabase.auth.getSession()).data.session !== null;

By determining the logged-in status, I aim to show different buttons in the layout - "Log In" and "Sign Up" for logged-out users, and a "Log Out" button for logged-in users.

I'm trying to implement this logic within my layout.tsx file, and I'm wondering if I'm approaching this problem the right way. Does anyone have experience with this approach in Next.js 13 with Supabase? Or is there a common pattern or best practice for handling this scenario? Additionally, if anyone sees any potential issues or better ways to handle this, especially within the layout file, I would be very interested to hear.

Thanks in advance! 🙏