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 of these models?
Solution
Here is a high-level overview:
With the SPA implementation, the tokens are stored in memory by default or browser storage, so there’s a risk of XSS. When tokens are stored in memory, our 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’s a risk of CSRF, but this is mitigated by using the same site lax cookie.
Both SDKS do Authorization Code Flow with PKCE, so no difference there.
Then, there’s also Public Client (SPA) vs. Confidential Client (Regular Web App) and secrets exposure.
Public clients cannot securely store secrets as confidential clients can, so our SPA SDKs are built not to store the client’s 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.