you mean adding auth to it?

Yes.

I am now doing router.push in all components.

But if I do like this, when I enter the private route, first it shows that page for milli second and push back.

Maybe you can try conditional rendering?

yes I'd say the same thing

if (!user) return router.push('/login')

return (
// your components
)

but this would probably require loading the user request on server-side, or wait the end of the request to render the pages

how can I avoid that?

do the auth serverside, check user session first on server components and redirect if session not found

that way it wont flash

Then how about client component?

I mean on Client components?

when session is found, the function will return any component that you define in the Page/Layout Component

that includes client and server components

what do you mean exactly?

if session is found it will return any client components or server components

I see... But if I do like that I have to use that code in every routes.

It's complicated. Can't I make a speicifc component?

not really, just use it on the top level layout.tsx

Oh...

that way every code that uses that route segment will need authentication

In layout tsx, browser api is working?

like session, localstorage

you can put client components in layout.tsx

If I put client component, then it is working?

why would i suggest you something that isn't working xd

Okay. Thanks. I will try now.

where is redirect function?

in next/navigation i believe

export default function RootLayout({ children }: { children: React.ReactNode }) {

  const zeroString = localStorage.getItem('zero');
  const zero = zeroString !== null ? JSON.parse(zeroString) : null;

  if (!zero.auth.access_token) {
    redirect('/login')
  }

I did like this but it is saying localStorage is not defined.

i told you you can't use web api in server component
put a client component and use your localStorage in there
put the client component inside a server component

Okay.

Seems it is not redirecting instantly.

log your session object

Ok.

It is working in production.

Maybe pre building route issue?

delete .next folder maybe? haha

You are great.

you can be too!

honestly all of these can be answered if you try it on your own nextjs project

but im just helping you go to the right direction

Ok. Thanks!

Just one thing.

{
        zero.auth?.access_token ? <> 
          <Navbar />
          <div className='flex flex-1 overflow-y-auto'>{props.children}</div>
          <Footer />
          <ToastWrapper />
        </> :
        <>
          {props.children}
        </>
      }

Here, if there is zero.auth.access_token it shows those components but not showing all together.
I think it is not good for user experience. Is there any wahy to show them all together?

uhhh wdym not show all together?

which comps did not show instantly?

navbar? footer? div?

Yeah. It is showing one by one I mean.

yes but precisely how?

in which order

and maybe there is another operation at Navbar, or Footer or Children that i don't know of

its not enough information to help you

its too vague

Okay. Thanks.
I will try to fix.
Thanks for your help! really.
I will open another tag if I need help.

you're welcome anytime