Best way to get auth status without making whole page dynamic?
Answered
LaPerm posted this in #help-forum
LaPermOP
I’ve spent a long time trying to get a good understanding of auth and have my own node backend with all my logic.
After a lot of trial and error I went with iron-session to control auth on my front end and have it working great.
Obviously it uses cookies to store session data and I also hold my access token inside the session.
BUT I just learnt this converts all server side pages into dynamically rendered pages rather than static.
I have a navbar which is in my layout which also uses the session to determine what to display. But this means ALL my pages are dynamic 🤯
I have nothing against next auth and think it’s great and have used it previously and will likely use it in future projects but this is something I’m trying to do to get better understanding and keep control so please don’t recommend I just use that 😉
What is best process to get my auth logic to work without this side effect? I could fetch the logged in user from my backend and get them that way but my access token is in the cookie so I would fail the auth on fetch. I could also create a context store or something to retrieve the token I guess but don’t really want to do that but this must be a common problem and wonder what would be recommended way to resolve this? Be great to an example if possible.
After a lot of trial and error I went with iron-session to control auth on my front end and have it working great.
Obviously it uses cookies to store session data and I also hold my access token inside the session.
BUT I just learnt this converts all server side pages into dynamically rendered pages rather than static.
I have a navbar which is in my layout which also uses the session to determine what to display. But this means ALL my pages are dynamic 🤯
I have nothing against next auth and think it’s great and have used it previously and will likely use it in future projects but this is something I’m trying to do to get better understanding and keep control so please don’t recommend I just use that 😉
What is best process to get my auth logic to work without this side effect? I could fetch the logged in user from my backend and get them that way but my access token is in the cookie so I would fail the auth on fetch. I could also create a context store or something to retrieve the token I guess but don’t really want to do that but this must be a common problem and wonder what would be recommended way to resolve this? Be great to an example if possible.
Answered by joulev
Several options:
1. (My choice) Client-side rendering the auth state - then the pages will remain static, but the login button on the navbar and similar auth-dependent UI need a loading state. Example: useSession in next-auth, you can implement your own hook based on your own auth pretty easily.
2. Make the pages dynamic anyway, but cache the queries in the page with unstable_cache for example, making all those queries static. But this approach is unstable as the unstable_cache name implies.
3. Use PPR then you can have dynamic holes inside a static page. This approach is also unstable.
1. (My choice) Client-side rendering the auth state - then the pages will remain static, but the login button on the navbar and similar auth-dependent UI need a loading state. Example: useSession in next-auth, you can implement your own hook based on your own auth pretty easily.
2. Make the pages dynamic anyway, but cache the queries in the page with unstable_cache for example, making all those queries static. But this approach is unstable as the unstable_cache name implies.
3. Use PPR then you can have dynamic holes inside a static page. This approach is also unstable.
5 Replies
@LaPerm I’ve spent a long time trying to get a good understanding of auth and have my own node backend with all my logic.
After a lot of trial and error I went with iron-session to control auth on my front end and have it working great.
Obviously it uses cookies to store session data and I also hold my access token inside the session.
BUT I just learnt this converts all server side pages into dynamically rendered pages rather than static.
I have a navbar which is in my layout which also uses the session to determine what to display. But this means ALL my pages are dynamic 🤯
I have nothing against next auth and think it’s great and have used it previously and will likely use it in future projects but this is something I’m trying to do to get better understanding and keep control so please don’t recommend I just use that 😉
What is best process to get my auth logic to work without this side effect? I could fetch the logged in user from my backend and get them that way but my access token is in the cookie so I would fail the auth on fetch. I could also create a context store or something to retrieve the token I guess but don’t really want to do that but this must be a common problem and wonder what would be recommended way to resolve this? Be great to an example if possible.
Several options:
1. (My choice) Client-side rendering the auth state - then the pages will remain static, but the login button on the navbar and similar auth-dependent UI need a loading state. Example: useSession in next-auth, you can implement your own hook based on your own auth pretty easily.
2. Make the pages dynamic anyway, but cache the queries in the page with unstable_cache for example, making all those queries static. But this approach is unstable as the unstable_cache name implies.
3. Use PPR then you can have dynamic holes inside a static page. This approach is also unstable.
1. (My choice) Client-side rendering the auth state - then the pages will remain static, but the login button on the navbar and similar auth-dependent UI need a loading state. Example: useSession in next-auth, you can implement your own hook based on your own auth pretty easily.
2. Make the pages dynamic anyway, but cache the queries in the page with unstable_cache for example, making all those queries static. But this approach is unstable as the unstable_cache name implies.
3. Use PPR then you can have dynamic holes inside a static page. This approach is also unstable.
Answer
@joulev Several options:
1. (My choice) Client-side rendering the auth state - then the pages will remain static, but the login button on the navbar and similar auth-dependent UI need a loading state. Example: useSession in next-auth, you can implement your own hook based on your own auth pretty easily.
2. Make the pages dynamic *anyway*, but cache the queries in the page with unstable_cache for example, making all those queries static. But this approach is unstable as the unstable_cache name implies.
3. Use PPR then you can have dynamic holes inside a static page. This approach is also unstable.
LaPermOP
Thanks for the response joulev 👍 would you mind elaborating on the client side rendering. I like the idea of a useSession hook do you know of any examples without next auth.
@LaPerm Thanks for the response joulev 👍 would you mind elaborating on the client side rendering. I like the idea of a useSession hook do you know of any examples without next auth.
Make an api route like /api/session that returns the session, then in the client, use react-query or swr or a useEffect, fetch that /api/session and save the result to a global state
@joulev Make an api route like /api/session that returns the session, then in the client, use react-query or swr or a useEffect, fetch that /api/session and save the result to a global state
LaPermOP
Thanks Joulev I got something basic working and most pages are showing as static 🥳 I’ll tidy it up and turn it into a hook with react query. Thanks for your help. 🙏
Glad you got it working