Redirect all pages to a particular page if user logged out(missing in session)?

[viraj071]

I am using next-auth.js in my next.js project.
I want to redirect all pages to the "/" page or login page if the user logs out on one of the open pages of the app. How can I do this?

[balazsorban44]

Middleware lets you do exactly that! Have a look: https://next-auth.js.org/configuration/nextjs#basic-usage

[balazsorban44]

This should work, I believe:

const { status } = useSession()
const router = useRouter()

useEffect(() => {
  status === "unauthenticated" && router.push("/")
}, [status, router])

[viraj071]

Yes. The above should work but I will need to add the above to every component under protected paths. Wondering if there is a centralized place I can configure this.

[balazsorban44]

It was late yesterday, I forgot we had this 😅:

https://next-auth.js.org/getting-started/client#specifying-a-callbackurl-1

So you can just call signOut({callbackUrl: "/"})

[viraj071]

Yes. I am already doing this. This would redirect the page on which we click signOut. The code you mentioned earlier will have to go in every protected page right?

[balazsorban44]

The useEffect can be put higher up in the tree like in _app, just make sure it's still under SessionProvider to make useSession work.

This would redirect the page on which we click signOut. 

Both of these aren't a problem if you have a shared layout like a navbar for example.