How do I protect my navbar component as part of a PrivateRoute?

[glad tide]

How do I protect my navbar component as well which is being attached to my dashboard page, currently it is only protecting the dashboardv2component which is passed as children to a privateroute which checks for auth credentials. What am I doing wrong here that the navbar still shows while the auth check is happening? how do i fix it?
Any help is appreciated.

import PrivateRoute from "@/components/PrivateRouting/PrivateRoute";
import DashboardV2Component from "@/componentsv2/dashboard";
import NavbarV2 from "@/componentsv2/dashboard/navbarcomponent/NavbarV2";
import React from "react";

function DashboardV2() {
  return <PrivateRoute component={DashboardV2Component} />;
}

DashboardV2.getLayout = (page) => <NavbarV2>{page}</NavbarV2>;

export default DashboardV2;

[outer steeple]

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)

[glad tide]

@arctic holly

[arctic holly]

You can use middleware

[glad tide]

Well, that sucks. I was hoping for a more simpler solution.

[glad tide]

.

[arctic holly]

you can do it on that route

by a function

if its valid, return 1 component or the other

[glad tide]

I am using nextjs as frontend only.

[arctic holly]

oh, so you'll have to make a req to external api

[glad tide]

I think my problem is not being conveyed properly.
What I am currently facing is that, see the DashboardV2Component it is rendered only after the auth check with my backend clears of it being authenticated and then show the dashboard component BUT the issue currently is that the navbar which is set as the layout to the /dashboard route always shows irrespective of what state the user is in.
My logic behind using the navbar as the layout component is that so that it can share states between the more forward requests like /dashboard/products or something else. Othewise I would have to render the Navbar component in each page or subpage.

[arctic holly]

Oh so you've your navbar in layout.tsx, right?

[glad tide]

no, I am attaching it to a specific page.

the dashboard page.

[arctic holly]

so pass the authentication status to the navbar inside dashboard page

you can pass it in props

the auth status

[glad tide]

Isn't that a hacky way? I was actually doing it like that in the v1. It worked fine but I posted here because I wanted other people's opinion on it, maybe something better.

[arctic holly]

get authentication status seperately

inside nav

[glad tide]

Yes, the auth status is seperate using context api.

[arctic holly]

You might need to wait for a reply from a more experienced person.

[glad tide]

Hey, can we use a custom app for some page? I mean we already have the _app.js file defined in the pages directory. I was wondering if it is possible to have a _app.js for a specific page, something like the following file structure?

│   │   ├── v2
│   │   │   └── dashboard
│   │   │       ├── _app.js
│   │   │       ├── index.js
│   │   │       └── product
│   │   │           └── index.js

Is this possible?

[arctic holly]

Are you using pages router

[glad tide]

yes

[arctic holly]

If you are, I won’t be able to help you since i don’t use pages router.

[glad tide]

ah.

is _app not used in app router?