132 lines
2.6 KiB
Markdown
132 lines
2.6 KiB
Markdown
# Auth Frontend
|
|
|
|
The frontend module implements authentication screens, session provider, current-user loading, and route guards.
|
|
|
|
Source root:
|
|
|
|
```txt
|
|
apps/admin/src/core/Auth/
|
|
```
|
|
|
|
## Directory Structure
|
|
|
|
```txt
|
|
Auth/
|
|
config/ Routes, messages, translations.
|
|
data/
|
|
api/ Raw auth/profile API calls and DTOs.
|
|
mappers/ Current-user DTO mapping.
|
|
stores/ Local token storage helpers.
|
|
entities/ Auth and user types.
|
|
pages/ Sign-in page.
|
|
providers/ AuthProvider and context.
|
|
view/
|
|
forms/ Sign-in form.
|
|
layouts/ Auth layouts.
|
|
widgets/ Auth guard.
|
|
```
|
|
|
|
## Routes
|
|
|
|
Frontend route config:
|
|
|
|
```txt
|
|
config/routing.tsx
|
|
```
|
|
|
|
Mounted module path:
|
|
|
|
```txt
|
|
/auth/*
|
|
```
|
|
|
|
| Route | Page | Purpose |
|
|
| -------------- | ------------ | --------------------- |
|
|
| `/auth/signin` | `SignInPage` | Admin sign-in screen. |
|
|
|
|
The index route redirects to `signin`.
|
|
|
|
## AuthProvider
|
|
|
|
Provider file:
|
|
|
|
```txt
|
|
providers/AuthProvider/AuthProvider.tsx
|
|
```
|
|
|
|
Exposes:
|
|
|
|
```ts
|
|
auth;
|
|
user;
|
|
loading;
|
|
login(email, password);
|
|
logout();
|
|
verify();
|
|
getUser();
|
|
updateUser(payload);
|
|
saveAuth(auth);
|
|
setUser(user);
|
|
```
|
|
|
|
Important behavior:
|
|
|
|
- `login` stores the access token, then loads the current user.
|
|
- `verify` reloads current user when a token exists.
|
|
- `logout` calls the backend, clears auth state, and clears React Query cache.
|
|
- `updateUser` calls `/admin/update-profile` and updates current user state.
|
|
|
|
## API Boundary
|
|
|
|
Raw API calls:
|
|
|
|
```txt
|
|
data/api/api.ts
|
|
data/api/dto.ts
|
|
```
|
|
|
|
| Method | Backend Route | Purpose |
|
|
| ------------ | --------------------------- | ---------------------------------- |
|
|
| `login` | `POST /auth/login` | Create bearer token. |
|
|
| `logout` | `POST /auth/logout` | Invalidate current token. |
|
|
| `getUser` | `GET /auth/user` | Load current user and permissions. |
|
|
| `updateUser` | `PUT /admin/update-profile` | Update current admin profile. |
|
|
|
|
Current-user DTO mapping:
|
|
|
|
```txt
|
|
data/mappers/userMapper.ts
|
|
```
|
|
|
|
## Token Storage
|
|
|
|
Token persistence helpers live in:
|
|
|
|
```txt
|
|
data/stores/localStorage.ts
|
|
```
|
|
|
|
Keep token storage behind these helpers so storage format changes stay local.
|
|
|
|
## Route Guard
|
|
|
|
Auth guard widget:
|
|
|
|
```txt
|
|
view/widgets/AuthGuardWidget.tsx
|
|
```
|
|
|
|
Use this widget to protect authenticated app routes. It coordinates auth loading and redirects unauthenticated users to auth routes.
|
|
|
|
## Translations
|
|
|
|
Translations are module-local:
|
|
|
|
```txt
|
|
config/messages.ts
|
|
config/translation/en.json
|
|
config/translation/uk.json
|
|
```
|
|
|
|
Use only `AUTH.*` keys inside this module.
|