Navbar question
Hi. Having trouble understanding how the navbar is handled. What would be the best way to show some additional items on navbar only if the user is logged in.
3 Replies
Hey, check this example app to see how it can be done: https://github.com/wasp-lang/wasp/tree/main/examples/thoughts .
Layout (https://github.com/wasp-lang/wasp/blob/main/examples/thoughts/src/client/Layout.jsx) uses TopNavbar, which we defined here https://github.com/wasp-lang/wasp/blob/main/examples/thoughts/src/client/TopNavbar.jsx, which shows username.
Here page receives
user as a prop because in main.wasp it has authRequired set to true, but, you can not have that set to true and instead obtain user via useAuth hook, and then check if it is null/undefined or not. Docs on hook https://wasp-lang.dev/docs/auth/overview#on-the-clientGitHub
wasp/examples/thoughts at main · wasp-lang/wasp
The fastest way to develop full-stack web apps with React & Node.js. - wasp-lang/wasp
GitHub
wasp/examples/thoughts/src/client/Layout.jsx at main · wasp-lang/wasp
The fastest way to develop full-stack web apps with React & Node.js. - wasp-lang/wasp
Overview | Wasp
Auth is an essential piece of any serious application. That's why Wasp provides authentication and authorization support out of the box.
if you're referring to open-saas, you might be confused because the landing page has its own navbar component
they share the same
DropdownUser component though. see here >> https://github.com/wasp-lang/open-saas/blob/main/app/src/client/components/DropdownUser.tsxGitHub
open-saas/app/src/client/components/DropdownUser.tsx at main · wasp...
A free, open-source SaaS app starter for React & Node.js with superpowers. Production-ready. Community-driven. - wasp-lang/open-saas