#Is it normal that all components in Next.js are client components? (next auth )

38 messages · Page 1 of 1 (latest)

steady wing
#

I use app folder and Next Auth library. So that each page has access to the session, I wrapped the entire application in a SessionProvider. But since it's useContext under the hood, I had to add the 'use client' directive everywhere. This resulted in all pages being client-side since they use useSession. And all page components (buttons, inputs) also became client-side.

app/layout.tsx

const RootLayout = ({ session, children }: { session: Session; children: ReactNode }) => {
    return (
        <SessionProvider session={session}>
                <html lang={`eng`} 
                    <head>
                    </head>
                    <body>
                        {children}
                    </body>
                </html>
        </SessionProvider>
    )
}

some protected page

'use client';

import {useSession} from "next-auth/react";

export default function ProtectedPage() {
    const {data, status} = useSession()


    return (
                <div>
                    {status === "authenticated" ? <div>data.name</div> : null}
                </div>
    )
}

Is it normal that all pages and components are now rendered on the client? The Next Auth documentation recommends wrapping everything in a provider, but then the main feature of Next.js, namely SSR, no longer works

dry flareBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
vernal grove
#

the only times you need to use useSession() is if you want to authentication in a client component

#

So think first whether you are authenticating user on server or client, then implement it with NextAuth, not the other way around

steady wing
untold acorn
vernal grove
#

as long as you know what needs to be rendered in the server, and what needs interactivity

steady wing
vernal grove
steady wing
vernal grove
#

using this pattern

#

thats why this pattern works

image.png
steady wing
# vernal grove if you import a client component into a server component, and if you put {childr...

thank you. it turns out that I can leave the provider at the root, and depending on whether I have a server or client component (based on the table https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components), I use either useSession or getServerSession, right?

Getting Started: React Essentials

An overview of essential React features for building Next.js Applications, including Server Components.

sinful lintel
#

yep, since everything under <Providers /> is passed as children, it allows for server components to be passed into client components. this is what prevents the entire tree from becoming client components

sinful lintel
vernal grove
#

i usually use useSession() for things that requries auth after the page finished loading

#

thats like if the user wants to press a button to mutate stuff, i check if user is authenticated

#

or like if session suddenly expires, i can just useSession to redirect to auth

steady wing
#

thank you. and if I have an admin panel where all pages should be private, I have to check the session on each one, right?

vernal grove
steady wing
#

I thought I need check in every page it

vernal grove
#

forxample i have this at an app layout

#

that protects for example /protected

#

if I access /protected/test/aaaa/123, that code will still be run

steady wing
#

oh, thank you. and in the layout.tsx you just call getLoggedInSeddion_redirectIfNotAuth() ?

const RootLayout = ({ session, children }: { session: Session; children: ReactNode }) => {

getLoggedInSeddion_redirectIfNotAuth() 

    return (
        <SessionProvider session={session}>
            <SSRProvider>
                <html lang={`ru`} data-js-focus-visible="" className="js-focus-visible">
                    <head>
                        <title>My </title>
                    </head>
                    <body>
                        {children}

                    </body>
                </html>
            </SSRProvider>
        </SessionProvider>
    )
}
#

\

vernal grove
#

although you can do better with the function name haha