Auth Session Starts Authenticated

[boopxyz]

So I've got a problem where my session is starting out valid and authenticated which leads to my things hidden to the unauth'ed client being shown briefly.

[nic-vo]

@boopxyz Are you using the next-auth/react components?

[nic-vo]

Hmm yeah you're right.

So these console logs are from initial navigation to a page / route? Without the user touching any login / log out button?

Where is your <SessionProvider /> in the component tree? Root layout?

[boopxyz]

Hmm yeah you're right.

So these console logs are from initial navigation to a page / route? Without the user touching any login / log out button?

Where is your <SessionProvider /> in the component tree? Root layout?

Important

Using the latest version of Next.js v14 (not v15) with the app router

Correct, it's from the start of loading a page. My SessionProvider is in a client component (given I'm using the app router) which is in the layout

<Providers session={getSession()} />

which equals

<SessionProvider session={session}>{children}</SessionProvider>

[nic-vo]

Oh okay I think I might know what's going on. Don't pass the session into the SessionProvider as you have done. Also make sure you use TypeScript

1. that getSession() function is async, at least if it's the one imported from next-auth/react. You have to await it higher up in the function body and pass the resolved session as the Provider component session prop.

2. SessionProvider doesn't have a really explicit check for a Session. It assumes that the session prop is actually a Session, but technically a non-Session prop can be passed (if you're not using TypeScript; compiler would throw a fit otherwise).

3. SessionProvider will automatically check session for you on mount in a useEffect. You don't need to explicitly pass it a session for it to function properly. It'll have the expected 'loading' -> 'unauthenticated' | 'authenticated' behavior

[LDrex1]

Hmm yeah you're right.
So these console logs are from initial navigation to a page / route? Without the user touching any login / log out button?
Where is your <SessionProvider /> in the component tree? Root layout?

Important

Using the latest version of Next.js v14 (not v15) with the app router

Correct, it's from the start of loading a page. My SessionProvider is in a client component (given I'm using the app router) which is in the layout

<Providers session={getSession()} />

which equals

<SessionProvider session={session}>{children}</SessionProvider>

This doesn't look right.

Why don't you pass it this way from your async layout component or whereever

const session = await getServerSession(authOptions)
// or
const session  = await getSession()

It returns a promise so you have to await the result.
if in the child components you are doing something like

session &&

It might consider session truthy if you didn't await it because getSession() returns a promise.
I'd advice you to read the docs before going further.
[getSession] (https://next-auth.js.org/getting-started/client#getsession)

[LDrex1]

I think the best way would be to use the middleware to match your protected routes and redirect to your login url based on if the token from next auth exists or not. That way, if the user isn't authenticated, it will redirect to the login page from the middleware before it even gets to the protected routes.
Note: easiest way is to use the jwt strategy which you can set in the authOptions. If not, you'll have to handle the authentication using cookies in the middleware.

[boopxyz]

Well I need the login/logout button to be visible on all pages, including those with no logins. The issue is the status given by useSession is never loading, it's starting out as authenticated which shouldn't be the case.

[boopxyz]

Still having problems with this. Any help with be great!