WellNuo/contexts/AuthContext.tsx
Sergei ddfe5c7bd6 Add OTP-based email authentication flow
- 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>
2025-12-19 16:53:17 -08:00

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;
}