How can I make private route in app router project? | Next.js | Page 1

mossy shore Jul 2, 2023, 9:20 PM

#

How can I make private route in app router project?

thorny swallowBOT Jul 2, 2023, 9:20 PM

#

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)

devout iris Jul 2, 2023, 9:24 PM

#

you mean adding auth to it?

mossy shore Jul 2, 2023, 10:38 PM

#

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.

atomic trout Jul 2, 2023, 11:10 PM

#

Maybe you can try conditional rendering?

proper warren Jul 2, 2023, 11:26 PM

#

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

mossy shore Jul 3, 2023, 1:47 AM

#

how can I avoid that?

ruby crypt Jul 3, 2023, 2:17 AM

#

mossy shore 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

mossy shore Jul 3, 2023, 2:18 AM

#

Then how about client component?

#

I mean on Client components?

ruby crypt Jul 3, 2023, 2:19 AM

#

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

#

that includes client and server components

mossy shore Jul 3, 2023, 2:22 AM

#

what do you mean exactly?

ruby crypt Jul 3, 2023, 2:23 AM

#

const session = getSession()
if(!session) redirect('/login')

return (
  <ClientComponents/>
  <ServerComponents/>
)

#

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

mossy shore Jul 3, 2023, 2:25 AM

#

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?

ruby crypt Jul 3, 2023, 2:26 AM

#

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

mossy shore Jul 3, 2023, 2:26 AM

#

Oh...

ruby crypt Jul 3, 2023, 2:26 AM

#

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

mossy shore Jul 3, 2023, 2:26 AM

#

In layout tsx, browser api is working?

#

like session, localstorage

ruby crypt Jul 3, 2023, 2:26 AM

#

you can put client components in layout.tsx

mossy shore Jul 3, 2023, 2:27 AM

#

If I put client component, then it is working?

ruby crypt Jul 3, 2023, 2:27 AM

#

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

mossy shore Jul 3, 2023, 2:27 AM

#

Okay. Thanks. I will try now.

#

where is redirect function?

ruby crypt Jul 3, 2023, 2:32 AM

#

in next/navigation i believe

mossy shore Jul 3, 2023, 2:36 AM

#

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.

ruby crypt Jul 3, 2023, 2:36 AM

#

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

mossy shore Jul 3, 2023, 2:37 AM

#

Okay.

#

Seems it is not redirecting instantly.

ruby crypt Jul 3, 2023, 2:43 AM

#

log your session object

mossy shore Jul 3, 2023, 2:43 AM

#

Ok.

#

It is working in production.

#

Maybe pre building route issue?

ruby crypt Jul 3, 2023, 2:47 AM

#

delete .next folder maybe? haha

mossy shore Jul 3, 2023, 2:47 AM

#

You are great.

ruby crypt Jul 3, 2023, 2:47 AM

#

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

mossy shore Jul 3, 2023, 2:48 AM

#

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?

ruby crypt Jul 3, 2023, 2:52 AM

#

uhhh wdym not show all together?

#

which comps did not show instantly?

#

navbar? footer? div?

mossy shore Jul 3, 2023, 2:53 AM

#

Yeah. It is showing one by one I mean.

ruby crypt Jul 3, 2023, 2:54 AM

#

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

mossy shore Jul 3, 2023, 2:55 AM

#

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

ruby crypt Jul 3, 2023, 2:55 AM

#

you're welcome anytime

#How can I make private route in app router project?