Gatsby: Is it mandatory for authenticated pages to use client-only routes

Created on 5 Apr 2020  路  3Comments  路  Source: gatsbyjs/gatsby

Summary

I was reading this tutorial https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/#implementing-client-only-routes

And wanted to know why it says to use client only routes for private pages, and not use just a verification if the user is logged in and else redirect them with a normal gatsby page

Thanks

Relevant information

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

question or discussion

Most helpful comment

Normally you would use client-only routes if you want them to be private, because you don't want somebody to have access to the rendered data. However, it doesn't have to be client-only routes.

You could design a type of app shell for a private route, and only show the content after you have successfully checked the authentication status (the data collection will usually require an authentication token, anyway). The app shell will just be the UI structure/framework, and whatever content that is not private. When somebody first goes to it, they will see the shell immediately, but then if auth validation fails, you could have it redirect them; but that means they see the shell for a few moments, then it pushes them somewhere else.

That's one way that client-only routes are good; you can stop it from rendering anything until you've verified the auth, and show them the login page immediately if it fails. No skipping around, so it feels seamless. On the other hand, with the app shell method, you could make it show them a pop up to ask for the login information. As a user, that would make sense to me.

It just depends on your preference. As long as you remain aware of what is being rendered statically so that you don't expose some private information on accident, and you are okay with the UX, then it should be fine not to use client-only routes.

All 3 comments

Normally you would use client-only routes if you want them to be private, because you don't want somebody to have access to the rendered data. However, it doesn't have to be client-only routes.

You could design a type of app shell for a private route, and only show the content after you have successfully checked the authentication status (the data collection will usually require an authentication token, anyway). The app shell will just be the UI structure/framework, and whatever content that is not private. When somebody first goes to it, they will see the shell immediately, but then if auth validation fails, you could have it redirect them; but that means they see the shell for a few moments, then it pushes them somewhere else.

That's one way that client-only routes are good; you can stop it from rendering anything until you've verified the auth, and show them the login page immediately if it fails. No skipping around, so it feels seamless. On the other hand, with the app shell method, you could make it show them a pop up to ask for the login information. As a user, that would make sense to me.

It just depends on your preference. As long as you remain aware of what is being rendered statically so that you don't expose some private information on accident, and you are okay with the UX, then it should be fine not to use client-only routes.

Thank you for opening this!

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

Thank you, this is very clear

Was this page helpful?
0 / 5 - 0 ratings