Next.js blurs the line between frontend and backend, so there is more than one way to do authentication on a Next.js app.
To identify which authentication pattern you should use, you must first understand the data-fetching strategy you want. The predominant patterns are:
Fetching user data client-side
You will use Static Generation to generate the page’s HTML at build time. The HTML will then be reused on each request and can be cached by a CDN. The user will be quickly served an app shell, usually a loading indicator, before the client-side code fetches the user’s data to populate the content.
Your typical authentication for this type of application will be that of a SPA, where the user’s tokens are stored on the client.
For fetching user data client-side, we recommend using auth0-react; we have an example Next.js app using auth0-react for authentication in the project’s repository here.
Fetching user data server-side
When the server receives a request for a page, it will fetch your user’s data and construct the page at the request time. This will be slower than returning the page from a CDN but doesn’t need to display an app shell while the frontend fetches the user data.
Your typical authentication for this type of application will be that of a Regular Web App, where the user’s tokens are stored in a secure session that is not directly accessible from the client-side and therefore not vulnerable to the more common XSS attacks.
Top comments (0)