- Convert login from username/password to email input - Add OTP verification screen with auto-login for dev email - Add dev email bypass (serter2069@gmail.com) using legacy anandk credentials - Add saveEmail/getStoredEmail methods to API service - Add email field to User type - Clean up logout to also clear stored email 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
200 lines
5.3 KiB
TypeScript
200 lines
5.3 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
|
|
import { api, setOnUnauthorizedCallback } from '@/services/api';
|
|
import type { User, ApiError } from '@/types';
|
|
|
|
// Test account for development
|
|
const DEV_EMAIL = 'serter2069@gmail.com';
|
|
|
|
interface AuthState {
|
|
user: User | null;
|
|
isLoading: boolean;
|
|
isAuthenticated: boolean;
|
|
error: ApiError | null;
|
|
}
|
|
|
|
interface OtpResult {
|
|
success: boolean;
|
|
skipOtp?: boolean;
|
|
}
|
|
|
|
interface AuthContextType extends AuthState {
|
|
requestOtp: (email: string) => Promise<OtpResult>;
|
|
verifyOtp: (email: string, code: string) => Promise<boolean>;
|
|
logout: () => Promise<void>;
|
|
clearError: () => 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) {
|
|
const user = await api.getStoredUser();
|
|
setState({
|
|
user,
|
|
isLoading: false,
|
|
isAuthenticated: !!user,
|
|
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 requestOtp = useCallback(async (email: string): Promise<OtpResult> => {
|
|
setState((prev) => ({ ...prev, isLoading: true, error: null }));
|
|
|
|
try {
|
|
// Check if dev email - skip OTP
|
|
if (email.toLowerCase() === DEV_EMAIL.toLowerCase()) {
|
|
setState((prev) => ({ ...prev, isLoading: false }));
|
|
return { success: true, skipOtp: true };
|
|
}
|
|
|
|
// For now, we'll just succeed - real OTP sending would happen via backend
|
|
// In production, this would call: await api.requestOTP(email);
|
|
setState((prev) => ({ ...prev, isLoading: false }));
|
|
return { success: true, skipOtp: false };
|
|
} catch (error) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: error instanceof Error ? error.message : 'Failed to send OTP' },
|
|
}));
|
|
return { success: false };
|
|
}
|
|
}, []);
|
|
|
|
const verifyOtp = useCallback(async (email: string, code: string): Promise<boolean> => {
|
|
setState((prev) => ({ ...prev, isLoading: true, error: null }));
|
|
|
|
try {
|
|
// Dev account bypass - use legacy credentials
|
|
if (email.toLowerCase() === DEV_EMAIL.toLowerCase()) {
|
|
// Login with legacy API using anandk credentials
|
|
const response = await api.login('anandk', 'anandk_8');
|
|
|
|
if (response.ok && response.data) {
|
|
const user: User = {
|
|
user_id: response.data.user_id,
|
|
user_name: 'anandk',
|
|
email: email,
|
|
max_role: response.data.max_role,
|
|
privileges: response.data.privileges,
|
|
};
|
|
|
|
// Save email to storage
|
|
await api.saveEmail(email);
|
|
|
|
setState({
|
|
user,
|
|
isLoading: false,
|
|
isAuthenticated: true,
|
|
error: null,
|
|
});
|
|
|
|
return true;
|
|
}
|
|
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: 'Login failed' },
|
|
}));
|
|
return false;
|
|
}
|
|
|
|
// For regular users - verify OTP via backend
|
|
// In production: const response = await api.verifyOTP(email, code);
|
|
// For now, fail as we don't have real OTP backend yet
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: 'OTP verification not implemented yet. Use dev account.' },
|
|
}));
|
|
return false;
|
|
} catch (error) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: error instanceof Error ? error.message : 'Verification failed' },
|
|
}));
|
|
return false;
|
|
}
|
|
}, []);
|
|
|
|
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, requestOtp, verifyOtp, logout, clearError }}>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAuth() {
|
|
const context = useContext(AuthContext);
|
|
if (!context) {
|
|
throw new Error('useAuth must be used within an AuthProvider');
|
|
}
|
|
return context;
|
|
}
|