Loading…
Choose how your application stores authentication tokens. Each strategy has different security and persistence characteristics.
Both tokens in HttpOnly cookies
The recommended approach for production apps. Both access and refresh tokens are stored in HttpOnly cookies, making them invisible to JavaScript and protected from XSS attacks.
Access in memory, refresh in cookie
Access token stored in React state (lost on page refresh), refresh token in HttpOnly cookie. Good balance between security and flexibility.
Both tokens in localStorage
Simple but less secure. Both tokens stored in localStorage, accessible to JavaScript. Only recommended for prototypes or low-risk applications.
Both tokens in sessionStorage
Similar to localStorage but clears when tab/browser closes. Slightly better security due to tab isolation.
| Feature | Cookie-Based | Memory+Cookie | LocalStorage | SessionStorage |
|---|---|---|---|---|
| XSS Protection | ✅ Full | ✅ Refresh safe | ❌ None | ❌ None |
| Persists Access Token | ✅ Yes | ❌ No | ✅ Yes | ❌ No |
| Persists Refresh Token | ✅ Yes | ✅ Yes | ✅ Yes | ❌ No |
| Cross-Tab Support | ✅ Yes | ❌ No | ✅ Yes | ❌ No |
| SSR Compatible | ✅ Yes | ⚠️ Extra work | ⚠️ Extra work | ⚠️ Extra work |
| Implementation | Low | Medium | Low | Low |
| Client Token Access | ❌ No | ✅ Yes | ✅ Yes | ✅ Yes |
The JWT auth frontend works with any backend (Node.js, Python, Go, etc.). Your backend should implement these endpoints:
| Method | Endpoint | Description |
|---|---|---|
| POST | /auth/register | Create new account |
| POST | /auth/login | Sign in with credentials |
| POST | /auth/logout | Sign out (clear tokens) |
| POST | /auth/refresh | Get new access token |
| GET | /auth/me | Get current user |
| POST | /auth/forgot-password | Send reset email |
| POST | /auth/reset-password | Reset with token |
| POST | /auth/change-password | Change password |
| GET | /auth/profile | Get profile |
| PUT | /auth/profile | Update profile |
| DELETE | /auth/profile | Delete account |
$ npx nexstruct my-app --auth jwt-auth --token-strategy cookie-based # or answer the prompts: ? Authentication: JWT against your own backend ? Where should tokens live? HttpOnly cookies set by your backend (recommended)
$ cp .env.example .env.local # .env.local — the only setting the frontend needs NEXT_PUBLIC_API_URL=http://localhost:4000 # your backend (see the endpoint table)
$ cd my-app $ npm install $ npm run dev