Let's imagine a client opens your nuxt.js website on the index page. From there, they authenticate (you used @nuxtjs/auth-next for that purpose). Then they move to a secure page that only authenticated users can see. This secure page is a .vue file in your "pages" folder with middleware: ["auth"].
Now, how is this page really secure ? I mean, couldn't a malicious user temper with the page and access it without being authenticated anyway ? Because the "security" in this scenario is only implemented on the client side right ?
Then, what is the best way to show a complex page to authenticated users only ?
I know that one way to display secure data on a page is to access it using asyncData from a secure backend API. But this isn't the best option when the page is complex and everything on it has to be secure. What would be the best option in this case then ?
CodePudding user response：
Your application being an SPA at the end, if you want to bypass a middleware with it's security checkup, you could disable the JS on the page. But then, since no content is generated directly, you won't see anything because it's not here (as a static file).
If your app is isomorphic (basically has a ssr: true), the auth module will still disable the access to those pages (you can double check).
At the end, the critical info is received when:
- you do have a valid JWT token (after some login)
- you submit an HTTP query to the backend
- the backend acknowledges it and the token is valid
- the backend gives you the sensitive info via an HTTP response
At the end, your client side code doesn't need to be secure. If somebody somehow hacks your client side state and reaches the sensitive page, he will still not have a valid JWT token since the verification still happens on the backend.
The one that can be generated only when sending the proper credentials to the backend and having the backend validating those.
CodePudding user response：
Now, how is this page really secure ?
The protected content is served from a request if a valid access token has been provided by the client. The protected content is provided at runtime.
Because the "security" in this scenario is only implemented on the client side right ?
The security is not only implemented on the client side. The premise is: The access token has been obtained securely through an authentication flow with an auth-server. I recommend to read more about auth flows if this sounds unclear. Auth0 has some good documentation on different flows. https://auth0.com/docs/authorization/flows
Then, what is the best way to show a complex page to authenticated users only ?
The content is provided at run-time. Server-side or client-side. There are some setup guides here for Nuxt. Here is the first (Auth0) I found from the list. https://auth.nuxtjs.org/providers/auth0
I don't know how updated those guides are, but the auth service providers tend to have updated guides themselves.