Is there any way we can Authenticate all the nested routes ?
In my project I have routes which needs authentication and routes which can be accessible without authentication.
For eg.
/admin => needs authentication
/admin/posts => needs authentication
/admin/posts/1 => needs authentication
/admin/users => needs authentication
and so on..
/view => can access without authentication
/view/songs => can access without authentication
/view/posts => can access without authentication
Things which I have tried :
HOC : need to include it in every route I create inside admin. Is there any way we can do it in common place ?
getServerSideProps : same as above
is there any way to do this in one common file ?
Advertisement
Answer
You can achieve this in multiple ways, just a couple of inputs :
If you are using next >= 13 with the new app directory routing convention you can use the layout.js file in the root of /admin folder :
export default function RootLayout({ children }) { // your logic to check if the user is logged if(/* user is logged */){ return ( <html> <head></head> <body>{children}</body> </html> ) }else{ return <p>Must be authenticated</p> // show login? } }Otherwise you can use a similar logic inside the _App.js
import { useRouter } from 'next/router';import {MyAuthComponent} from 'auth/path' // your login componentexport default function MyApp({ Component, pageProps }) { const router = useRouter(); const currentPath = router.asPath const isPublicRoute = currentPath.includes('view') // your logic to check if the current route is public if(isPublicRoute ){ return <Component {pageProps} /> }else{ return ( <MyAuthComponent> <Component {pageProps} /> </MyAuthComponent> ) }}And MyAuthComponent.js
export default function MyAuthComponent({ children }) { // your logic to check if the user is logged if(/* user is logged */){ return ( <html> <head></head> <body>{children}</body> </html> ) }else{ return <p>Must be authenticated</p> // show login? } }