New-Thanasoft/thanasoft-front/AUTH_SETUP.md

Authentication Setup - Token Persistence

✅ Fixed: Token persists across page refreshes

The Problem

After login, refreshing the page redirected to /login because the auth state wasn't being restored from the saved token.

The Solution

No plugin needed! The token is already saved in localStorage. I updated the router guard to check for the token on page load.

---

How it works

1. Login Flow

User submits login form
  ↓
POST /api/auth/login
  ↓
Backend returns: { success: true, data: { user, token } }
  ↓
Token saved to localStorage.setItem("auth_token", token)
  ↓
User saved to Pinia store
  ↓
Redirect to dashboard

2. Page Refresh Flow

User refreshes page
  ↓
Router guard runs (beforeEach)
  ↓
Check: auth.checked? No
  ↓
Check: localStorage.getItem("auth_token")? Yes
  ↓
Set auth.token = token (from localStorage)
  ↓
Fetch user: GET /api/auth/user (with Bearer token)
  ↓
Backend returns user data
  ↓
auth.user = userData
auth.checked = true
  ↓
User stays on protected route

3. Logout Flow

User clicks logout
  ↓
POST /api/auth/logout
  ↓
localStorage.removeItem("auth_token")
  ↓
auth.user = null
auth.token = null
  ↓
Redirect to /login

---

Files Modified

src/services/auth.ts

• login() saves token to localStorage
• logout() removes token from localStorage
• me() fetches user from /api/auth/user
• getToken() retrieves token from localStorage

src/services/http.ts

• Automatically adds Authorization: Bearer {token} header to all requests
• Reads token from localStorage on every request

src/stores/auth.ts

• Stores both user and token in state
• isAuthenticated checks for both user AND token
• login() extracts user and token from API response

src/router/index.js

• On every navigation, checks if token exists in localStorage
• If token exists and auth not checked yet:
  1. Sets auth.token = token
  2. Fetches user data with auth.fetchMe()
  3. If successful, user stays authenticated
  4. If fails (invalid token), clears token and redirects to login

src/views/pages/Login.vue

• Form submits to authStore.login()
• Shows loading state and error messages
• Redirects to dashboard on success

---

API Endpoints Used

Endpoint	Method	Purpose	Auth Required
/api/auth/login	POST	Login with email/password	No
/api/auth/user	GET	Get current user	Yes (Bearer token)
/api/auth/logout	POST	Logout	Yes (Bearer token)

---

Testing

Test 1: Fresh Login

1. Go to /login
2. Enter credentials: admin@admin.com
3. Click "Se connecter"
4. Should redirect to /dashboards/dashboard-default
5. Check localStorage: auth_token should be present

Test 2: Page Refresh

1. After login, refresh the page
2. Should stay on dashboard (not redirect to login)
3. Check console: should see "Fetching user from /api/auth/user"

Test 3: Invalid Token

1. Manually edit token in localStorage to garbage value
2. Refresh page
3. Should clear token and redirect to login
4. Check console: "Invalid token, clearing auth"

Test 4: Logout

1. After login, click logout
2. Should redirect to /login
3. Check localStorage: auth_token should be removed

---

Troubleshooting

"Still redirects to /login after refresh"

• Open browser DevTools → Network tab
• Refresh page
• Check if GET /api/auth/user is called with Authorization: Bearer ... header
• Check response:
  • 200 OK: Token is valid, check if user data is correct format
  • 401 Unauthorized: Token is invalid or backend isn't verifying correctly

"Token is saved but still logged out"

• Check auth.isAuthenticated in Vue DevTools
• Verify both auth.user and auth.token are set
• If only token is set, check if /api/auth/user endpoint returns user data

"Backend doesn't accept token"

• Verify backend expects: Authorization: Bearer {token}
• Check if backend route has auth middleware
• Test token manually: curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:8000/api/auth/user

---

No Plugin Required!

You mentioned Pinia Persisted or Vuex Persisted - you don't need them because:

1. Token is already saved in localStorage directly
2. Router guard reads from localStorage on app load
3. Token is automatically added to all API requests
4. This is simpler and more explicit than a plugin

The only state that needs to persist is the token (string), and we're handling that manually.