Search code examples
javascriptvue.jssecuritynuxt.jsnuxt-auth

How is nuxt/auth really secure?


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 ?


Solution

  • 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.