feat(web): add login and register pages with auth store
- API client with token refresh interceptor - Auth API functions (login, register, logout, getMe) - Auth store with Zustand persistence - Auth layout with centered card design - Login page with form validation - Register page with company and user data - Environment example file Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
22
apps/web/lib/api/auth.ts
Normal file
22
apps/web/lib/api/auth.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { apiClient } from './client';
|
||||
import type { LoginRequest, RegisterRequest, LoginResponse } from '@horux/shared';
|
||||
|
||||
export async function login(data: LoginRequest): Promise<LoginResponse> {
|
||||
const response = await apiClient.post<LoginResponse>('/auth/login', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function register(data: RegisterRequest): Promise<LoginResponse> {
|
||||
const response = await apiClient.post<LoginResponse>('/auth/register', data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
export async function logout(): Promise<void> {
|
||||
const refreshToken = localStorage.getItem('refreshToken');
|
||||
await apiClient.post('/auth/logout', { refreshToken });
|
||||
}
|
||||
|
||||
export async function getMe(): Promise<LoginResponse['user']> {
|
||||
const response = await apiClient.get('/auth/me');
|
||||
return response.data.user;
|
||||
}
|
||||
52
apps/web/lib/api/client.ts
Normal file
52
apps/web/lib/api/client.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000/api',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
apiClient.interceptors.request.use((config) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const token = localStorage.getItem('accessToken');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => response,
|
||||
async (error) => {
|
||||
const originalRequest = error.config;
|
||||
|
||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||
originalRequest._retry = true;
|
||||
|
||||
try {
|
||||
const refreshToken = localStorage.getItem('refreshToken');
|
||||
if (refreshToken) {
|
||||
const response = await axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000/api'}/auth/refresh`,
|
||||
{ refreshToken }
|
||||
);
|
||||
|
||||
const { accessToken, refreshToken: newRefreshToken } = response.data;
|
||||
localStorage.setItem('accessToken', accessToken);
|
||||
localStorage.setItem('refreshToken', newRefreshToken);
|
||||
|
||||
originalRequest.headers.Authorization = `Bearer ${accessToken}`;
|
||||
return apiClient(originalRequest);
|
||||
}
|
||||
} catch {
|
||||
localStorage.removeItem('accessToken');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/login';
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user