Next.js Discord

Discord Forum

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

Unanswered
Multiflora rose seed chalcid posted this in #help-forum
Open in Discord
Multiflora rose seed chalcidOP
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;

28 Replies

Multiflora rose seed chalcidOP
@"use php"
"use php"
You can use middleware
Multiflora rose seed chalcidOP
Well, that sucks. I was hoping for a more simpler solution.
@"use php" You can use middleware
Multiflora rose seed chalcidOP
.
"use php"
you can do it on that route
by a function
if its valid, return 1 component or the other
Multiflora rose seed chalcidOP
I am using nextjs as frontend only.
@Multiflora rose seed chalcid I am using nextjs as frontend only.
"use php"
oh, so you'll have to make a req to external api
@"use php" oh, so you'll have to make a req to external api
Multiflora rose seed chalcidOP
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.
"use php"
Oh so you've your navbar in layout.tsx, right?
Multiflora rose seed chalcidOP
no, I am attaching it to a specific page.
the dashboard page.
"use php"
so pass the authentication status to the navbar inside dashboard page
you can pass it in props
the auth status
@"use php" so pass the authentication status to the navbar inside dashboard page
Multiflora rose seed chalcidOP
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.
"use php"
get authentication status seperately
inside nav
@"use php" get authentication status seperately
Multiflora rose seed chalcidOP
Yes, the auth status is seperate using context api.
@"use php" You might need to wait for a reply from a more experienced person.
Multiflora rose seed chalcidOP
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?
"use php"
Are you using pages router
Multiflora rose seed chalcidOP
yes
"use php"
If you are, I won’t be able to help you since i don’t use pages router.
Multiflora rose seed chalcidOP
ah.
is _app not used in app router?
"use php"
No,

In my opinion, pages router is too outdated.

Its just my opinion, other's may still like to use pages router