feat: refactor frontend routing and authentication
- Changed root div ID from 'root' to 'app' in index.html. - Updated package.json to include new dependencies for routing and state management. - Removed App component and replaced it with a router setup in main.tsx. - Added route definitions for login, about, and index pages. - Implemented authentication logic using Zustand for state management. - Created API client with Axios for handling requests and token management. - Added CORS support in the backend API. - Updated schema for login requests to use camelCase.
This commit is contained in:
37
libertas-frontend/src/features/auth/use-auth.ts
Normal file
37
libertas-frontend/src/features/auth/use-auth.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import type { User } from "@/domain/types"
|
||||
import { useAuthStorage } from "@/hooks/use-auth-storage"
|
||||
import apiClient from "@/services/api-client"
|
||||
import { useNavigate } from "@tanstack/react-router"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
|
||||
type LoginCredentials = {
|
||||
usernameOrEmail: string
|
||||
password: string
|
||||
}
|
||||
|
||||
type LoginResponse = {
|
||||
token: string
|
||||
user: User
|
||||
}
|
||||
|
||||
const login = async (credentials: LoginCredentials): Promise<LoginResponse> => {
|
||||
const { data } = await apiClient.post('/auth/login', credentials)
|
||||
return data
|
||||
}
|
||||
|
||||
export const useLogin = () => {
|
||||
const navigate = useNavigate()
|
||||
const { setToken } = useAuthStorage()
|
||||
|
||||
return useMutation({
|
||||
mutationFn: login,
|
||||
onSuccess: (data) => {
|
||||
setToken(data.token, data.user)
|
||||
navigate({ to: '/' })
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Login failed:', error)
|
||||
// TODO: Add user-facing error toast
|
||||
},
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user