Problem statement
The SPA security model used by auth0-react is different from the Web Application security model used by nextjs-auth0. What are the security implications for both of these models?
Solution
Generally, it is a comparison between a Single Page App (SPA) (auth0-react) and a Regular Web App (nexts-auth0). To give a very high-level overview, with the SPA implementation, the tokens are stored in memory (by default) or browser storage, so there is a risk of XSS. When tokens are stored in memory, Auth0’s SPA SDKs mitigate this risk by handling in-memory storage within web workers. With the Regular Web App implementation, the session is stored in an HttpOnly cookie, which mitigates XSS. With the session cookies, there is a risk of CSRF, but this is mitigated by using a samesite lax cookie. Both of these SDKS do Authorization Code Flow with PKCE, so there’s no difference there. There is also Public Client (SPA) vs Confidential Client (Regular Web App) and secrets exposure. Public clients cannot securely store secrets like confidential clients can, so our SPA SDKs are built not to store the client secret. By contrast, the nextjs SDK can safely store the secret used to encrypt the cookie and the client secret as long as they are managed properly (in a .env file, excluded from your application code and the source control system).
The nextjs SDK is different from other Regular Web App SDKs in that the Access token is stored in an encrypted HttpOnly cookie. Please note the following associated protections:
- XSS protection. HttpOnly prevents client-side scripts from reading the cookie.
- Confidentiality of cookie contents via encryption. If, for some reason, the cookie is leaked/sniffed, contents cannot be inspected by anyone except the server the cookie was originally intended for.