Best practice for protecting page / not letting anything run before redirect
In my app, I would like to protect a few key routes. The middleware implementation of NextAuth looks interesting but I am reluctant to swap out the strategy to 'jwt'. As such, I am protecting page by page with something as below:
---
const { status } = useSession({
required: true,
onUnauthenticated() {
signIn()
},
})
console.log("I am alive")
const { data: todos } = api.todo.getAll.useQuery();
---
However, I notice in these cases, that the page continues to run - briefly (I can see the "I am alive" being logged to the console) - before its redirected to the signin page. This feels like a security lapse to me (stuff running on the page before the page loads).
What is the best way to make it wait before running the rest of the page (essentially - not running anything unless the person is authenticated)?
---
const { status } = useSession({
required: true,
onUnauthenticated() {
signIn()
},
})
console.log("I am alive")
const { data: todos } = api.todo.getAll.useQuery();
---
However, I notice in these cases, that the page continues to run - briefly (I can see the "I am alive" being logged to the console) - before its redirected to the signin page. This feels like a security lapse to me (stuff running on the page before the page loads).
What is the best way to make it wait before running the rest of the page (essentially - not running anything unless the person is authenticated)?
