jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Compare commits

base: jketreno:d7a81481a25d0c8b9e5936f76c139d4c3d35a053
Branches Tags
jketreno:main
jketreno:menu-restructure
jketreno:deployed-250528
..
compare: jketreno:35701d971937493aff3bd32fe9ede1dd21bc8841
Branches Tags
jketreno:main
jketreno:menu-restructure
jketreno:deployed-250528

No commits in common. "d7a81481a25d0c8b9e5936f76c139d4c3d35a053" and "35701d971937493aff3bd32fe9ede1dd21bc8841" have entirely different histories.
d7a81481a2 ... 35701d9719

14 changed files with 1672 additions and 1677 deletions
Show Stats Expand all files Collapse all files

307
frontend/public/docs/authentication.md
View File

@ -1,307 +0,0 @@
This documents all authentication flows in Backstory. Here are the key flows explained:
# 🔐 Core Authentication Flows
1. Registration & Email Verification
`Registration → Email Sent → Email Verification → Account Activation → Login`
Includes resend verification with rate limiting
Handles expired tokens and error cases
2. Login on Trusted Device
`Login → Credentials Check → Device Trust Check → Immediate Access`
Fastest path with access/refresh tokens issued immediately
3. Login on New Device (MFA)
`Login → Credentials Check → New Device Detected → Auto-send MFA Email → MFA Dialog → Code Verification → Access Granted`
Optional device trust for future logins
4. App Initialization & Token Management
`App Start → Check Tokens → Auto-refresh if needed → Load Dashboard`
Handles expired tokens gracefully
# 🛡️ Security Features Covered
## Rate Limiting & Protection
* Login attempt limiting
* MFA resend limiting (max 3)
* Verification email rate limiting
* Account lockout for abuse
## Token Management
* Access token expiration handling
* Refresh token rotation
* Token blacklisting on logout
* Force logout on revoked tokens
## Device Security
* Device fingerprinting
* Trusted device management
* MFA for new devices
* Device removal capabilities
# 🔄 Key Decision Points
1. Has Valid Tokens? → Dashboard vs Login
2. Trusted Device? → Immediate access vs MFA
3. Account Active? → Login vs Error message
4. MFA Code Valid? → Success vs Retry/Lock
5. Token Expired? → Refresh vs Re-login
# 📱 User Experience Flows
## Happy Path (Returning User)
`App Start → Valid Tokens → Dashboard (2 steps)`
## New User Journey
`Registration → Email Verification → Login → Dashboard (4 steps)`
## New Device Login
`Login → MFA Email → Code Entry → Dashboard (3 steps)`
## 🔧 Implementation Notes
**Background Tasks**: Email sending doesn't block user flow
**Error Recovery**: Clear paths back to working states
**Admin Features**: User management and security monitoring
**Future Features**: Password reset flow is mapped out
# Flow Diagram
This diagram serves as the complete authentication architecture reference, showing every possible user journey and system state transition.
```
flowchart TD
%% ================================
%% REGISTRATION FLOWS
%% ================================
Start([User Visits App]) --> CheckTokens{Has Valid Tokens?}
CheckTokens -->|Yes| LoadUser[Load User Profile]
CheckTokens -->|No| LandingPage[Landing Page]
LandingPage --> RegisterChoice{Registration Type}
RegisterChoice --> CandidateReg[Candidate Registration Form]
RegisterChoice --> EmployerReg[Employer Registration Form]
RegisterChoice --> LoginPage[Login Page]
%% Candidate Registration Flow
CandidateReg --> CandidateValidation{Form Valid?}
CandidateValidation -->|No| CandidateReg
CandidateValidation -->|Yes| CandidateSubmit[POST /candidates]
CandidateSubmit --> CandidateCheck{User Exists?}
CandidateCheck -->|Yes| CandidateError[Show Error: User Exists]
CandidateError --> CandidateReg
CandidateCheck -->|No| CandidateEmailSent[Auto-send Verification Email]
CandidateEmailSent --> CandidateSuccess[Show Success Dialog]
%% Employer Registration Flow
EmployerReg --> EmployerValidation{Form Valid?}
EmployerValidation -->|No| EmployerReg
EmployerValidation -->|Yes| EmployerSubmit[POST /employers]
EmployerSubmit --> EmployerCheck{User Exists?}
EmployerCheck -->|Yes| EmployerError[Show Error: User Exists]
EmployerError --> EmployerReg
EmployerCheck -->|No| EmployerEmailSent[Auto-send Verification Email]
EmployerEmailSent --> EmployerSuccess[Show Success Dialog]
%% Email Verification Flow
CandidateSuccess --> CheckEmail[User Checks Email]
EmployerSuccess --> CheckEmail
CheckEmail --> ClickLink[Click Verification Link]
ClickLink --> VerifyEmail[GET /verify-email?token=xxx]
VerifyEmail --> TokenValid{Token Valid & Not Expired?}
TokenValid -->|No| VerifyError[Show Error: Invalid/Expired Token]
TokenValid -->|Yes| ActivateAccount[Activate Account in DB]
ActivateAccount --> VerifySuccess[Show Success: Account Activated]
VerifySuccess --> RedirectLogin[Redirect to Login]
%% Resend Verification
VerifyError --> ResendOption{Resend Verification?}
ResendOption -->|Yes| ResendEmail[POST /auth/resend-verification]
ResendEmail --> RateLimitCheck{Within Rate Limits?}
RateLimitCheck -->|No| ResendError[Show Rate Limit Error]
RateLimitCheck -->|Yes| FindPending{Pending Verification Found?}
FindPending -->|No| ResendGeneric[Generic Success Message]
FindPending -->|Yes| ResendSuccess[New Email Sent]
ResendSuccess --> CheckEmail
ResendGeneric --> CheckEmail
ResendOption -->|No| RegisterChoice
%% ================================
%% LOGIN FLOWS
%% ================================
RedirectLogin --> LoginPage
LoginPage --> LoginForm[Enter Email/Password]
LoginForm --> LoginSubmit[POST /auth/login]
LoginSubmit --> CredentialsValid{Credentials Valid?}
CredentialsValid -->|No| LoginError[Show Login Error]
LoginError --> LoginForm
CredentialsValid -->|Yes| AccountActive{Account Active?}
AccountActive -->|No| AccountError[Show Account Status Error]
AccountError --> LoginForm
AccountActive -->|Yes| DeviceCheck{Trusted Device?}
%% Trusted Device Flow
DeviceCheck -->|Yes| TrustedLogin[Update Last Login]
TrustedLogin --> IssueTokens[Issue Access + Refresh Tokens]
IssueTokens --> LoginSuccess[Store Tokens Locally]
LoginSuccess --> LoadUser
%% New Device Flow (MFA Required)
DeviceCheck -->|No| NewDevice[Detect New Device]
NewDevice --> GenerateMFA[Generate 6-digit MFA Code]
GenerateMFA --> SendMFAEmail[Auto-send MFA Email]
SendMFAEmail --> MFAResponse[Return MFA Required Response]
MFAResponse --> ShowMFADialog[Show MFA Input Dialog]
ShowMFADialog --> MFAInput[User Enters 6-digit Code]
MFAInput --> MFASubmit[POST /auth/mfa/verify]
MFASubmit --> MFAValid{Code Valid & Not Expired?}
MFAValid -->|No| MFAError[Show MFA Error]
MFAError --> MFARetry{Attempts < 5?}
MFARetry -->|Yes| MFAInput
MFARetry -->|No| MFALocked[Lock MFA Session]
MFALocked --> LoginForm
MFAValid -->|Yes| RememberDevice{Remember Device?}
RememberDevice -->|Yes| AddTrustedDevice[Add to Trusted Devices]
RememberDevice -->|No| SkipTrust[Skip Adding Device]
AddTrustedDevice --> MFASuccess[Update Last Login]
SkipTrust --> MFASuccess
MFASuccess --> IssueTokens
%% MFA Resend Flow
ShowMFADialog --> MFAResend{Need Resend?}
MFAResend -->|Yes| ResendMFA[POST /auth/mfa/resend]
ResendMFA --> ResendLimit{< 3 Resends?}
ResendLimit -->|No| ResendLocked[Max Resends Reached]
ResendLocked --> LoginForm
ResendLimit -->|Yes| NewMFACode[Generate New Code]
NewMFACode --> SendNewMFA[Send New Email]
SendNewMFA --> ShowMFADialog
%% ================================
%% APP INITIALIZATION & TOKEN MANAGEMENT
%% ================================
LoadUser --> TokenExpired{Access Token Expired?}
TokenExpired -->|No| Dashboard[Load Dashboard]
TokenExpired -->|Yes| RefreshCheck{Has Refresh Token?}
RefreshCheck -->|No| ClearTokens[Clear Local Storage]
ClearTokens --> LandingPage
RefreshCheck -->|Yes| RefreshAttempt[POST /auth/refresh]
RefreshAttempt --> RefreshValid{Refresh Token Valid?}
RefreshValid -->|No| ClearTokens
RefreshValid -->|Yes| NewTokens[Issue New Access Token]
NewTokens --> UpdateStorage[Update Local Storage]
UpdateStorage --> Dashboard
%% ================================
%% LOGOUT FLOWS
%% ================================
Dashboard --> LogoutChoice{Logout Type}
LogoutChoice --> SingleLogout[Logout This Device]
LogoutChoice --> LogoutAll[Logout All Devices]
SingleLogout --> LogoutRequest[POST /auth/logout]
LogoutRequest --> BlacklistTokens[Blacklist Tokens]
BlacklistTokens --> LogoutComplete[Clear Local Storage]
LogoutAll --> LogoutAllRequest[POST /auth/logout-all]
LogoutAllRequest --> RevokeAllTokens[Revoke All User Tokens]
RevokeAllTokens --> LogoutComplete
LogoutComplete --> LandingPage
%% ================================
%% ERROR HANDLING & EDGE CASES
%% ================================
Dashboard --> TokenRevoked{Token Blacklisted?}
TokenRevoked -->|Yes| ForceLogout[Force Logout]
ForceLogout --> ClearTokens
%% Rate Limiting
LoginForm --> RateLimit{Too Many Attempts?}
RateLimit -->|Yes| AccountLock[Temporary Account Lock]
AccountLock --> LockMessage[Show Lockout Message]
LockMessage --> WaitPeriod[Wait for Unlock]
WaitPeriod --> LoginForm
%% Network Errors
LoginSubmit --> NetworkError{Network Error?}
NetworkError -->|Yes| RetryLogin[Show Retry Option]
RetryLogin --> LoginForm
%% ================================
%% ADMIN FLOWS (Optional)
%% ================================
Dashboard --> AdminCheck{Is Admin?}
AdminCheck -->|Yes| AdminPanel[Admin Panel]
AdminPanel --> ManageVerifications[Manage Pending Verifications]
AdminPanel --> ViewSecurityLogs[View Security Logs]
AdminPanel --> ManageUsers[Manage User Accounts]
AdminCheck -->|No| Dashboard
%% ================================
%% PASSWORD RESET FLOW (Future)
%% ================================
LoginForm --> ForgotPassword[Forgot Password Link]
ForgotPassword --> ResetEmail[Enter Email for Reset]
ResetEmail --> ResetRequest[POST /auth/password-reset/request]
ResetRequest --> ResetEmailSent[Password Reset Email Sent]
ResetEmailSent --> ResetLink[Click Reset Link in Email]
ResetLink --> ResetForm[Enter New Password]
ResetForm --> ResetSubmit[POST /auth/password-reset/confirm]
ResetSubmit --> ResetSuccess[Password Reset Successfully]
ResetSuccess --> LoginForm
%% ================================
%% DEVICE MANAGEMENT
%% ================================
Dashboard --> DeviceSettings[Device Settings]
DeviceSettings --> ViewDevices[View Trusted Devices]
ViewDevices --> RemoveDevice[Remove Trusted Device]
RemoveDevice --> DeviceRemoved[Device Removed Successfully]
DeviceRemoved --> ViewDevices
%% ================================
%% STYLING
%% ================================
classDef startEnd fill:#e1f5fe
classDef process fill:#f3e5f5
classDef decision fill:#fff3e0
classDef error fill:#ffebee
classDef success fill:#e8f5e8
classDef security fill:#fce4ec
class Start,LandingPage startEnd
class LoginSuccess,VerifySuccess,MFASuccess,Dashboard success
class LoginError,VerifyError,MFAError,AccountError error
class DeviceCheck,TokenValid,CredentialsValid,MFAValid decision
class GenerateMFA,SendMFAEmail,BlacklistTokens security
```

362
frontend/src/components/EmailVerificationComponents.tsx
View File

@ -29,13 +29,12 @@ import {
} from '@mui/icons-material';
import { useAuth } from 'hooks/AuthContext';
import { BackstoryPageProps } from './BackstoryTab';
import { useNavigate } from 'react-router-dom';
// Email Verification Component
const EmailVerificationPage = (props: BackstoryPageProps) => {
const { verifyEmail, resendEmailVerification, getPendingVerificationEmail, isLoading, error } = useAuth();
const navigate = useNavigate();
const [verificationToken, setVerificationToken] = useState('');
const { apiClient } = useAuth();
const [verificationToken, setVerificationToken] = useState('');
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');
const [message, setMessage] = useState('');
const [userType, setUserType] = useState<string>('');
@ -58,42 +57,62 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
return;
}
setLoading(true);
try {
const result = await verifyEmail({ token });
const response = await fetch('/api/1.0/auth/verify-email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token }),
});
if (result) {
const data = await response.json();
if (data.success) {
setStatus('success');
setMessage(result.message);
setUserType(result.userType);
setMessage(data.data.message);
setUserType(data.data.userType);
// Redirect to login after 3 seconds
setTimeout(() => {
navigate('/login');
window.location.href = '/login';
}, 3000);
} else {
setStatus('error');
setMessage('Email verification failed');
setMessage(data.error?.message || 'Verification failed');
}
} catch (error) {
setStatus('error');
setMessage('Email verification failed');
setMessage('Network error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleResendVerification = async () => {
const email = getPendingVerificationEmail();
if (!email) {
setMessage('No pending verification email found.');
return;
}
// This would need the email address - you might want to add an input for it
// or store it in localStorage from the registration process
try {
const success = await resendEmailVerification(email);
if (success) {
setMessage('Verification email sent successfully!');
setLoading(true);
const response = await fetch('/api/1.0/auth/resend-verification', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: localStorage.getItem('pendingVerificationEmail') || ''
}),
});
const data = await response.json();
if (data.success) {
setMessage('Verification email sent! Please check your inbox.');
}
} catch (error) {
setMessage('Failed to resend verification email.');
setMessage('Failed to resend verification email.');
} finally {
setLoading(false);
}
};
@ -148,18 +167,18 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
)}
</Box>
{isLoading && (
{loading && (
<Box display="flex" justifyContent="center" my={3}>
<CircularProgress />
</Box>
)}
{(message || error) && (
{message && (
<Alert
severity={status === 'success' ? 'success' : status === 'error' ? 'error' : 'info'}
sx={{ mt: 2 }}
>
{message || error}
{message}
</Alert>
)}
@ -170,7 +189,7 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
</Typography>
<Button
variant="contained"
onClick={() => navigate('/login')}
onClick={() => window.location.href = '/login'}
fullWidth
>
Go to Login
@ -183,7 +202,7 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
<Button
variant="outlined"
onClick={handleResendVerification}
disabled={isLoading}
disabled={loading}
startIcon={<RefreshIcon />}
fullWidth
sx={{ mb: 2 }}
@ -192,7 +211,7 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
</Button>
<Button
variant="contained"
onClick={() => navigate('/login')}
onClick={() => window.location.href = '/login'}
fullWidth
>
Back to Login
@ -206,34 +225,27 @@ const EmailVerificationPage = (props: BackstoryPageProps) => {
}
// MFA Verification Component
interface MFAVerificationDialogProps {
open: boolean;
onClose: () => void;
onVerificationSuccess: (authData: any) => void;
}
const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
const {
open,
onClose,
onVerificationSuccess
} = props;
const { verifyMFA, resendMFACode, clearMFA, mfaResponse, isLoading, error } = useAuth();
const MFAVerificationDialog = ({
open,
onClose,
email,
deviceId,
deviceName,
onVerificationSuccess
}: {
open: boolean;
onClose: () => void;
email: string;
deviceId: string;
deviceName: string;
onVerificationSuccess: (authData: any) => void;
}) => {
const { apiClient } = useAuth();
const [code, setCode] = useState('');
const [rememberDevice, setRememberDevice] = useState(false);
const [localError, setLocalError] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds
const [errorMessage, setErrorMessage] = useState<string | null>(null);
useEffect(() => {
if (!error) {
return;
}
/* Remove 'HTTP .*: ' from error string */
const jsonStr = error.replace(/^[^{]*/, '');
const data = JSON.parse(jsonStr);
setErrorMessage(data.error.message);
}, [error]);
useEffect(() => {
if (!open) return;
@ -242,7 +254,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
setTimeLeft((prev) => {
if (prev <= 1) {
clearInterval(timer);
setLocalError('MFA code has expired. Please try logging in again.');
setError('MFA code has expired. Please try logging in again.');
return 0;
}
return prev - 1;
@ -260,61 +272,73 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
const handleVerifyMFA = async () => {
if (!code || code.length !== 6) {
setLocalError('Please enter a valid 6-digit code');
setError('Please enter a valid 6-digit code');
return;
}
if (!mfaResponse || !mfaResponse.mfaData) {
setLocalError('MFA data not available');
return;
}
setLocalError('');
setLoading(true);
setError('');
try {
const success = await verifyMFA({
email: mfaResponse.mfaData.email,
code,
deviceId: mfaResponse.mfaData.deviceId,
rememberDevice,
const response = await fetch('/api/1.0/auth/mfa/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
code,
deviceId,
rememberDevice,
}),
});
if (success) {
onVerificationSuccess({ success: true });
onClose();
const data = await response.json();
if (data.success) {
onVerificationSuccess(data.data);
onClose();
} else {
setError(data.error?.message || 'Invalid verification code');
}
} catch (error) {
setLocalError('Verification failed. Please try again.');
setError('Network error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleResendCode = async () => {
if (!mfaResponse || !mfaResponse.mfaData) {
setLocalError('MFA data not available');
return;
}
setLoading(true);
try {
const success = await resendMFACode(mfaResponse.mfaData.email, mfaResponse.mfaData.deviceId, mfaResponse.mfaData.deviceName);
if (success) {
const response = await fetch('/api/1.0/auth/mfa/request', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password: '', // This would need to be stored securely or re-entered
deviceId,
deviceName,
}),
});
const data = await response.json();
if (data.success) {
setTimeLeft(600); // Reset timer
setLocalError('');
setError('');
alert('New verification code sent to your email');
}
} catch (error) {
setLocalError('Failed to resend code');
setError('Failed to resend code');
} finally {
setLoading(false);
}
};
const handleClose = () => {
clearMFA();
onClose();
};
if (!mfaResponse || !mfaResponse.mfaData) return null;
return (
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>
<Box display="flex" alignItems="center" gap={1}>
<SecurityIcon color="primary" />
@ -326,14 +350,14 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
<DialogContent>
<Alert severity="info" sx={{ mb: 3 }}>
We've detected a login from a new device: <strong>{mfaResponse.mfaData.deviceName}</strong>
We've detected a login from a new device: <strong>{deviceName}</strong>
</Alert>
<Typography variant="body1" gutterBottom>
We've sent a 6-digit verification code to:
We've sent a 6-digit verification code to:
</Typography>
<Typography variant="h6" color="primary" gutterBottom>
{mfaResponse.mfaData.email}
{email}
</Typography>
<TextField
@ -343,7 +367,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
onChange={(e) => {
const value = e.target.value.replace(/\D/g, '').slice(0, 6);
setCode(value);
setLocalError('');
setError('');
}}
placeholder="000000"
inputProps={{
@ -355,8 +379,8 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
}
}}
sx={{ mt: 2, mb: 2 }}
error={!!(localError || errorMessage)}
helperText={localError || errorMessage}
error={!!error}
helperText={error}
/>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
@ -366,7 +390,7 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
<Button
size="small"
onClick={handleResendCode}
disabled={isLoading || timeLeft > 540} // Allow resend after 1 minute
disabled={loading || timeLeft > 540} // Allow resend after 1 minute
>
Resend Code
</Button>
@ -390,15 +414,15 @@ const MFAVerificationDialog = (props: MFAVerificationDialogProps) => {
</DialogContent>
<DialogActions sx={{ p: 3 }}>
<Button onClick={handleClose} disabled={isLoading}>
<Button onClick={onClose} disabled={loading}>
Cancel
</Button>
<Button
variant="contained"
onClick={handleVerifyMFA}
disabled={isLoading || !code || code.length !== 6 || timeLeft === 0}
disabled={loading || !code || code.length !== 6 || timeLeft === 0}
>
{isLoading ? <CircularProgress size={20} /> : 'Verify'}
{loading ? <CircularProgress size={20} /> : 'Verify'}
</Button>
</DialogActions>
</Dialog>
@ -417,17 +441,29 @@ const RegistrationSuccessDialog = ({
email: string;
userType: string;
}) => {
const { resendEmailVerification, isLoading } = useAuth();
const [resendLoading, setResendLoading] = useState(false);
const [resendMessage, setResendMessage] = useState('');
const handleResendVerification = async () => {
const handleResendVerification = async () => {
setResendLoading(true);
try {
const success = await resendEmailVerification(email);
if (success) {
setResendMessage('Verification email sent!');
}
} catch (error: any) {
setResendMessage(error?.message || 'Network error. Please try again.');
const response = await fetch('/api/1.0/auth/resend-verification', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email }),
});
const data = await response.json();
setResendMessage(data.success ?
'Verification email sent!' :
'Failed to resend email. Please try again later.'
);
} catch (error) {
setResendMessage('Network error. Please try again.');
} finally {
setResendLoading(false);
}
};
@ -473,8 +509,8 @@ const RegistrationSuccessDialog = ({
<DialogActions sx={{ p: 3, justifyContent: 'space-between' }}>
<Button
onClick={handleResendVerification}
disabled={isLoading}
startIcon={isLoading ? <CircularProgress size={16} /> : <RefreshIcon />}
disabled={resendLoading}
startIcon={resendLoading ? <CircularProgress size={16} /> : <RefreshIcon />}
>
Resend Email
</Button>
@ -488,46 +524,69 @@ const RegistrationSuccessDialog = ({
// Enhanced Login Component with MFA Support
const LoginForm = () => {
const { login, mfaResponse, isLoading, error } = useAuth();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const { apiClient } = useAuth();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [mfaRequired, setMfaRequired] = useState(false);
const [mfaData, setMfaData] = useState<any>(null);
useEffect(() => {
if (!error) {
return;
}
/* Remove 'HTTP .*: ' from error string */
const jsonStr = error.replace(/^[^{]*/, '');
const data = JSON.parse(jsonStr);
setErrorMessage(data.error.message);
}, [error]);
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
const success = await login({
login: email,
password
});
console.log(`login success: ${success}`);
if (success) {
// Redirect based on user type - this could be handled in AuthContext
// or by a higher-level component that listens to auth state changes
handleLoginSuccess();
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetch('/api/1.0/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
login: email,
password,
}),
});
const data = await response.json();
if (data.success) {
if (data.data.mfaRequired) {
// MFA required for new device
setMfaRequired(true);
setMfaData({
email,
deviceId: data.data.deviceId,
deviceName: data.data.deviceName,
});
} else {
// Normal login success
handleLoginSuccess(data.data);
}
} else {
setError(data.error?.message || 'Login failed');
}
} catch (error) {
setError('Network error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleMFASuccess = (authData: any) => {
handleLoginSuccess();
handleLoginSuccess(authData);
};
const handleLoginSuccess = () => {
// This could be handled by a router or parent component
// For now, just showing the pattern
console.log('Login successful - redirect to dashboard');
const handleLoginSuccess = (authData: any) => {
// Store tokens
localStorage.setItem('accessToken', authData.accessToken);
localStorage.setItem('refreshToken', authData.refreshToken);
localStorage.setItem('user', JSON.stringify(authData.user));
// Redirect based on user type
const userType = authData.user.userType;
window.location.href = userType === 'employer' ? '/employer-dashboard' : '/candidate-dashboard';
};
return (
@ -553,9 +612,9 @@ const LoginForm = () => {
autoComplete="current-password"
/>
{errorMessage && (
{error && (
<Alert severity="error" sx={{ mt: 2 }}>
{errorMessage}
{error}
</Alert>
)}
@ -563,18 +622,23 @@ const LoginForm = () => {
type="submit"
fullWidth
variant="contained"
disabled={isLoading}
disabled={loading}
sx={{ mt: 3, mb: 2 }}
>
{isLoading ? <CircularProgress size={20} /> : 'Sign In'}
{loading ? <CircularProgress size={20} /> : 'Sign In'}
</Button>
{/* MFA Dialog */}
<MFAVerificationDialog
open={mfaResponse?.mfaRequired || false}
onClose={() => { }} // This will be handled by clearMFA in the dialog
onVerificationSuccess={handleMFASuccess}
/>
{/* MFA Dialog */}
{mfaRequired && mfaData && (
<MFAVerificationDialog
open={mfaRequired}
onClose={() => setMfaRequired(false)}
email={mfaData.email}
deviceId={mfaData.deviceId}
deviceName={mfaData.deviceName}
onVerificationSuccess={handleMFASuccess}
/>
)}
</Box>
);
}

742
frontend/src/components/MFA.tsx Normal file
View File

@ -0,0 +1,742 @@
import React, { useState, useEffect } from 'react';
import {
Box,
Card,
CardContent,
Typography,
TextField,
Button,
Alert,
CircularProgress,
Link,
Divider,
InputAdornment,
Dialog,
DialogTitle,
DialogContent,
DialogActions,
Checkbox,
FormControlLabel,
Grid
} from '@mui/material';
import {
Email as EmailIcon,
Security as SecurityIcon,
CheckCircle as CheckCircleIcon,
ErrorOutline as ErrorIcon,
Refresh as RefreshIcon,
DevicesOther as DevicesIcon
} from '@mui/icons-material';
import { ApiClient } from 'services/api-client';
// Email Verification Component
export function EmailVerificationPage() {
const [verificationToken, setVerificationToken] = useState('');
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');
const [message, setMessage] = useState('');
const [userType, setUserType] = useState<string>('');
const apiClient = new ApiClient();
useEffect(() => {
// Get token from URL parameters
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
if (token) {
setVerificationToken(token);
handleVerifyEmail(token);
}
}, []);
const handleVerifyEmail = async (token: string) => {
if (!token) {
setStatus('error');
setMessage('Invalid verification link');
return;
}
setLoading(true);
try {
const response = await fetch('/api/1.0/auth/verify-email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token }),
});
const data = await response.json();
if (data.success) {
setStatus('success');
setMessage(data.data.message);
setUserType(data.data.userType);
// Redirect to login after 3 seconds
setTimeout(() => {
window.location.href = '/login';
}, 3000);
} else {
setStatus('error');
setMessage(data.error?.message || 'Verification failed');
}
} catch (error) {
setStatus('error');
setMessage('Network error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleResendVerification = async () => {
// This would need the email address - you might want to add an input for it
// or store it in localStorage from the registration process
try {
setLoading(true);
const response = await fetch('/api/1.0/auth/resend-verification', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: localStorage.getItem('pendingVerificationEmail') || ''
}),
});
const data = await response.json();
if (data.success) {
setMessage('Verification email sent! Please check your inbox.');
}
} catch (error) {
setMessage('Failed to resend verification email.');
} finally {
setLoading(false);
}
};
return (
<Box
sx={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
bgcolor: 'grey.50',
p: 2
}}
>
<Card sx={{ maxWidth: 500, width: '100%' }}>
<CardContent sx={{ p: 4 }}>
<Box textAlign="center" mb={3}>
{status === 'pending' && (
<>
<EmailIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
<Typography variant="h4" gutterBottom>
Verifying Email
</Typography>
<Typography color="text.secondary">
Please wait while we verify your email address...
</Typography>
</>
)}
{status === 'success' && (
<>
<CheckCircleIcon sx={{ fontSize: 64, color: 'success.main', mb: 2 }} />
<Typography variant="h4" gutterBottom color="success.main">
Email Verified!
</Typography>
<Typography color="text.secondary">
Your {userType} account has been successfully activated.
</Typography>
</>
)}
{status === 'error' && (
<>
<ErrorIcon sx={{ fontSize: 64, color: 'error.main', mb: 2 }} />
<Typography variant="h4" gutterBottom color="error.main">
Verification Failed
</Typography>
<Typography color="text.secondary">
We couldn't verify your email address.
</Typography>
</>
)}
</Box>
{loading && (
<Box display="flex" justifyContent="center" my={3}>
<CircularProgress />
</Box>
)}
{message && (
<Alert
severity={status === 'success' ? 'success' : status === 'error' ? 'error' : 'info'}
sx={{ mt: 2 }}
>
{message}
</Alert>
)}
{status === 'success' && (
<Box mt={3} textAlign="center">
<Typography variant="body2" color="text.secondary" mb={2}>
You will be redirected to the login page in a few seconds...
</Typography>
<Button
variant="contained"
onClick={() => window.location.href = '/login'}
fullWidth
>
Go to Login
</Button>
</Box>
)}
{status === 'error' && (
<Box mt={3}>
<Button
variant="outlined"
onClick={handleResendVerification}
disabled={loading}
startIcon={<RefreshIcon />}
fullWidth
sx={{ mb: 2 }}
>
Resend Verification Email
</Button>
<Button
variant="contained"
onClick={() => window.location.href = '/login'}
fullWidth
>
Back to Login
</Button>
</Box>
)}
</CardContent>
</Card>
</Box>
);
}
// MFA Verification Component
export function MFAVerificationDialog({
open,
onClose,
email,
deviceId,
deviceName,
onVerificationSuccess
}: {
open: boolean;
onClose: () => void;
email: string;
deviceId: string;
deviceName: string;
onVerificationSuccess: (authData: any) => void;
}) {
const [code, setCode] = useState('');
const [rememberDevice, setRememberDevice] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds
const apiClient = new ApiClient();
useEffect(() => {
if (!open) return;
const timer = setInterval(() => {
setTimeLeft((prev) => {
if (prev <= 1) {
clearInterval(timer);
setError('MFA code has expired. Please try logging in again.');
return 0;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(timer);
}, [open]);
const formatTime = (seconds: number) => {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins}:${secs.toString().padStart(2, '0')}`;
};
const handleVerifyMFA = async () => {
if (!code || code.length !== 6) {
setError('Please enter a valid 6-digit code');
return;
}
setLoading(true);
setError('');
try {
const response = await fetch('/api/1.0/auth/mfa/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
code,
deviceId,
rememberDevice,
}),
});
const data = await response.json();
if (data.success) {
onVerificationSuccess(data.data);
onClose();
} else {
setError(data.error?.message || 'Invalid verification code');
}
} catch (error) {
setError('Network error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleResendCode = async () => {
setLoading(true);
try {
const response = await fetch('/api/1.0/auth/mfa/request', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
password: '', // This would need to be stored securely or re-entered
deviceId,
deviceName,
}),
});
const data = await response.json();
if (data.success) {
setTimeLeft(600); // Reset timer
setError('');
alert('New verification code sent to your email');
}
} catch (error) {
setError('Failed to resend code');
} finally {
setLoading(false);
}
};
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogTitle>
<Box display="flex" alignItems="center" gap={1}>
<SecurityIcon color="primary" />
<Typography variant="h6">
Verify Your Identity
</Typography>
</Box>
</DialogTitle>
<DialogContent>
<Alert severity="info" sx={{ mb: 3 }}>
We've detected a login from a new device: <strong>{deviceName}</strong>
</Alert>
<Typography variant="body1" gutterBottom>
We've sent a 6-digit verification code to:
</Typography>
<Typography variant="h6" color="primary" gutterBottom>
{email}
</Typography>
<TextField
fullWidth
label="Enter 6-digit code"
value={code}
onChange={(e) => {
const value = e.target.value.replace(/\D/g, '').slice(0, 6);
setCode(value);
setError('');
}}
placeholder="000000"
inputProps={{
maxLength: 6,
style: {
fontSize: 24,
textAlign: 'center',
letterSpacing: 8
}
}}
sx={{ mt: 2, mb: 2 }}
error={!!error}
helperText={error}
/>
<Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
<Typography variant="body2" color="text.secondary">
Code expires in: {formatTime(timeLeft)}
</Typography>
<Button
size="small"
onClick={handleResendCode}
disabled={loading || timeLeft > 540} // Allow resend after 1 minute
>
Resend Code
</Button>
</Box>
<FormControlLabel
control={
<Checkbox
checked={rememberDevice}
onChange={(e) => setRememberDevice(e.target.checked)}
/>
}
label="Remember this device for 90 days"
/>
<Alert severity="warning" sx={{ mt: 2 }}>
<Typography variant="body2">
If you didn't attempt to log in, please change your password immediately.
</Typography>
</Alert>
</DialogContent>
<DialogActions sx={{ p: 3 }}>
<Button onClick={onClose} disabled={loading}>
Cancel
</Button>
<Button
variant="contained"
onClick={handleVerifyMFA}
disabled={loading || !code || code.length !== 6 || timeLeft === 0}
>
{loading ? <CircularProgress size={20} /> : 'Verify'}
</Button>
</DialogActions>
</Dialog>
);
}
// Enhanced Registration Success Component
export function RegistrationSuccessDialog({
open,
onClose,
email,
userType
}: {
open: boolean;
onClose: () => void;
email: string;
userType: string;
}) {
const [resendLoading, setResendLoading] = useState(false);
const [resendMessage, setResendMessage] = useState('');
const handleResendVerification = async () => {
setResendLoading(true);
try {
const response = await fetch('/api/1.0/auth/resend-verification', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email }),
});
const data = await response.json();
setResendMessage(data.success ?
'Verification email sent!' :
'Failed to resend email. Please try again later.'
);
} catch (error) {
setResendMessage('Network error. Please try again.');
} finally {
setResendLoading(false);
}
};
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<DialogContent sx={{ textAlign: 'center', p: 4 }}>
<EmailIcon sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
<Typography variant="h5" gutterBottom>
Check Your Email
</Typography>
<Typography variant="body1" color="text.secondary" paragraph>
We've sent a verification link to:
</Typography>
<Typography variant="h6" color="primary" gutterBottom>
{email}
</Typography>
<Alert severity="info" sx={{ mt: 2, mb: 3, textAlign: 'left' }}>
<Typography variant="body2">
<strong>Next steps:</strong>
<br />
1. Check your email inbox (and spam folder)
<br />
2. Click the verification link
<br />
3. Your {userType} account will be activated
</Typography>
</Alert>
{resendMessage && (
<Alert
severity={resendMessage.includes('sent') ? 'success' : 'error'}
sx={{ mb: 2 }}
>
{resendMessage}
</Alert>
)}
</DialogContent>
<DialogActions sx={{ p: 3, justifyContent: 'space-between' }}>
<Button
onClick={handleResendVerification}
disabled={resendLoading}
startIcon={resendLoading ? <CircularProgress size={16} /> : <RefreshIcon />}
>
Resend Email
</Button>
<Button variant="contained" onClick={onClose}>
Got It
</Button>
</DialogActions>
</Dialog>
);
}
// Enhanced Login Component with MFA Support
export function EnhancedLoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [mfaRequired, setMfaRequired] = useState(false);
const [mfaData, setMfaData] = useState<any>(null);
const apiClient = new ApiClient();
// Generate device fingerprint (simplified)
const getDeviceFingerprint = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx!.textBaseline = 'top';
ctx!.font = '14px Arial';
ctx!.fillText('Device fingerprint', 2, 2);
const fingerprint = canvas.toDataURL() +
navigator.userAgent +
navigator.language +
screen.width + 'x' + screen.height;
return btoa(fingerprint).slice(0, 16);
};
const getDeviceName = () => {
const ua = navigator.userAgent;
const browserName = ua.includes('Chrome') ? 'Chrome' :
ua.includes('Firefox') ? 'Firefox' :
ua.includes('Safari') ? 'Safari' : 'Browser';
const osName = ua.includes('Windows') ? 'Windows' :
ua.includes('Mac') ? 'macOS' :
ua.includes('Linux') ? 'Linux' :
ua.includes('Android') ? 'Android' :
ua.includes('iOS') ? 'iOS' : 'Unknown OS';
return `${browserName} on ${osName}`;
};
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setLoading(true);
setError('');
try {
const response = await fetch('/api/1.0/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
login: email,
password,
}),
});
const data = await response.json();
if (data.success) {
if (data.data.mfaRequired) {
// MFA required for new device
setMfaRequired(true);
setMfaData({
email,
deviceId: data.data.deviceId,
deviceName: data.data.deviceName,
});
} else {
// Normal login success
handleLoginSuccess(data.data);
}
} else {
setError(data.error?.message || 'Login failed');
}
} catch (error) {
setError('Network error occurred. Please try again.');
} finally {
setLoading(false);
}
};
const handleMFASuccess = (authData: any) => {
handleLoginSuccess(authData);
};
const handleLoginSuccess = (authData: any) => {
// Store tokens
localStorage.setItem('accessToken', authData.accessToken);
localStorage.setItem('refreshToken', authData.refreshToken);
localStorage.setItem('user', JSON.stringify(authData.user));
// Redirect based on user type
const userType = authData.user.userType;
window.location.href = userType === 'employer' ? '/employer-dashboard' : '/candidate-dashboard';
};
return (
<Box component="form" onSubmit={handleLogin} sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
label="Email or Username"
value={email}
onChange={(e) => setEmail(e.target.value)}
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password"
/>
{error && (
<Alert severity="error" sx={{ mt: 2 }}>
{error}
</Alert>
)}
<Button
type="submit"
fullWidth
variant="contained"
disabled={loading}
sx={{ mt: 3, mb: 2 }}
>
{loading ? <CircularProgress size={20} /> : 'Sign In'}
</Button>
{/* MFA Dialog */}
{mfaRequired && mfaData && (
<MFAVerificationDialog
open={mfaRequired}
onClose={() => setMfaRequired(false)}
email={mfaData.email}
deviceId={mfaData.deviceId}
deviceName={mfaData.deviceName}
onVerificationSuccess={handleMFASuccess}
/>
)}
</Box>
);
}
// Device Management Component
export function TrustedDevicesManager() {
const [devices, setDevices] = useState<any[]>([]);
const [loading, setLoading] = useState(true);
// This would need API endpoints to manage trusted devices
useEffect(() => {
// Load trusted devices
setLoading(false);
}, []);
return (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
<DevicesIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
Trusted Devices
</Typography>
<Typography variant="body2" color="text.secondary" paragraph>
Manage devices that you've marked as trusted. You won't need to verify
your identity when signing in from these devices.
</Typography>
{devices.length === 0 ? (
<Alert severity="info">
No trusted devices yet. When you log in from a new device and choose
to remember it, it will appear here.
</Alert>
) : (
<Grid container spacing={2}>
{devices.map((device, index) => (
<Grid key={index} size={{ xs: 12, md: 6 }}>
<Card variant="outlined">
<CardContent>
<Typography variant="subtitle1">
{device.deviceName}
</Typography>
<Typography variant="body2" color="text.secondary">
Added: {new Date(device.addedAt).toLocaleDateString()}
</Typography>
<Typography variant="body2" color="text.secondary">
Last used: {new Date(device.lastUsed).toLocaleDateString()}
</Typography>
<Button
size="small"
color="error"
sx={{ mt: 1 }}
onClick={() => {
// Remove device
}}
>
Remove
</Button>
</CardContent>
</Card>
</Grid>
))}
</Grid>
)}
</CardContent>
</Card>
);
}

3
frontend/src/components/StyledMarkdown.tsx
View File

@ -27,9 +27,6 @@ const StyledMarkdown: React.FC<StyledMarkdownProps> = (props: StyledMarkdownProp
const theme = useTheme();
const overrides: any = {
p: { component: (element: any) =>{
return <div>{element.children}</div>
}},
pre: {
component: (element: any) => {
const { className } = element.children.props;

257
frontend/src/hooks/AuthContext.tsx
View File

@ -7,40 +7,26 @@ import { formatApiRequest, toCamelCase } from '../types/conversion';
// Types and Interfaces
// ============================
interface AuthState {
export interface AuthState {
user: Types.User | null;
guest: Types.Guest | null;
isAuthenticated: boolean;
isLoading: boolean;
isInitializing: boolean;
error: string | null;
mfaResponse: Types.MFARequestResponse | null;
}
interface LoginRequest {
export interface LoginRequest {
login: string; // email or username
password: string;
}
interface MFAVerificationRequest {
email: string;
code: string;
deviceId: string;
rememberDevice?: boolean;
}
interface EmailVerificationRequest {
token: string;
}
interface ResendVerificationRequest {
export interface PasswordResetRequest {
email: string;
}
interface PasswordResetRequest {
email: string;
}
// Re-export API client types for convenience
export type { CreateCandidateRequest, CreateEmployerRequest } from '../services/api-client';
// ============================
// Token Storage Constants
@ -51,8 +37,7 @@ const TOKEN_STORAGE = {
REFRESH_TOKEN: 'refreshToken',
USER_DATA: 'userData',
TOKEN_EXPIRY: 'tokenExpiry',
GUEST_DATA: 'guestData',
PENDING_VERIFICATION_EMAIL: 'pendingVerificationEmail'
GUEST_DATA: 'guestData'
} as const;
// ============================
@ -210,15 +195,14 @@ function getStoredGuestData(): Types.Guest | null {
// Main Authentication Hook
// ============================
function useAuthenticationLogic() {
export function useAuthenticationLogic() {
const [authState, setAuthState] = useState<AuthState>({
user: null,
guest: null,
isAuthenticated: false,
isLoading: false,
isInitializing: true,
error: null,
mfaResponse: null,
error: null
});
const [apiClient] = useState(() => new ApiClient());
@ -258,8 +242,7 @@ function useAuthenticationLogic() {
isAuthenticated: false,
isLoading: false,
isInitializing: false,
error: null,
mfaResponse: null,
error: null
});
return;
}
@ -280,8 +263,7 @@ function useAuthenticationLogic() {
isAuthenticated: true,
isLoading: false,
isInitializing: false,
error: null,
mfaResponse: null
error: null
});
console.log('Token refreshed successfully');
@ -296,8 +278,7 @@ function useAuthenticationLogic() {
isAuthenticated: false,
isLoading: false,
isInitializing: false,
error: null,
mfaResponse: null
error: null
});
}
} else {
@ -310,8 +291,7 @@ function useAuthenticationLogic() {
isAuthenticated: true,
isLoading: false,
isInitializing: false,
error: null,
mfaResponse: null
error: null
});
console.log('Restored authentication from stored tokens');
@ -328,8 +308,7 @@ function useAuthenticationLogic() {
isAuthenticated: false,
isLoading: false,
isInitializing: false,
error: null,
mfaResponse: null
error: null
});
} finally {
initializationCompleted.current = true;
@ -369,158 +348,27 @@ function useAuthenticationLogic() {
return () => clearTimeout(refreshTimer);
}, [authState.isAuthenticated, initializeAuth]);
// Enhanced login with MFA support
const login = useCallback(async (loginData: LoginRequest): Promise<boolean> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null, mfaResponse: null, mfaData: null }));
try {
const result = await apiClient.login({
login: loginData.login,
password: loginData.password,
});
if ('mfaRequired' in result) {
// MFA required for new device
setAuthState(prev => ({
...prev,
isLoading: false,
mfaResponse: result,
}));
return false; // Login not complete yet
} else {
// Normal login success
const authResponse: Types.AuthResponse = result;
storeAuthData(authResponse);
apiClient.setAuthToken(authResponse.accessToken);
setAuthState(prev => ({
...prev,
user: authResponse.user,
isAuthenticated: true,
isLoading: false,
error: null,
mfaResponse: null,
}));
console.log('Login successful');
return true;
}
} catch (error: any) {
const errorMessage = error instanceof Error ? error.message : 'Network error occurred. Please try again.';
setAuthState(prev => ({
...prev,
isLoading: false,
error: errorMessage,
mfaResponse: null,
}));
return false;
}
}, [apiClient]);
// MFA verification
const verifyMFA = useCallback(async (mfaData: MFAVerificationRequest): Promise<boolean> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
try {
const result = await apiClient.verifyMFA(mfaData);
const authResponse = await apiClient.login(loginData);
storeAuthData(authResponse);
apiClient.setAuthToken(authResponse.accessToken);
if (result.accessToken) {
const authResponse: Types.AuthResponse = result;
storeAuthData(authResponse);
apiClient.setAuthToken(authResponse.accessToken);
setAuthState(prev => ({
...prev,
user: authResponse.user,
isAuthenticated: true,
isLoading: false,
error: null,
mfaResponse: null,
}));
console.log('MFA verification successful');
return true;
}
return false;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'MFA verification failed';
console.log(errorMessage);
setAuthState(prev => ({
...prev,
user: authResponse.user,
isAuthenticated: true,
isLoading: false,
error: errorMessage
error: null
}));
return false;
}
}, [apiClient]);
// Resend MFA code
const resendMFACode = useCallback(async (email: string, deviceId: string, deviceName: string): Promise<boolean> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
try {
await apiClient.requestMFA({
email,
password: '', // This would need to be stored securely or re-entered
deviceId,
deviceName,
});
setAuthState(prev => ({ ...prev, isLoading: false }));
console.log('Login successful');
return true;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Failed to resend MFA code';
setAuthState(prev => ({
...prev,
isLoading: false,
error: errorMessage
}));
return false;
}
}, [apiClient]);
// Clear MFA state
const clearMFA = useCallback(() => {
setAuthState(prev => ({
...prev,
mfaResponse: null,
error: null
}));
}, []);
// Email verification
const verifyEmail = useCallback(async (verificationData: EmailVerificationRequest): Promise<{ message: string; userType: string } | null> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
try {
const result = await apiClient.verifyEmail(verificationData);
setAuthState(prev => ({ ...prev, isLoading: false }));
return {
message: result.message || 'Email verified successfully',
userType: result.userType || 'user'
};
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Email verification failed';
setAuthState(prev => ({
...prev,
isLoading: false,
error: errorMessage
}));
return null;
}
}, [apiClient]);
// Resend email verification
const resendEmailVerification = useCallback(async (email: string): Promise<boolean> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
try {
await apiClient.resendVerificationEmail({ email });
setAuthState(prev => ({ ...prev, isLoading: false }));
return true;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Failed to resend verification email';
const errorMessage = error instanceof Error ? error.message : 'Login failed';
setAuthState(prev => ({
...prev,
isLoading: false,
@ -530,16 +378,6 @@ function useAuthenticationLogic() {
}
}, [apiClient]);
// Store pending verification email
const setPendingVerificationEmail = useCallback((email: string) => {
localStorage.setItem(TOKEN_STORAGE.PENDING_VERIFICATION_EMAIL, email);
}, []);
// Get pending verification email
const getPendingVerificationEmail = useCallback((): string | null => {
return localStorage.getItem(TOKEN_STORAGE.PENDING_VERIFICATION_EMAIL);
}, []);
const logout = useCallback(() => {
clearStoredAuth();
apiClient.clearAuthToken();
@ -553,8 +391,7 @@ function useAuthenticationLogic() {
guest,
isAuthenticated: false,
isLoading: false,
error: null,
mfaResponse: null,
error: null
}));
console.log('User logged out');
@ -576,11 +413,13 @@ function useAuthenticationLogic() {
const candidate = await apiClient.createCandidate(candidateData);
console.log('Candidate created:', candidate);
// Store email for potential verification resend
setPendingVerificationEmail(candidateData.email);
// Auto-login after successful registration
const loginSuccess = await login({
login: candidateData.email,
password: candidateData.password
});
setAuthState(prev => ({ ...prev, isLoading: false }));
return true;
return loginSuccess;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Account creation failed';
setAuthState(prev => ({
@ -590,7 +429,7 @@ function useAuthenticationLogic() {
}));
return false;
}
}, [apiClient, setPendingVerificationEmail]);
}, [apiClient, login]);
const createEmployerAccount = useCallback(async (employerData: CreateEmployerRequest): Promise<boolean> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
@ -599,11 +438,12 @@ function useAuthenticationLogic() {
const employer = await apiClient.createEmployer(employerData);
console.log('Employer created:', employer);
// Store email for potential verification resend
setPendingVerificationEmail(employerData.email);
const loginSuccess = await login({
login: employerData.email,
password: employerData.password
});
setAuthState(prev => ({ ...prev, isLoading: false }));
return true;
return loginSuccess;
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Account creation failed';
setAuthState(prev => ({
@ -613,7 +453,7 @@ function useAuthenticationLogic() {
}));
return false;
}
}, [apiClient, setPendingVerificationEmail]);
}, [apiClient, login]);
const requestPasswordReset = useCallback(async (email: string): Promise<boolean> => {
setAuthState(prev => ({ ...prev, isLoading: true, error: null }));
@ -667,13 +507,6 @@ function useAuthenticationLogic() {
apiClient,
login,
logout,
verifyMFA,
resendMFACode,
clearMFA,
verifyEmail,
resendEmailVerification,
setPendingVerificationEmail,
getPendingVerificationEmail,
createCandidateAccount,
createEmployerAccount,
requestPasswordReset,
@ -688,7 +521,7 @@ function useAuthenticationLogic() {
const AuthContext = createContext<ReturnType<typeof useAuthenticationLogic> | null>(null);
function AuthProvider({ children }: { children: React.ReactNode }) {
export function AuthProvider({ children }: { children: React.ReactNode }) {
const auth = useAuthenticationLogic();
return (
@ -698,7 +531,7 @@ function AuthProvider({ children }: { children: React.ReactNode }) {
);
}
function useAuth() {
export function useAuth() {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within an AuthProvider');
@ -716,7 +549,7 @@ interface ProtectedRouteProps {
requiredUserType?: Types.UserType;
}
function ProtectedRoute({
export function ProtectedRoute({
children,
fallback = <div>Please log in to access this page.</div>,
requiredUserType
@ -739,14 +572,4 @@ function ProtectedRoute({
}
return <>{children}</>;
}
export type {
AuthState, LoginRequest, MFAVerificationRequest, EmailVerificationRequest, ResendVerificationRequest, PasswordResetRequest
}
export type { CreateCandidateRequest, CreateEmployerRequest } from '../services/api-client';
export {
useAuthenticationLogic, AuthProvider, useAuth, ProtectedRoute
}

1
frontend/src/pages/DocsPage.tsx
View File

@ -142,7 +142,6 @@ const documents : DocType[] = [
{ title: "BETA", route: "beta", description: "Details about the current beta version and upcoming features", icon: <CodeIcon /> },
{ title: "Resume Generation Architecture", route: "resume-generation", description: "Technical overview of how resumes are processed and generated", icon: <LayersIcon /> },
{ title: "Application Architecture", route: "about-app", description: "System design and technical stack information", icon: <LayersIcon /> },
{ title: "Authentication Architecture", route: "authentication.md", description: "Complete authentication architecture", icon: <LayersIcon /> },
{ title: "UI Overview", route: "ui-overview", description: "Guide to the user interface components and interactions", icon: <DashboardIcon /> },
{ title: "UI Mockup", route: "ui-mockup", description: "Visual previews of interfaces and layout concepts", icon: <DashboardIcon /> },
{ title: "Chat Mockup", route: "mockup-chat-system", description: "Mockup of chat system", icon: <DashboardIcon /> },

66
frontend/src/services/api-client.ts
View File

@ -1,5 +1,5 @@
/**
* API Client with Streaming Support and Date Conversion
* Enhanced API Client with Streaming Support and Date Conversion
*
* This demonstrates how to use the generated types with the conversion utilities
* for seamless frontend-backend communication, including streaming responses and
@ -54,6 +54,11 @@ interface StreamingResponse {
promise: Promise<Types.ChatMessage[]>;
}
export interface LoginRequest {
login: string; // email or username
password: string;
}
export interface CreateCandidateRequest {
email: string;
username: string;
@ -256,38 +261,37 @@ class ApiClient {
/**
* Request MFA for new device
*/
async requestMFA(request: MFARequest): Promise<Types.MFARequestResponse> {
async requestMFA(request: MFARequest): Promise<MFARequestResponse> {
const response = await fetch(`${this.baseUrl}/auth/mfa/request`, {
method: 'POST',
headers: this.defaultHeaders,
body: JSON.stringify(formatApiRequest(request))
});
return handleApiResponse<Types.MFARequestResponse>(response);
return handleApiResponse<MFARequestResponse>(response);
}
/**
* Verify MFA code
*/
async verifyMFA(request: Types.MFAVerifyRequest): Promise<Types.AuthResponse> {
const formattedRequest = formatApiRequest(request)
async verifyMFA(request: MFAVerifyRequest): Promise<Types.AuthResponse> {
const response = await fetch(`${this.baseUrl}/auth/mfa/verify`, {
method: 'POST',
headers: this.defaultHeaders,
body: JSON.stringify(formattedRequest)
body: JSON.stringify(formatApiRequest(request))
});
return handleApiResponse<Types.AuthResponse>(response);
}
/**
* login with device detection
* Enhanced login with device detection
*/
async login(auth: Types.LoginRequest): Promise<Types.AuthResponse | Types.MFARequestResponse> {
async loginEnhanced(email: string, password: string): Promise<Types.AuthResponse | MFARequestResponse> {
const response = await fetch(`${this.baseUrl}/auth/login`, {
method: 'POST',
headers: this.defaultHeaders,
body: JSON.stringify(formatApiRequest(auth))
body: JSON.stringify(formatApiRequest({ login: email, password }))
});
// This could return either a full auth response or MFA request
@ -303,7 +307,7 @@ class ApiClient {
/**
* Logout with token revocation
*/
async logout(accessToken: string, refreshToken: string): Promise<{ message: string; tokensRevoked: any }> {
async logoutEnhanced(accessToken: string, refreshToken: string): Promise<{ message: string; tokensRevoked: any }> {
const response = await fetch(`${this.baseUrl}/auth/logout`, {
method: 'POST',
headers: this.defaultHeaders,
@ -491,6 +495,27 @@ class ApiClient {
// ============================
// Authentication Methods
// ============================
async login(request: LoginRequest): Promise<Types.AuthResponse> {
const response = await fetch(`${this.baseUrl}/auth/login`, {
method: 'POST',
headers: this.defaultHeaders,
body: JSON.stringify(formatApiRequest(request))
});
// AuthResponse doesn't typically have date fields, use standard handler
return handleApiResponse<Types.AuthResponse>(response);
}
async logout(accessToken: string, refreshToken: string): Promise<Types.ApiResponse> {
const response = await fetch(`${this.baseUrl}/auth/logout`, {
method: 'POST',
headers: this.defaultHeaders,
body: JSON.stringify(formatApiRequest({ accessToken, refreshToken }))
});
return handleApiResponse<Types.ApiResponse>(response);
}
async refreshToken(refreshToken: string): Promise<Types.AuthResponse> {
const response = await fetch(`${this.baseUrl}/auth/refresh`, {
method: 'POST',
@ -1069,7 +1094,7 @@ class ApiClient {
// ============================
// Request/Response Types
// Enhanced Request/Response Types
// ============================
export interface CreateCandidateWithVerificationRequest {
@ -1108,6 +1133,13 @@ export interface MFARequest {
deviceName: string;
}
export interface MFAVerifyRequest {
email: string;
code: string;
deviceId: string;
rememberDevice: boolean;
}
export interface RegistrationResponse {
message: string;
email: string;
@ -1120,6 +1152,12 @@ export interface EmailVerificationResponse {
userType: string;
}
export interface MFARequestResponse {
mfaRequired: boolean;
message: string;
deviceId?: string;
}
export interface TrustedDevice {
deviceId: string;
deviceName: string;
@ -1164,7 +1202,7 @@ export interface PendingVerification {
/*
// Registration with email verification
const apiClient = new ApiClient();
const apiClient = new EnhancedApiClient();
try {
const result = await apiClient.createCandidateWithVerification({
@ -1188,9 +1226,9 @@ try {
console.error('Registration failed:', error);
}
// login with MFA support
// Enhanced login with MFA support
try {
const loginResult = await apiClient.login('user@example.com', 'password');
const loginResult = await apiClient.loginEnhanced('user@example.com', 'password');
if ('mfaRequired' in loginResult && loginResult.mfaRequired) {
// Show MFA dialog

2
frontend/src/types/conversion.ts
View File

@ -132,7 +132,7 @@ export function formatApiRequest<T extends Record<string, any>>(data: T): Record
}
}
return toSnakeCase(formatted);
return formatted;
}
/**

26
frontend/src/types/types.ts
View File

@ -1,6 +1,6 @@
// Generated TypeScript types from Pydantic models
// Source: src/backend/models.py
// Generated on: 2025-06-01T20:40:46.797024
// Generated on: 2025-06-01T01:48:43.853130
// DO NOT EDIT MANUALLY - This file is auto-generated
// ============================
@ -145,7 +145,6 @@ export interface BaseUser {
lastLogin?: Date;
profileImage?: string;
status: "active" | "inactive" | "pending" | "banned";
isAdmin?: boolean;
}
export interface BaseUserWithType {
@ -161,7 +160,6 @@ export interface BaseUserWithType {
lastLogin?: Date;
profileImage?: string;
status: "active" | "inactive" | "pending" | "banned";
isAdmin?: boolean;
userType: "candidate" | "employer" | "guest";
}
@ -178,7 +176,6 @@ export interface Candidate {
lastLogin?: Date;
profileImage?: string;
status: "active" | "inactive" | "pending" | "banned";
isAdmin?: boolean;
userType: "candidate";
username: string;
description?: string;
@ -398,7 +395,6 @@ export interface Employer {
lastLogin?: Date;
profileImage?: string;
status: "active" | "inactive" | "pending" | "banned";
isAdmin?: boolean;
userType: "employer";
companyName: string;
industry: string;
@ -543,31 +539,13 @@ export interface Location {
address?: string;
}
export interface LoginRequest {
login: string;
password: string;
}
export interface MFAData {
message: string;
deviceId: string;
deviceName: string;
codeSent: string;
email: string;
}
export interface MFARequest {
username: string;
email: string;
password: string;
deviceId: string;
deviceName: string;
}
export interface MFARequestResponse {
mfaRequired: boolean;
mfaData?: MFAData;
}
export interface MFAVerifyRequest {
email: string;
code: string;

149
src/backend/database.py
View File

@ -350,154 +350,6 @@ class RedisDatabase:
await self.redis.delete(key)
# MFA and Email Verification operations
async def find_verification_token_by_email(self, email: str) -> Optional[Dict[str, Any]]:
"""Find pending verification token by email address"""
try:
pattern = "email_verification:*"
cursor = 0
email_lower = email.lower()
while True:
cursor, keys = await self.redis.scan(cursor, match=pattern, count=100)
for key in keys:
token_data = await self.redis.get(key)
if token_data:
verification_info = json.loads(token_data)
if (verification_info.get("email", "").lower() == email_lower and
not verification_info.get("verified", False)):
# Extract token from key
token = key.replace("email_verification:", "")
verification_info["token"] = token
return verification_info
if cursor == 0:
break
return None
except Exception as e:
logger.error(f"❌ Error finding verification token by email {email}: {e}")
return None
async def get_pending_verifications_count(self) -> int:
"""Get count of pending email verifications (admin function)"""
try:
pattern = "email_verification:*"
cursor = 0
count = 0
while True:
cursor, keys = await self.redis.scan(cursor, match=pattern, count=100)
for key in keys:
token_data = await self.redis.get(key)
if token_data:
verification_info = json.loads(token_data)
if not verification_info.get("verified", False):
count += 1
if cursor == 0:
break
return count
except Exception as e:
logger.error(f"❌ Error counting pending verifications: {e}")
return 0
async def cleanup_expired_verification_tokens(self) -> int:
"""Clean up expired verification tokens and return count of cleaned tokens"""
try:
pattern = "email_verification:*"
cursor = 0
cleaned_count = 0
current_time = datetime.now(timezone.utc)
while True:
cursor, keys = await self.redis.scan(cursor, match=pattern, count=100)
for key in keys:
token_data = await self.redis.get(key)
if token_data:
verification_info = json.loads(token_data)
expires_at = datetime.fromisoformat(verification_info.get("expires_at", ""))
if current_time > expires_at:
await self.redis.delete(key)
cleaned_count += 1
logger.debug(f"🧹 Cleaned expired verification token for {verification_info.get('email')}")
if cursor == 0:
break
if cleaned_count > 0:
logger.info(f"🧹 Cleaned up {cleaned_count} expired verification tokens")
return cleaned_count
except Exception as e:
logger.error(f"❌ Error cleaning up expired verification tokens: {e}")
return 0
async def get_verification_attempts_count(self, email: str) -> int:
"""Get the number of verification emails sent for an email in the last 24 hours"""
try:
key = f"verification_attempts:{email.lower()}"
data = await self.redis.get(key)
if not data:
return 0
attempts_data = json.loads(data)
current_time = datetime.now(timezone.utc)
window_start = current_time - timedelta(hours=24)
# Filter out old attempts
recent_attempts = [
attempt for attempt in attempts_data
if datetime.fromisoformat(attempt) > window_start
]
return len(recent_attempts)
except Exception as e:
logger.error(f"❌ Error getting verification attempts count for {email}: {e}")
return 0
async def record_verification_attempt(self, email: str) -> bool:
"""Record a verification email attempt"""
try:
key = f"verification_attempts:{email.lower()}"
current_time = datetime.now(timezone.utc)
# Get existing attempts
data = await self.redis.get(key)
attempts_data = json.loads(data) if data else []
# Add current attempt
attempts_data.append(current_time.isoformat())
# Keep only last 24 hours of attempts
window_start = current_time - timedelta(hours=24)
recent_attempts = [
attempt for attempt in attempts_data
if datetime.fromisoformat(attempt) > window_start
]
# Store with 24 hour expiration
await self.redis.setex(
key,
24 * 60 * 60, # 24 hours
json.dumps(recent_attempts)
)
return True
except Exception as e:
logger.error(f"❌ Error recording verification attempt for {email}: {e}")
return False
async def store_email_verification_token(self, email: str, token: str, user_type: str, user_data: dict) -> bool:
"""Store email verification token with user data"""
try:
@ -558,7 +410,6 @@ class RedisDatabase:
async def store_mfa_code(self, email: str, code: str, device_id: str) -> bool:
"""Store MFA code for verification"""
try:
logger.info("🔐 Storing MFA code for email: %s", email )
key = f"mfa_code:{email.lower()}:{device_id}"
mfa_data = {
"code": code,

233
src/backend/email_service.py
View File

@ -1,5 +1,4 @@
import os
from typing import Tuple
from logger import logger
from email.mime.text import MIMEText # type: ignore
from email.mime.multipart import MIMEMultipart # type: ignore
@ -12,17 +11,166 @@ from database import RedisDatabase
class EmailService:
def __init__(self):
# Configure these in your .env file
self.smtp_server = os.getenv("SMTP_SERVER")
self.smtp_server = os.getenv("SMTP_SERVER", "smtp.gmail.com")
self.smtp_port = int(os.getenv("SMTP_PORT", "587"))
self.email_user = os.getenv("EMAIL_USER")
self.email_password = os.getenv("EMAIL_PASSWORD")
self.email_user = os.getenv("EMAIL_USER", "your-app@example.com")
self.email_password = os.getenv("EMAIL_PASSWORD", "your-app-password")
self.from_name = os.getenv("FROM_NAME", "Backstory")
async def send_verification_email(self, to_email: str, verification_token: str, user_name: str):
"""Send email verification email"""
try:
verification_link = f"{os.getenv('FRONTEND_URL', 'https://backstory-beta.ketrenos.com')}/verify-email?token={verification_token}"
subject = f"Welcome to {self.from_name} - Please verify your email"
html_content = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Verification</title>
<style>
body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; }}
.container {{ max-width: 600px; margin: 0 auto; padding: 20px; }}
.header {{ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }}
.content {{ background: white; padding: 30px; border: 1px solid #e1e5e9; }}
.button {{ display: inline-block; background: #667eea; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: 600; margin: 20px 0; }}
.footer {{ background: #f8f9fa; padding: 20px; text-align: center; border-radius: 0 0 8px 8px; font-size: 14px; color: #6c757d; }}
.security-note {{ background: #fff3cd; border: 1px solid #ffeaa7; padding: 15px; border-radius: 6px; margin: 20px 0; }}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to {self.from_name}!</h1>
<p>Thanks for joining us, {user_name}</p>
</div>
<div class="content">
<h2>Please verify your email address</h2>
<p>To complete your registration and start using {self.from_name}, please verify your email address by clicking the button below:</p>
<a href="{verification_link}" class="button">Verify Email Address</a>
<p>If the button doesn't work, copy and paste this link into your browser:</p>
<p style="word-break: break-all; color: #667eea;">{verification_link}</p>
<div class="security-note">
<strong>Security Note:</strong> This verification link will expire in 24 hours. If you didn't create this account, please ignore this email.
</div>
</div>
<div class="footer">
<p>This email was sent to {to_email}<br>
If you have any questions, contact our support team.</p>
</div>
</div>
</body>
</html>
"""
await self._send_email(to_email, subject, html_content)
logger.info(f"📧 Verification email sent to {to_email}")
except Exception as e:
logger.error(f"❌ Failed to send verification email to {to_email}: {e}")
raise
async def send_mfa_email(self, to_email: str, mfa_code: str, device_name: str, user_name: str):
"""Send MFA code email"""
try:
subject = f"Security Code for {self.from_name}"
html_content = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Code</title>
<style>
body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; }}
.container {{ max-width: 600px; margin: 0 auto; padding: 20px; }}
.header {{ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; border-radius: 8px 8px 0 0; }}
.content {{ background: white; padding: 30px; border: 1px solid #e1e5e9; }}
.code {{ background: #f8f9fa; border: 2px solid #667eea; padding: 20px; text-align: center; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #667eea; border-radius: 8px; margin: 20px 0; }}
.footer {{ background: #f8f9fa; padding: 20px; text-align: center; border-radius: 0 0 8px 8px; font-size: 14px; color: #6c757d; }}
.warning {{ background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; padding: 15px; border-radius: 6px; margin: 20px 0; }}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🔐 Security Code</h1>
<p>Hi {user_name}</p>
</div>
<div class="content">
<h2>New device login detected</h2>
<p>We detected a login attempt from a new device: <strong>{device_name}</strong></p>
<p>Please enter this security code to complete your login:</p>
<div class="code">{mfa_code}</div>
<p>This code will expire in 10 minutes.</p>
<div class="warning">
<strong>⚠️ Important:</strong> If you didn't attempt to log in, please change your password immediately and contact our support team.
</div>
</div>
<div class="footer">
<p>This email was sent to {to_email}<br>
For security questions, contact our support team.</p>
</div>
</div>
</body>
</html>
"""
await self._send_email(to_email, subject, html_content)
logger.info(f"📧 MFA code sent to {to_email} for device {device_name}")
except Exception as e:
logger.error(f"❌ Failed to send MFA email to {to_email}: {e}")
raise
async def _send_email(self, to_email: str, subject: str, html_content: str):
"""Send email using SMTP"""
try:
# Create message
msg = MIMEMultipart('alternative')
msg['From'] = f"{self.from_name} <{self.email_user}>"
msg['To'] = to_email
msg['Subject'] = subject
# Add HTML content
html_part = MIMEText(html_content, 'html')
msg.attach(html_part)
# Send email
with smtplib.SMTP(self.smtp_server, self.smtp_port) as server:
server.starttls()
server.login(self.email_user, self.email_password)
text = msg.as_string()
server.sendmail(self.email_user, to_email, text)
logger.debug(f"📧 Email sent successfully to {to_email}")
except Exception as e:
logger.error(f"❌ SMTP error sending to {to_email}: {e}")
raise
email_service = EmailService()
class EnhancedEmailService:
def __init__(self):
self.smtp_server = os.getenv("SMTP_SERVER", "smtp.gmail.com")
self.smtp_port = int(os.getenv("SMTP_PORT", "587"))
self.email_user = os.getenv("EMAIL_USER", "your-app@example.com")
self.email_password = os.getenv("EMAIL_PASSWORD", "your-app-password")
self.from_name = os.getenv("FROM_NAME", "Backstory")
self.app_name = os.getenv("APP_NAME", "Backstory")
self.frontend_url = os.getenv("FRONTEND_URL", "https://backstory-beta.ketrenos.com")
if not self.smtp_server or self.smtp_port == 0 or self.email_user is None or self.email_password is None:
raise ValueError("SMTP configuration is not set in the environment variables")
def _get_template(self, template_name: str) -> dict:
"""Get email template by name"""
return EMAIL_TEMPLATES.get(template_name, {})
@ -131,8 +279,6 @@ class EmailService:
async def _send_email(self, to_email: str, subject: str, html_content: str):
"""Send email using SMTP with improved error handling"""
try:
if not self.email_user:
raise ValueError("Email user is not configured")
# Create message
msg = MIMEMultipart('alternative')
msg['From'] = f"{self.from_name} <{self.email_user}>"
@ -146,9 +292,6 @@ class EmailService:
# Send email with connection pooling and retry logic
max_retries = 3
if not self.smtp_server or self.smtp_port == 0 or not self.email_user or not self.email_password:
raise ValueError("SMTP configuration is not set in the environment variables")
for attempt in range(max_retries):
try:
with smtplib.SMTP(self.smtp_server, self.smtp_port) as server:
@ -221,66 +364,4 @@ class EmailRateLimiter:
key,
ttl_minutes * 60,
json.dumps([timestamp.isoformat()])
)
class VerificationEmailRateLimiter:
def __init__(self, database: RedisDatabase):
self.database = database
self.max_attempts_per_hour = 3 # Maximum 3 emails per hour
self.max_attempts_per_day = 10 # Maximum 10 emails per day
self.cooldown_minutes = 5 # 5 minute cooldown between emails
async def can_send_verification_email(self, email: str) -> Tuple[bool, str]:
"""
Check if verification email can be sent based on rate limiting
Returns (can_send, reason_if_not)
"""
try:
email_lower = email.lower()
current_time = datetime.now(timezone.utc)
# Check daily limit
daily_count = await self.database.get_verification_attempts_count(email)
if daily_count >= self.max_attempts_per_day:
return False, f"Daily limit reached. You can request up to {self.max_attempts_per_day} verification emails per day."
# Check hourly limit
hour_ago = current_time - timedelta(hours=1)
hourly_key = f"verification_attempts:{email_lower}"
data = await self.database.redis.get(hourly_key)
if data:
attempts_data = json.loads(data)
recent_attempts = [
attempt for attempt in attempts_data
if datetime.fromisoformat(attempt) > hour_ago
]
if len(recent_attempts) >= self.max_attempts_per_hour:
return False, f"Hourly limit reached. You can request up to {self.max_attempts_per_hour} verification emails per hour."
# Check cooldown period
if recent_attempts:
last_attempt = max(datetime.fromisoformat(attempt) for attempt in recent_attempts)
time_since_last = current_time - last_attempt
if time_since_last.total_seconds() < self.cooldown_minutes * 60:
remaining_minutes = self.cooldown_minutes - int(time_since_last.total_seconds() / 60)
return False, f"Please wait {remaining_minutes} more minute(s) before requesting another email."
return True, "OK"
except Exception as e:
logger.error(f"❌ Error checking verification email rate limit: {e}")
# On error, be conservative and deny
return False, "Rate limit check failed. Please try again later."
async def record_email_sent(self, email: str):
"""Record that a verification email was sent"""
await self.database.record_verification_attempt(email)
email_service = EmailService()
)

220
src/backend/email_templates.py
View File

@ -10,93 +10,90 @@ EMAIL_TEMPLATES = {
<title>Email Verification</title>
<style>
body {{
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #2E2E2E;
color: #333;
margin: 0;
padding: 0;
background-color: #D3CDBF;
background-color: #f5f5f5;
}}
.container {{
max-width: 600px;
margin: 0 auto;
background-color: #FFFFFF;
border-radius: 4px;
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-top: 40px;
margin-bottom: 40px;
}}
.header {{
background: linear-gradient(135deg, #1A2536 0%, #4A7A7D 100%);
color: #D3CDBF;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 30px;
text-align: center;
}}
.header h1 {{
margin: 0 0 10px 0;
font-size: 2rem;
font-weight: 500;
color: #D3CDBF;
font-size: 28px;
font-weight: 600;
}}
.header p {{
margin: 0;
opacity: 0.9;
font-size: 1rem;
color: #D3CDBF;
font-size: 16px;
}}
.content {{
padding: 40px 30px;
}}
.content h2 {{
margin: 0 0 20px 0;
color: #2E2E2E;
font-size: 1.75rem;
font-weight: 500;
color: #333;
font-size: 24px;
}}
.button {{
display: inline-block;
background: #D4A017;
color: #FFFFFF;
background: #667eea;
color: white;
padding: 16px 32px;
text-decoration: none;
border-radius: 4px;
font-weight: 500;
border-radius: 8px;
font-weight: 600;
margin: 24px 0;
font-size: 1rem;
font-size: 16px;
transition: background-color 0.3s ease;
}}
.button:hover {{
background: rgba(212, 160, 23, 0.8);
background: #5a6fd8;
}}
.link-text {{
word-break: break-all;
color: #4A7A7D;
background-color: rgba(74, 122, 125, 0.1);
color: #667eea;
background-color: #f8f9ff;
padding: 12px;
border-radius: 4px;
font-family: 'Roboto', monospace;
font-size: 0.875rem;
border-radius: 6px;
font-family: monospace;
font-size: 14px;
margin: 16px 0;
}}
.footer {{
background: #D3CDBF;
background: #f8f9fa;
padding: 30px;
text-align: center;
font-size: 0.875rem;
color: #1A2536;
border-top: 1px solid rgba(26, 37, 54, 0.1);
font-size: 14px;
color: #6c757d;
border-top: 1px solid #e9ecef;
}}
.security-note {{
background: rgba(212, 160, 23, 0.1);
border: 1px solid #D4A017;
background: #fff3cd;
border: 1px solid #ffeaa7;
padding: 16px;
border-radius: 4px;
border-radius: 8px;
margin: 24px 0;
color: #2E2E2E;
color: #856404;
}}
.security-note strong {{
color: #1A2536;
color: #664d03;
}}
</style>
</head>
@ -143,90 +140,83 @@ EMAIL_TEMPLATES = {
<title>Security Code</title>
<style>
body {{
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #2E2E2E;
color: #333;
margin: 0;
padding: 0;
background-color: #D3CDBF;
background-color: #f5f5f5;
}}
.container {{
max-width: 600px;
margin: 40px auto;
background-color: #FFFFFF;
border-radius: 4px;
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}}
.header {{
background: linear-gradient(135deg, #1A2536 0%, #4A7A7D 100%);
color: #D3CDBF;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 30px;
text-align: center;
}}
.header h1 {{
margin: 0 0 10px 0;
font-size: 2rem;
font-weight: 500;
color: #D3CDBF;
font-size: 28px;
font-weight: 600;
}}
.content {{
padding: 40px 30px;
}}
.content h2 {{
margin: 0 0 20px 0;
color: #2E2E2E;
font-size: 1.75rem;
font-weight: 500;
}}
.device-info {{
background: rgba(74, 122, 125, 0.1);
border: 1px solid #4A7A7D;
background: #e3f2fd;
border: 1px solid #2196f3;
padding: 16px;
border-radius: 4px;
border-radius: 8px;
margin: 20px 0;
color: #1A2536;
color: #1565c0;
}}
.code {{
background: #D3CDBF;
border: 3px solid #D4A017;
background: #f8f9fa;
border: 3px solid #667eea;
padding: 24px;
text-align: center;
font-size: 2.25rem;
font-weight: 500;
font-size: 36px;
font-weight: bold;
letter-spacing: 12px;
color: #1A2536;
border-radius: 4px;
color: #667eea;
border-radius: 12px;
margin: 32px 0;
font-family: 'Roboto', 'Courier New', monospace;
font-family: 'Courier New', monospace;
}}
.footer {{
background: #D3CDBF;
background: #f8f9fa;
padding: 30px;
text-align: center;
font-size: 0.875rem;
color: #1A2536;
border-top: 1px solid rgba(26, 37, 54, 0.1);
font-size: 14px;
color: #6c757d;
border-top: 1px solid #e9ecef;
}}
.warning {{
background: rgba(212, 160, 23, 0.1);
border: 1px solid #D4A017;
color: #2E2E2E;
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
padding: 16px;
border-radius: 4px;
border-radius: 8px;
margin: 24px 0;
}}
.warning strong {{
color: #1A2536;
color: #491217;
}}
.expiry-info {{
background: rgba(74, 122, 125, 0.1);
border: 1px solid #4A7A7D;
color: #1A2536;
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
padding: 12px;
border-radius: 4px;
border-radius: 6px;
margin: 16px 0;
font-size: 0.875rem;
font-size: 14px;
text-align: center;
}}
</style>
@ -287,75 +277,44 @@ EMAIL_TEMPLATES = {
<title>Password Reset</title>
<style>
body {{
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #2E2E2E;
color: #333;
margin: 0;
padding: 0;
background-color: #D3CDBF;
background-color: #f5f5f5;
}}
.container {{
max-width: 600px;
margin: 40px auto;
background-color: #FFFFFF;
border-radius: 4px;
background-color: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(26, 37, 54, 0.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}}
.header {{
background: linear-gradient(135deg, #4A7A7D 0%, #1A2536 100%);
color: #D3CDBF;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
padding: 40px 30px;
text-align: center;
}}
.header h1 {{
margin: 0 0 10px 0;
font-size: 2rem;
font-weight: 500;
color: #D3CDBF;
}}
.content {{
padding: 40px 30px;
}}
.content h2 {{
margin: 0 0 20px 0;
color: #2E2E2E;
font-size: 1.75rem;
font-weight: 500;
}}
.content {{ padding: 40px 30px; }}
.button {{
display: inline-block;
background: #D4A017;
color: #FFFFFF;
background: #ff6b6b;
color: white;
padding: 16px 32px;
text-decoration: none;
border-radius: 4px;
font-weight: 500;
border-radius: 8px;
font-weight: 600;
margin: 24px 0;
font-size: 1rem;
transition: background-color 0.3s ease;
}}
.button:hover {{
background: rgba(212, 160, 23, 0.8);
}}
.footer {{
background: #D3CDBF;
background: #f8f9fa;
padding: 30px;
text-align: center;
font-size: 0.875rem;
color: #1A2536;
border-top: 1px solid rgba(26, 37, 54, 0.1);
}}
.security-note {{
background: rgba(212, 160, 23, 0.1);
border: 1px solid #D4A017;
padding: 16px;
border-radius: 4px;
margin: 24px 0;
color: #2E2E2E;
}}
.security-note strong {{
color: #1A2536;
font-size: 14px;
color: #6c757d;
}}
</style>
</head>
@ -373,14 +332,11 @@ EMAIL_TEMPLATES = {
<a href="{reset_link}" class="button">Reset Password</a>
</div>
<div class="security-note">
<strong>Security Information:</strong><br>
This link will expire in 1 hour for security reasons. If you didn't request a password reset, please ignore this email and your password will remain unchanged.
</div>
<p>This link will expire in 1 hour for security reasons.</p>
<p>If you didn't request a password reset, please ignore this email and your password will remain unchanged.</p>
</div>
<div class="footer">
<p><strong>This email was sent to:</strong> {to_email}</p>
<p>If you have any questions, please contact our support team.</p>
<p>This email was sent to {to_email}</p>
<p>&copy; 2024 {app_name}. All rights reserved.</p>
</div>
</div>
@ -388,4 +344,4 @@ EMAIL_TEMPLATES = {
</html>
"""
}
}
}

922
src/backend/main.py
View File

File diff suppressed because it is too large Load Diff

59
src/backend/models.py
View File

@ -1,15 +1,9 @@
from typing import List, Dict, Optional, Any, Union, Literal, TypeVar, Generic, Annotated
from pydantic import BaseModel, Field, EmailStr, HttpUrl, model_validator, field_validator # type: ignore
from pydantic import BaseModel, Field, EmailStr, HttpUrl, model_validator # type: ignore
from pydantic.types import constr, conint # type: ignore
from datetime import datetime, date, UTC
from enum import Enum
import uuid
from auth_utils import (
AuthenticationManager,
validate_password_strength,
sanitize_login_input,
SecurityConfig
)
# Generic type variable
T = TypeVar('T')
@ -196,62 +190,24 @@ class SortOrder(str, Enum):
DESC = "desc"
class LoginRequest(BaseModel):
login: str # Can be email or username
password: str
@field_validator('login')
def sanitize_login(cls, v):
return sanitize_login_input(v)
@field_validator('password')
def validate_password_not_empty(cls, v):
if not v or not v.strip():
raise ValueError('Password cannot be empty')
return v
# ============================
# MFA Models
# ============================
class EmailVerificationRequest(BaseModel):
token: str
class MFARequest(BaseModel):
username: str
email: EmailStr
password: str
device_id: str = Field(..., alias="deviceId")
device_name: str = Field(..., alias="deviceName")
model_config = {
"populate_by_name": True, # Allow both field names and aliases
}
device_id: str
device_name: str
class MFAVerifyRequest(BaseModel):
email: EmailStr
code: str
device_id: str = Field(..., alias="deviceId")
remember_device: bool = Field(False, alias="rememberDevice")
model_config = {
"populate_by_name": True, # Allow both field names and aliases
}
class MFAData(BaseModel):
message: str
device_id: str = Field(..., alias="deviceId")
device_name: str = Field(..., alias="deviceName")
code_sent: str = Field(..., alias="codeSent")
email: str
model_config = {
"populate_by_name": True, # Allow both field names and aliases
}
class MFARequestResponse(BaseModel):
mfa_required: bool = Field(..., alias="mfaRequired")
mfa_data: Optional[MFAData] = Field(None, alias="mfaData")
model_config = {
"populate_by_name": True, # Allow both field names and aliases
}
device_id: str
remember_device: bool = False
class ResendVerificationRequest(BaseModel):
email: EmailStr
@ -445,8 +401,7 @@ class BaseUser(BaseModel):
last_login: Optional[datetime] = Field(None, alias="lastLogin")
profile_image: Optional[str] = Field(None, alias="profileImage")
status: UserStatus
is_admin: bool = Field(default=False, alias="isAdmin")
model_config = {
"populate_by_name": True, # Allow both field names and aliases
"use_enum_values": True # Use enum values instead of names