Auth Pages Redesign — Feature Spec¶

// Pseudo-structure
export default function Auth() {
  const [searchParams, setSearchParams] = useSearchParams();
  const tab = searchParams.get('tab') === 'signup' ? 'signup' : 'signin';
  const [phase, setPhase] = useState<'form' | 'verify' | 'success'>('form');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [code, setCode] = useState('');
  const [err, setErr] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const { signIn, isLoaded: signInLoaded } = useSignIn();
  const { signUp, isLoaded: signUpLoaded, setActive } = useSignUp();
  const navigate = useNavigate();

  // ── Google OAuth ──
  const handleGoogle = async () => {
    if (tab === 'signin' && signInLoaded) {
      await signIn.authenticateWithRedirect({
        strategy: 'oauth_google',
        redirectUrl: '/sso-callback',
        redirectUrlComplete: '/app',
      });
    } else if (signUpLoaded) {
      await signUp.authenticateWithRedirect({
        strategy: 'oauth_google',
        redirectUrl: '/sso-callback',
        redirectUrlComplete: '/app',
      });
    }
  };

  // ── Email/password Sign In ──
  const handleSignIn = async (e: FormEvent) => {
    e.preventDefault();
    if (!signInLoaded) return;
    setBusy(true); setErr(null);
    try {
      const result = await signIn.create({ identifier: email, password });
      if (result.status === 'complete') {
        await setActive({ session: result.createdSessionId });
        navigate('/app');
      }
    } catch (e: any) {
      setErr(e.errors?.[0]?.longMessage ?? 'Could not sign in.');
    } finally {
      setBusy(false);
    }
  };

  // ── Email/password Sign Up + verification ──
  const handleSignUp = async (e: FormEvent) => {
    e.preventDefault();
    if (!signUpLoaded) return;
    setBusy(true); setErr(null);
    try {
      await signUp.create({ emailAddress: email, password });
      await signUp.prepareEmailAddressVerification({ strategy: 'email_code' });
      setPhase('verify');
    } catch (e: any) {
      setErr(e.errors?.[0]?.longMessage ?? 'Could not create account.');
    } finally {
      setBusy(false);
    }
  };

  const handleVerify = async (e: FormEvent) => {
    e.preventDefault();
    if (!signUpLoaded) return;
    setBusy(true); setErr(null);
    try {
      const result = await signUp.attemptEmailAddressVerification({ code });
      if (result.status === 'complete') {
        await setActive({ session: result.createdSessionId });
        navigate('/app');
      }
    } catch (e: any) {
      setErr(e.errors?.[0]?.longMessage ?? 'Invalid verification code.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <StorefrontLayout>
      <div className="min-h-[calc(100vh-200px)] flex flex-col items-center justify-center px-4 py-12">
        <h1 className="text-4xl font-bold text-deep-ocean text-center mb-3">
          Start Your Healthcare Journey
        </h1>
        <p className="text-gray-600 text-center mb-10 max-w-md">
          Get personalized treatment recommendations and connect with quality hospitals.
        </p>

        <Card className="w-full max-w-[420px] shadow-lg border-gray-100">
          <CardContent className="p-8">
            <h2 className="text-2xl font-bold text-deep-ocean text-center">
              Welcome to Curaway
            </h2>
            <p className="text-sm text-gray-500 text-center mb-6 mt-2">
              Sign in or create an account to get your free consultation
            </p>

            {phase === 'form' && (
              <>
                <Button onClick={handleGoogle} variant="outline" className="w-full mb-6">
                  <GoogleIcon className="w-4 h-4 mr-2" />
                  Continue with Google
                </Button>

                <div className="flex items-center gap-3 mb-6">
                  <div className="flex-1 h-px bg-gray-200" />
                  <span className="text-xs text-gray-400 uppercase tracking-wide">
                    Or continue with email
                  </span>
                  <div className="flex-1 h-px bg-gray-200" />
                </div>

                <Tabs value={tab} onValueChange={(v) => setSearchParams({ tab: v })}>
                  <TabsList className="grid grid-cols-2 mb-6">
                    <TabsTrigger value="signin">Sign In</TabsTrigger>
                    <TabsTrigger value="signup">Sign Up</TabsTrigger>
                  </TabsList>

                  <TabsContent value="signin">
                    <form onSubmit={handleSignIn} className="space-y-4">
                      <EmailField value={email} onChange={setEmail} error={err} />
                      <PasswordField value={password} onChange={setPassword} />
                      {err && <p className="text-sm text-red-600">{err}</p>}
                      <Button type="submit" disabled={busy} className="w-full bg-teal hover:bg-deep-ocean">
                        {busy ? <Spinner /> : <>Sign In <ArrowRight className="ml-2 w-4 h-4" /></>}
                      </Button>
                    </form>
                  </TabsContent>

                  <TabsContent value="signup">
                    <form onSubmit={handleSignUp} className="space-y-4">
                      <EmailField value={email} onChange={setEmail} error={err} />
                      <PasswordField value={password} onChange={setPassword} />
                      {err && <p className="text-sm text-red-600">{err}</p>}
                      <Button type="submit" disabled={busy} className="w-full bg-teal hover:bg-deep-ocean">
                        {busy ? <Spinner /> : <>Create Account <ArrowRight className="ml-2 w-4 h-4" /></>}
                      </Button>
                    </form>
                  </TabsContent>
                </Tabs>

                <p className="text-xs text-gray-400 text-center mt-6">
                  By continuing, you agree to our{' '}
                  <Link to="/legal/terms" className="underline">Terms of Service</Link>
                  {' '}and{' '}
                  <Link to="/legal/privacy" className="underline">Privacy Policy</Link>
                </p>
              </>
            )}

            {phase === 'verify' && (
              <VerifyPanel
                email={email}
                code={code}
                onCodeChange={setCode}
                onSubmit={handleVerify}
                onResend={() => signUp?.prepareEmailAddressVerification({ strategy: 'email_code' })}
                busy={busy}
                error={err}
              />
            )}
          </CardContent>
        </Card>
      </div>
    </StorefrontLayout>
  );
}

import { AuthenticateWithRedirectCallback } from '@clerk/clerk-react';

export default function SsoCallback() {
  return <AuthenticateWithRedirectCallback signInForceRedirectUrl="/app" />;
}

// Before
<Route path="/sign-in" element={<SignInPage />} />
<Route path="/sign-up" element={<SignUpPage />} />

// After
<Route path="/auth" element={<Auth />} />
<Route path="/sso-callback" element={<SsoCallback />} />
<Route path="/sign-in" element={<Navigate to="/auth?tab=signin" replace />} />
<Route path="/sign-up" element={<Navigate to="/auth?tab=signup" replace />} />