Skip to content

Authentication and authorization ​

Flow ​

text
Login form
  ↓ POST /auth/login
Auth response (user + token fields)
  ↓
Access/refresh token storage
  ↓
Axios request interceptor
  ↓ Authorization: Bearer <token>, when token exists
Backend API
  ↓ HTTP 401
Refresh callback → refresh success retries original request
  ↓ refresh failure
Clear local auth state and redirect to /login

Route guard and user state ​

App.tsx initializes from getCurrentUser() and checks whether the auth token exists. Protected route elements redirect to /login when the app's user state is empty. The login form stores user data in local storage for Remember Me and session storage otherwise, then updates useAuth and the application callback.

Logout ​

The Header's logout handler calls clearUser() from front/src/utils/storage.ts and navigates to /login; it does not call authService.logout() in the inspected Header implementation. The separate auth service method calls POST /auth/logout and clears tokens/user data.

Permissions ​

front/src/utils/permissions.ts orders levels as none < view < edit < full < admin. Components/pages can check permission levels. This is a frontend UI rule; server enforcement is not available from frontend source code.

Password flows ​

  • Password change: protected route, client-side confirmation and minimum length checks, then POST /auth/change-password.
  • Forgot password: login form calls POST /password-reset/forgot-password.
  • Reset password: public /reset-password route calls POST /password-reset/reset-password.

Relevant implementation ​

  • front/src/App.tsx
  • front/src/hooks/useAuth.ts
  • front/src/services/api/client.ts
  • front/src/services/api/authService.ts
  • front/src/services/storage/localStorage.ts
  • front/src/utils/permissions.ts

See Authentication API.