--- title: Firebase Crash Course (Auth & Firestore) #6 - Protecting... description: A step-by-step walkthrough of implementing protected routes in a Next.js app using Firebase Authentication. Covers two scenarios: redirecting unauthenticated... canonical: https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Firebase Crash Course (Auth & Firestore) #6 - Protecting Routes (in a Next.js app) | daily.dev og:description: A step-by-step walkthrough of implementing protected routes in a Next.js app using Firebase Authentication. Covers two scenarios: redirecting unauthenticated... og:url: https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr og:image: https://api.daily.dev/og/posts/ZHVFCs6vr.png og:image:alt: Firebase Crash Course (Auth & Firestore) #6 - Protecting Routes (in a Next.js app) og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Firebase Crash Course (Auth & Firestore) #6 - Protecting Routes (in a Next.js app) **[Net Ninja](https://daily.dev/sources/netninja)** · 10 min read · 1 upvotes · 0 comments ## Summary A step-by-step walkthrough of implementing protected routes in a Next.js app using Firebase Authentication. Covers two scenarios: redirecting unauthenticated users away from the dashboard, and redirecting already-authenticated users away from login/signup pages. Uses useEffect with user and loading state as dependencies, placed in layout files to protect entire route groups at once. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I redirect a user to the login page if they are not authenticated in a Next.js app using Firebase? Use a useEffect hook in the layout component (not the page) that watches the user and loading values from your auth context. When loading is false and user is null, call router.replace('/auth/login') using the useRouter hook from next/navigation. Also return null while loading or while there's no user, to prevent the protected template from briefly flashing before the redirect happens. _daily.dev surfaces practical patterns like this for developers wiring up Firebase auth in Next.js apps._ ### Why should I put authentication checks in a Next.js layout file instead of the page component? Placing the check in the layout protects everything the layout renders, including any UI the layout itself shows, and it automatically covers every current and future page nested inside that folder. Checking only the page component would still render the layout for unauthenticated users and would require duplicating the check for each new page added later. _Developers structuring auth-protected sections in Next.js can find layout patterns like this on daily.dev._ ### How do I prevent an authenticated user from viewing the login or signup page in Next.js? Copy the same useEffect-based check used for protecting the dashboard, but invert the condition: redirect to /dashboard when a user value exists instead of when it's null. Place this logic in the shared auth layout wrapping both the login and signup pages, so visiting either page while logged in immediately redirects to the dashboard, including right after a successful login or signup submission. _daily.dev helps developers building login and signup flows compare redirect strategies like this one._ ## Similar posts on daily.dev - [Simplified Authentication with Better Auth](https://daily.dev/posts/simplified-authentication-with-better-auth-weaj84lid) · Telerik · 0 upvotes · 0 comments - [How to Create Role-Based Access Control \(RBAC\) with Custom Claims Using Firebase Rules](https://daily.dev/posts/how-to-create-role-based-access-control-rbac-with-custom-claims-using-firebase-rules-mfr8m0dds) · freeCodeCamp · 2 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#authentication](https://daily.dev/tags/authentication), [#nextjs](https://daily.dev/tags/nextjs), [#firebase](https://daily.dev/tags/firebase) [View this post on daily.dev](https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Firebase Crash Course (Auth & Firestore) #6 - Protecting Routes (in a Next.js app)","url":"https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr"},"datePublished":"2026-07-27T09:51:23.022Z","dateModified":"2026-09-14T07:02:42.733Z","description":"A step-by-step walkthrough of implementing protected routes in a Next.js app using Firebase Authentication. Covers two scenarios: redirecting unauthenticated...","image":"https://i.ytimg.com/vi/-Z1KrG9f2v8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/-Z1KrG9f2v8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Net Ninja","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Net Ninja","logo":"https://media.daily.dev/image/upload/s--IXsAE5jo--/f_auto/v1718348103/logos/netninja","url":"https://daily.dev/sources/netninja"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,authentication,nextjs,firebase","timeRequired":"PT10M","video":{"@type":"VideoObject","name":"Firebase Crash Course (Auth & Firestore) #6 - Protecting Routes (in a Next.js app)","description":"A step-by-step walkthrough of implementing protected routes in a Next.js app using Firebase Authentication. Covers two scenarios: redirecting unauthenticated...","thumbnailUrl":"https://i.ytimg.com/vi/-Z1KrG9f2v8/sddefault.jpg","uploadDate":"2026-07-27T09:51:23.022Z","duration":"PT10M","url":"https://api.daily.dev/r/ZHVFCs6vr","embedUrl":"https://www.youtube.com/embed/-Z1KrG9f2v8"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Net Ninja","item":"https://daily.dev/sources/netninja"},{"@type":"ListItem","position":3,"name":"Firebase Crash Course (Auth & Firestore) #6 - Protecting Routes (in a Next.js app)"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/firebase-crash-course-auth-firestore-6---protecting-routes-in-a-next-js-app--zhvfcs6vr#faq","mainEntity":[{"@type":"Question","name":"How do I redirect a user to the login page if they are not authenticated in a Next.js app using Firebase?","acceptedAnswer":{"@type":"Answer","text":"Use a useEffect hook in the layout component (not the page) that watches the user and loading values from your auth context. When loading is false and user is null, call router.replace('/auth/login') using the useRouter hook from next/navigation. Also return null while loading or while there's no user, to prevent the protected template from briefly flashing before the redirect happens. daily.dev surfaces practical patterns like this for developers wiring up Firebase auth in Next.js apps."}},{"@type":"Question","name":"Why should I put authentication checks in a Next.js layout file instead of the page component?","acceptedAnswer":{"@type":"Answer","text":"Placing the check in the layout protects everything the layout renders, including any UI the layout itself shows, and it automatically covers every current and future page nested inside that folder. Checking only the page component would still render the layout for unauthenticated users and would require duplicating the check for each new page added later. Developers structuring auth-protected sections in Next.js can find layout patterns like this on daily.dev."}},{"@type":"Question","name":"How do I prevent an authenticated user from viewing the login or signup page in Next.js?","acceptedAnswer":{"@type":"Answer","text":"Copy the same useEffect-based check used for protecting the dashboard, but invert the condition: redirect to /dashboard when a user value exists instead of when it's null. Place this logic in the shared auth layout wrapping both the login and signup pages, so visiting either page while logged in immediately redirects to the dashboard, including right after a successful login or signup submission. daily.dev helps developers building login and signup flows compare redirect strategies like this one."}}]} ```