- Replace username/password login with email OTP flow - Add verify-otp screen with 6-digit code input - Add complete-profile screen for new users - Update AuthContext with refreshAuth() method - Add new API methods: requestOTP, verifyOTP, getMe, updateProfile - Backend: wellnuo.smartlaunchhub.com 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
149 lines
3.6 KiB
TypeScript
149 lines
3.6 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
|
|
import { api, setOnUnauthorizedCallback } from '@/services/api';
|
|
import type { ApiError } from '@/types';
|
|
|
|
interface User {
|
|
id: string;
|
|
email: string;
|
|
firstName: string | null;
|
|
lastName: string | null;
|
|
phone: string | null;
|
|
role: string;
|
|
// Legacy fields for backward compatibility
|
|
user_id?: number;
|
|
user_name?: string;
|
|
max_role?: number;
|
|
privileges?: string;
|
|
}
|
|
|
|
interface AuthState {
|
|
user: User | null;
|
|
isLoading: boolean;
|
|
isAuthenticated: boolean;
|
|
error: ApiError | null;
|
|
}
|
|
|
|
interface AuthContextType extends AuthState {
|
|
logout: () => Promise<void>;
|
|
clearError: () => void;
|
|
refreshAuth: () => Promise<void>;
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextType | null>(null);
|
|
|
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
|
const [state, setState] = useState<AuthState>({
|
|
user: null,
|
|
isLoading: true,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
|
|
// Check authentication on mount
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, []);
|
|
|
|
// Set up callback for 401 responses - auto logout
|
|
useEffect(() => {
|
|
setOnUnauthorizedCallback(() => {
|
|
api.logout().then(() => {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isAuthenticated: false,
|
|
error: { message: 'Session expired. Please login again.' },
|
|
});
|
|
});
|
|
});
|
|
}, []);
|
|
|
|
const checkAuth = async () => {
|
|
try {
|
|
const isAuth = await api.isAuthenticated();
|
|
if (isAuth) {
|
|
// Try to get user from new API
|
|
const response = await api.getMe();
|
|
if (response.ok && response.data) {
|
|
const userData = response.data.user;
|
|
setState({
|
|
user: {
|
|
id: userData.id,
|
|
email: userData.email,
|
|
firstName: userData.firstName,
|
|
lastName: userData.lastName,
|
|
phone: userData.phone,
|
|
role: userData.role,
|
|
// Legacy compatibility
|
|
user_name: userData.email.split('@')[0],
|
|
},
|
|
isLoading: false,
|
|
isAuthenticated: true,
|
|
error: null,
|
|
});
|
|
} else {
|
|
// Token invalid or expired
|
|
await api.logout();
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
}
|
|
} else {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isAuthenticated: false,
|
|
error: { message: 'Failed to check authentication' },
|
|
});
|
|
}
|
|
};
|
|
|
|
const refreshAuth = useCallback(async () => {
|
|
await checkAuth();
|
|
}, []);
|
|
|
|
const logout = useCallback(async () => {
|
|
setState((prev) => ({ ...prev, isLoading: true }));
|
|
|
|
try {
|
|
await api.logout();
|
|
} finally {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
const clearError = useCallback(() => {
|
|
setState((prev) => ({ ...prev, error: null }));
|
|
}, []);
|
|
|
|
return (
|
|
<AuthContext.Provider value={{ ...state, logout, clearError, refreshAuth }}>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAuth() {
|
|
const context = useContext(AuthContext);
|
|
if (!context) {
|
|
throw new Error('useAuth must be used within an AuthProvider');
|
|
}
|
|
return context;
|
|
}
|