feat: User onboarding finished
This commit is contained in:
Eric Gullickson
83
frontend/src/features/auth/pages/CallbackPage.tsx
Normal file
83
frontend/src/features/auth/pages/CallbackPage.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* @ai-summary Auth0 callback handler page - routes users based on their status
|
||||
* @ai-context Fetches user status after Auth0 callback and redirects appropriately
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useUserStatus } from '../../../core/auth/useUserStatus';
|
||||
|
||||
export const CallbackPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { data: userStatus, isLoading, error } = useUserStatus();
|
||||
|
||||
// Get returnTo from location state (passed from Auth0Provider onRedirectCallback)
|
||||
const returnTo = (location.state as { returnTo?: string })?.returnTo || '/garage';
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading) return;
|
||||
|
||||
if (error) {
|
||||
console.error('[CallbackPage] Error fetching user status:', error);
|
||||
// On error, redirect to garage and let normal auth flow handle it
|
||||
navigate('/garage', { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (userStatus) {
|
||||
// Note: Unverified users should never reach this page if Auth0 action is configured
|
||||
// But as a safety check, redirect to verify-email if not verified
|
||||
if (!userStatus.emailVerified) {
|
||||
console.log('[CallbackPage] User not verified, redirecting to verify-email');
|
||||
navigate('/verify-email', { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if onboarding is completed
|
||||
if (!userStatus.onboardingCompleted) {
|
||||
console.log('[CallbackPage] User not onboarded, redirecting to onboarding');
|
||||
navigate('/onboarding', { replace: true });
|
||||
return;
|
||||
}
|
||||
|
||||
// User is verified and onboarded - go to requested destination
|
||||
console.log('[CallbackPage] User verified and onboarded, redirecting to:', returnTo);
|
||||
navigate(returnTo, { replace: true });
|
||||
}
|
||||
}, [userStatus, isLoading, error, navigate, returnTo]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-100 mb-4">
|
||||
<svg
|
||||
className="w-8 h-8 text-primary-600 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-slate-800 mb-2">
|
||||
Setting up your session...
|
||||
</h2>
|
||||
<p className="text-slate-600">Please wait while we prepare your garage.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallbackPage;
|
||||
@@ -15,7 +15,11 @@ export const SignupPage: React.FC = () => {
|
||||
const handleSubmit = (data: SignupRequest) => {
|
||||
signup(data, {
|
||||
onSuccess: () => {
|
||||
navigate('/verify-email');
|
||||
// Store email in localStorage for post-verification login_hint
|
||||
// (navigation state is lost when Auth0 redirects after verification)
|
||||
localStorage.setItem('pendingVerificationEmail', data.email);
|
||||
// Pass email to verify-email page for resend functionality
|
||||
navigate('/verify-email', { state: { email: data.email } });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,33 +1,112 @@
|
||||
/**
|
||||
* @ai-summary Desktop email verification page with polling and resend functionality
|
||||
* @ai-summary Desktop "Check Your Email" page - handles both pre-verification and post-verification states
|
||||
* @ai-context No authentication required - auto-triggers login when verification success is detected
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useVerifyStatus, useResendVerification } from '../hooks/useVerifyStatus';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useAuth0 } from '@auth0/auth0-react';
|
||||
import { useResendVerificationPublic } from '../hooks/useVerifyStatus';
|
||||
import { Button } from '../../../shared-minimal/components/Button';
|
||||
|
||||
export const VerifyEmailPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { data: verifyStatus, isLoading } = useVerifyStatus({
|
||||
enablePolling: true,
|
||||
});
|
||||
const { mutate: resendVerification, isPending: isResending } = useResendVerification();
|
||||
const location = useLocation();
|
||||
const { loginWithRedirect, isAuthenticated, isLoading: isAuthLoading } = useAuth0();
|
||||
const { mutate: resendVerification, isPending: isResending } = useResendVerificationPublic();
|
||||
|
||||
// Track if auto-login is in progress
|
||||
const [isAutoLoginTriggered, setIsAutoLoginTriggered] = useState(false);
|
||||
|
||||
// Get email from navigation state (passed from signup page) or localStorage
|
||||
// localStorage is used when Auth0 redirects after verification (state is lost)
|
||||
const stateEmail = (location.state as { email?: string })?.email || '';
|
||||
const storedEmail = localStorage.getItem('pendingVerificationEmail') || '';
|
||||
const email = stateEmail || storedEmail;
|
||||
|
||||
// Parse URL search params for verification success detection
|
||||
// Auth0 redirects with ?message=Your%20email%20was%20verified... on success
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const message = searchParams.get('message');
|
||||
const verificationSuccessful = message && message.toLowerCase().includes('verified');
|
||||
|
||||
// Auto-login effect: triggers when verification success is detected
|
||||
useEffect(() => {
|
||||
if (verifyStatus?.emailVerified) {
|
||||
navigate('/onboarding');
|
||||
if (isAuthLoading) return;
|
||||
if (isAuthenticated) return;
|
||||
|
||||
if (verificationSuccessful && !isAutoLoginTriggered) {
|
||||
setIsAutoLoginTriggered(true);
|
||||
console.log('[VerifyEmailPage] Verification success detected, triggering auto-login with email:', email);
|
||||
|
||||
// Clear the stored email after successful verification
|
||||
localStorage.removeItem('pendingVerificationEmail');
|
||||
|
||||
// Redirect to Auth0 login with email pre-filled
|
||||
loginWithRedirect({
|
||||
appState: { returnTo: '/callback' },
|
||||
authorizationParams: {
|
||||
login_hint: email || undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
}, [verifyStatus, navigate]);
|
||||
}, [verificationSuccessful, isAuthenticated, isAuthLoading, isAutoLoginTriggered, loginWithRedirect, email]);
|
||||
|
||||
const handleResend = () => {
|
||||
resendVerification();
|
||||
if (email) {
|
||||
resendVerification(email);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
const handleBackToLogin = () => {
|
||||
loginWithRedirect();
|
||||
};
|
||||
|
||||
// Show loading state when auto-login is in progress
|
||||
if (isAutoLoginTriggered || (verificationSuccessful && !isAuthLoading)) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
|
||||
<div className="text-lg text-gray-600">Loading...</div>
|
||||
<div className="text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
|
||||
<svg
|
||||
className="w-8 h-8 text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-xl font-semibold text-slate-800 mb-2">
|
||||
Email Verified!
|
||||
</h2>
|
||||
<p className="text-slate-600 mb-4">Logging you in automatically...</p>
|
||||
<div className="inline-flex items-center justify-center w-8 h-8">
|
||||
<svg
|
||||
className="w-8 h-8 text-primary-600 animate-spin"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -56,27 +135,41 @@ export const VerifyEmailPage: React.FC = () => {
|
||||
<p className="text-gray-600">
|
||||
We've sent a verification link to
|
||||
</p>
|
||||
<p className="text-primary-600 font-medium mt-1">
|
||||
{verifyStatus?.email}
|
||||
</p>
|
||||
{email && (
|
||||
<p className="text-primary-600 font-medium mt-1">
|
||||
{email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-slate-50 rounded-lg p-4 text-sm text-gray-700">
|
||||
<p className="mb-2">Click the link in the email to verify your account.</p>
|
||||
<p>Once verified, you'll be automatically redirected to complete your profile.</p>
|
||||
<p>Once verified, you can log in to complete your profile setup.</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600 mb-3">Didn't receive the email?</p>
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
onClick={handleResend}
|
||||
loading={isResending}
|
||||
variant="secondary"
|
||||
onClick={handleBackToLogin}
|
||||
variant="primary"
|
||||
className="w-full min-h-[44px]"
|
||||
>
|
||||
Resend Verification Email
|
||||
Back to Login
|
||||
</Button>
|
||||
|
||||
{email && (
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-600 mb-2">Didn't receive the email?</p>
|
||||
<Button
|
||||
onClick={handleResend}
|
||||
loading={isResending}
|
||||
variant="secondary"
|
||||
className="w-full min-h-[44px]"
|
||||
>
|
||||
Resend Verification Email
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user