akai-org / akai-org/put-wiki

Integration with backend JWT authentication

Abierto
#105 0 comentarios 0 reacciones 1 asignado Reclamado por @zakhildev Ver en GitHub
area:frontend type:task
Lenguaje dominante
TypeScript
Estrellas
6
Forks
3
Merge medio
3 d 17 h
PR fusionados (30 d)
15

Descripción

## Summary
Integrate the backend JWT authentication flow into the frontend client. The backend handles the USOS OAuth exchange and generates an internal JWT. The frontend must persist this token, automatically attach it to authenticated requests, and refresh it in the background when it expires.

## Acceptance criteria
- [ ] The JWT (and refresh token, if applicable) is stored securely on the client side, ensuring the user remains logged in across page reloads.
- [ ] All requests to backend routes automatically include the JWT.
- [ ] If an API request returns a 401 Unauthorized (indicating a stale token), the application intercepts the response, calls the backend refresh endpoint in the background, and retries the original request.
- [ ] If the silent refresh fails (e.g. the refresh token itself is expired), the app clears the stored tokens, updates the UI auth state to logged out and redirects the user to the login screen.
- [ ] The token interceptor and refresh logic must be covered by unit tests (with vitest). You don't need to test react components for this, but plain logic instead. You should mock API responses (I highly recommend using [MSW](https://mswjs.io/)) to prove that a 401 Unauthorized correctly triggers the background refresh and retries the original request.

## Notes
- Decide on the most appropriate storage mechanism (e.g. localStorage, sessionStorage, or coordinating with backend for HttpOnly cookies) while keeping security implications in mind. Please justify your choice during code review.
- Check backend OpenAPI documentation (or contact with the backend developers) to get the exact endpoint URLs for the token exchange and refresh routes, as well as the expected JSON payload structures.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Start by reading the frontend client authentication flow and the backend OpenAPI documentation to identify the token exchange and refresh endpoints and payloads. Run the Vitest unit tests with mocked API responses, and consider the work done when token persistence, request interception, refresh-and-retry behavior, logout handling, and the specified UI redirect are covered.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
typescript
Área
authentication, frontend
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.