- Backend: Update Legacy API credentials to robster/rob2 - Frontend: ROOM_LOCATIONS with icons and legacyCode mapping - Device Settings: Modal picker for room selection - api.ts: Bidirectional conversion (code ↔ name) - Various UI/UX improvements across screens PRD-DEPLOYMENT.md completed (Score: 9/10) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
248 lines
6.8 KiB
TypeScript
248 lines
6.8 KiB
TypeScript
import { api, setOnUnauthorizedCallback } from '@/services/api';
|
|
import type { ApiError, User } from '@/types';
|
|
import React, { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
|
|
|
|
interface AuthState {
|
|
user: User | null;
|
|
isLoading: boolean;
|
|
isInitializing: boolean;
|
|
isAuthenticated: boolean;
|
|
error: ApiError | null;
|
|
}
|
|
|
|
type CheckEmailResult = { exists: boolean; name?: string | null };
|
|
type OtpResult = { success: boolean; skipOtp: boolean };
|
|
type UserProfileUpdate = Partial<User> & {
|
|
firstName?: string | null;
|
|
lastName?: string | null;
|
|
phone?: string | null;
|
|
email?: string;
|
|
};
|
|
|
|
interface AuthContextType extends AuthState {
|
|
checkEmail: (email: string) => Promise<CheckEmailResult>;
|
|
requestOtp: (email: string) => Promise<OtpResult>;
|
|
verifyOtp: (email: string, code: string) => Promise<boolean>;
|
|
logout: () => Promise<void>;
|
|
clearError: () => void;
|
|
refreshAuth: () => Promise<void>;
|
|
updateUser: (updates: UserProfileUpdate) => void;
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextType | null>(null);
|
|
|
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
|
const [state, setState] = useState<AuthState>({
|
|
user: null,
|
|
isLoading: false,
|
|
isInitializing: true,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
|
|
const checkAuth = useCallback(async () => {
|
|
try {
|
|
const isAuth = await api.isAuthenticated();
|
|
|
|
if (isAuth) {
|
|
const user = await api.getStoredUser();
|
|
|
|
setState({
|
|
user,
|
|
isLoading: false,
|
|
isInitializing: false,
|
|
isAuthenticated: !!user,
|
|
error: null,
|
|
});
|
|
} else {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isInitializing: false,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isInitializing: false,
|
|
isAuthenticated: false,
|
|
error: { message: 'Failed to check authentication' },
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
// Check authentication on mount
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, [checkAuth]);
|
|
|
|
// Auto-logout when WellNuo API returns 401 (token expired)
|
|
// Token now expires after 365 days, so this should rarely happen
|
|
useEffect(() => {
|
|
setOnUnauthorizedCallback(() => {
|
|
api.logout().then(() => {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isInitializing: false,
|
|
isAuthenticated: false,
|
|
error: { message: 'Session expired. Please login again.' },
|
|
});
|
|
});
|
|
});
|
|
}, []);
|
|
|
|
const checkEmail = useCallback(async (email: string): Promise<CheckEmailResult> => {
|
|
setState((prev) => ({ ...prev, isLoading: true, error: null }));
|
|
|
|
try {
|
|
// Dev email - check via API like any other user
|
|
// (no more bypass - dev user needs to go through OTP flow)
|
|
|
|
// Check email via API
|
|
const response = await api.checkEmail(email);
|
|
|
|
if (response.ok && response.data) {
|
|
setState((prev) => ({ ...prev, isLoading: false }));
|
|
return { exists: response.data.exists, name: response.data.name };
|
|
}
|
|
|
|
// API failed - assume new user
|
|
setState((prev) => ({ ...prev, isLoading: false }));
|
|
return { exists: false };
|
|
} catch (error) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: 'Network error. Please check your connection.' },
|
|
}));
|
|
return { exists: false };
|
|
}
|
|
}, []);
|
|
|
|
const requestOtp = useCallback(async (email: string): Promise<OtpResult> => {
|
|
setState((prev) => ({ ...prev, isLoading: true, error: null }));
|
|
|
|
try {
|
|
// Dev email also goes through normal OTP flow now
|
|
// (no more bypass - need real OTP for WellNuo token)
|
|
|
|
// Send OTP via Brevo API
|
|
const response = await api.requestOTP(email);
|
|
|
|
if (response.ok) {
|
|
setState((prev) => ({ ...prev, isLoading: false }));
|
|
return { success: true, skipOtp: false };
|
|
}
|
|
|
|
// API failed
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: 'Failed to send verification code. Please try again.' },
|
|
}));
|
|
return { success: false, skipOtp: false };
|
|
} catch (error) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: 'Network error. Please check your connection.' },
|
|
}));
|
|
return { success: false, skipOtp: false };
|
|
}
|
|
}, []);
|
|
|
|
const verifyOtp = useCallback(async (email: string, code: string): Promise<boolean> => {
|
|
setState((prev) => ({ ...prev, isLoading: true, error: null }));
|
|
|
|
try {
|
|
// Verify OTP via WellNuo API (for all users including dev)
|
|
const verifyResponse = await api.verifyOTP(email, code);
|
|
|
|
if (verifyResponse.ok && verifyResponse.data) {
|
|
const user: User = {
|
|
user_id: verifyResponse.data.user.id,
|
|
email: email,
|
|
firstName: verifyResponse.data.user.first_name || null,
|
|
lastName: verifyResponse.data.user.last_name || null,
|
|
max_role: 'USER',
|
|
privileges: '',
|
|
};
|
|
|
|
setState({
|
|
user,
|
|
isLoading: false,
|
|
isInitializing: false,
|
|
isAuthenticated: true,
|
|
error: null,
|
|
});
|
|
|
|
return true;
|
|
}
|
|
|
|
// Wrong OTP code
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: 'Invalid verification code. Please try again.' },
|
|
}));
|
|
return false;
|
|
} catch (error) {
|
|
setState((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
error: { message: error instanceof Error ? error.message : 'Verification failed' },
|
|
}));
|
|
return false;
|
|
}
|
|
}, []);
|
|
|
|
const refreshAuth = useCallback(async () => {
|
|
await checkAuth();
|
|
}, [checkAuth]);
|
|
|
|
const updateUser = useCallback((updates: UserProfileUpdate) => {
|
|
setState((prev) => {
|
|
if (!prev.user) return prev;
|
|
return { ...prev, user: { ...prev.user, ...updates } };
|
|
});
|
|
}, []);
|
|
|
|
const logout = useCallback(async () => {
|
|
setState((prev) => ({ ...prev, isLoading: true }));
|
|
|
|
try {
|
|
await api.logout();
|
|
} finally {
|
|
setState({
|
|
user: null,
|
|
isLoading: false,
|
|
isInitializing: false,
|
|
isAuthenticated: false,
|
|
error: null,
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
const clearError = useCallback(() => {
|
|
setState((prev) => ({ ...prev, error: null }));
|
|
}, []);
|
|
|
|
return (
|
|
<AuthContext.Provider value={{ ...state, checkEmail, requestOtp, verifyOtp, logout, clearError, refreshAuth, updateUser }}>
|
|
{children}
|
|
</AuthContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useAuth() {
|
|
const context = useContext(AuthContext);
|
|
if (!context) {
|
|
throw new Error('useAuth must be used within an AuthProvider');
|
|
}
|
|
return context;
|
|
}
|