Blame for frontend/src/pages/AuthPage.tsx

import { useEffect, useRef, useState, type FormEvent } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { authApi, safeNext, type LoginResult, type Providers } from "../api/auth";
import { ApiError } from "../api/client";
import Logo from "../components/Logo";
import SkyCanvas from "../components/SkyCanvas";
import { useAuth } from "../hooks/useAuth";

/** Mirrors validate_password on the backend. */
const MIN_PASSWORD = 8;

type Mode = "signin" | "signup" | "verify" | "forgot" | "reset";

declare global {
  interface Window {
    google?: {
      accounts: {
        id: {
          initialize: (cfg: { client_id: string; callback: (r: { credential: string }) => void }) => void;
          renderButton: (el: HTMLElement, opts: Record<string, unknown>) => void;
        };
      };
    };
  }
}

const GOOGLE_CLIENT_ID = (import.meta.env.VITE_GOOGLE_CLIENT_ID || import.meta.env.GOOGLE_CLIENT_ID) as
  | string
  | undefined;

function GoogleRedirectButton({ next }: { next: string }) {
  return (
    <a className="btn google-redirect-btn" href={authApi.googleStartUrl(next)}>
      <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
        <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z" />
        <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z" />
        <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z" />
        <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z" />
      </svg>
      Continue with Google
    </a>
  );
}

function GoogleButton({ onCredential }: { onCredential: (c: string) => void }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!GOOGLE_CLIENT_ID || !ref.current) return;
    const render = () => {
      if (!window.google || !ref.current) return;
      window.google.accounts.id.initialize({ client_id: GOOGLE_CLIENT_ID, callback: (r) => onCredential(r.credential) });
      window.google.accounts.id.renderButton(ref.current, {
        theme: "filled_black",
        size: "large",
        shape: "pill",
        text: "continue_with",
        width: 320,
      });
    };
    if (window.google) return render();
    const script = document.createElement("script");
    script.src = "https://accounts.google.com/gsi/client";
    script.async = true;
    script.onload = render;
    document.head.appendChild(script);
  }, [onCredential]);

  if (!GOOGLE_CLIENT_ID) {
    return null;
  }
  return <div ref={ref} className="google-btn" />;
}

export default function AuthPage() {
  const [params] = useSearchParams();
  const [mode, setMode] = useState<Mode>(params.get("mode") === "signup" ? "signup" : "signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [code, setCode] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  // The current code is out of tries or expired: the only ways forward are a new code or a new email.
  const [codeDead, setCodeDead] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [providers, setProviders] = useState<Providers | null>(null);
  const [isNew, setIsNew] = useState(false);
  const { complete, user } = useAuth();
  const navigate = useNavigate();
  const next = safeNext(params.get("next"));

  useEffect(() => {
    // New accounts get onboarding, except people who signed up to use a free tool: send them straight back to it.
    if (user) navigate(isNew && !next.startsWith("/tools/") ? "/welcome" : next, { replace: true });
  }, [user, navigate, next, isNew]);

  useEffect(() => {
    authApi
      .providers()
      .then(setProviders)
      .catch(() => setProviders({ google: GOOGLE_CLIENT_ID ? "popup" : null }));
  }, []);

  // The Google redirect flow lands back here with #error=... when it fails.
  useEffect(() => {
    const failure = new URLSearchParams(window.location.hash.slice(1)).get("error");
    if (!failure) return;
    setError(failure);
    window.history.replaceState(null, "", window.location.pathname + window.location.search);
  }, []);

  const run = async (fn: () => Promise<LoginResult | void>) => {
    setBusy(true);
    setError(null);
    try {
      const result = await fn();
      if (result) {
        if (result.created) setIsNew(true);
        complete(result);
      }
    } catch (e) {
      setError(e instanceof ApiError ? e.message : "Something went wrong. Try again.");
      if (!(e instanceof ApiError)) return;
      // A dead code cannot be retried; clear it so the next step is clearly "Resend code".
      if (e.code === "too_many_attempts" || e.code === "expired") {
        setCode("");
        setCodeDead(true);
      }
      // Registered with the other method: back to sign in, where the Google button sits.
      if (e.code === "wrong_provider") setMode("signin");
    } finally {
      setBusy(false);
    }
  };

  useEffect(() => setCodeDead(false), [mode]);

  const resend = () =>
    run(async () => {
      if (mode === "verify") await authApi.registerResend(email);
      else await authApi.forgotStart(email);
      setCodeDead(false);
      setNotice("New code sent.");
    });

  const tryAnotherEmail = () => {
    setCode("");
    setError(null);
    setNotice(null);
    setMode(mode === "verify" ? "signup" : "forgot");
  };

  const onGoogle = (credential: string) => run(() => authApi.google(credential));

  const submit = (e: FormEvent) => {
    e.preventDefault();
    if (mode === "signin") return run(() => authApi.login(email, password));
    if (mode === "signup")
      return run(async () => {
        await authApi.registerStart(email, password, name);
        setMode("verify");
        setNotice(`We sent a 6 digit code to ${email}.`);
      });
    if (mode === "verify") return run(() => authApi.registerVerify(email, code));
    if (mode === "forgot")
      return run(async () => {
        await authApi.forgotStart(email);
        setMode("reset");
        setNotice(`We sent a reset code to ${email}.`);
      });
    return run(() => authApi.forgotComplete(email, code, password));
  };

  // New passwords (sign up, reset) must meet the length rule before the form can be sent.
  const passwordTooShort = (mode === "signup" || mode === "reset") && password.length < MIN_PASSWORD;

  const titles: Record<Mode, string> = {
    signin: "Welcome back",
    signup: "Create your account",
    verify: "Check your email",
    forgot: "Reset your password",
    reset: "Choose a new password",
  };
  const cta: Record<Mode, string> = {
    signin: "Sign in",
    signup: "Send my code",
    verify: "Verify and continue",
    forgot: "Send reset code",
    reset: "Save and sign in",
  };

  return (
    <div className="page auth-page">
      <SkyCanvas intensity={0.8} />
      <main className="auth-wrap">
        <Link to="/" className="auth-logo" aria-label="Notestack home">
          <Logo size={40} />
        </Link>
        <div className="card auth-card active">
          <h1 className="auth-title">{titles[mode]}</h1>
          {notice && <p className="muted auth-notice">{notice}</p>}

          {(mode === "signin" || mode === "signup") && (
            <>
              {providers?.google === "redirect" && <GoogleRedirectButton next={next} />}
              {providers?.google === "popup" && <GoogleButton onCredential={onGoogle} />}
              {!providers && <div className="google-btn" />}
              <div className="auth-divider mono">
                <span>or with email</span>
              </div>
            </>
          )}

          <form onSubmit={submit} className="auth-form">
            {mode === "signup" && (
              <label>
                <span>Name</span>
                <input className="input" value={name} onChange={(e) => setName(e.target.value)} autoComplete="name" />
              </label>
            )}
            {mode !== "verify" && mode !== "reset" && (
              <label>
                <span>Email</span>
                <input
                  className="input"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  autoComplete="email"
                />
              </label>
            )}
            {(mode === "verify" || mode === "reset") && (
              <label>
                <span>6 digit code</span>
                <input
                  className="input code-input"
                  inputMode="numeric"
                  pattern="[0-9]{6}"
                  maxLength={6}
                  required
                  value={code}
                  onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
                  autoComplete="one-time-code"
                />
              </label>
            )}
            {(mode === "signin" || mode === "signup" || mode === "reset") && (
              <label>
                <span>{mode === "reset" ? "New password" : "Password"}</span>
                <div className="password-field">
                  <input
                    className="input"
                    type={showPassword ? "text" : "password"}
                    required
                    minLength={MIN_PASSWORD}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    autoComplete={mode === "signin" ? "current-password" : "new-password"}
                  />
                  <button
                    type="button"
                    className="icon-btn password-toggle"
                    onClick={() => setShowPassword((v) => !v)}
                    aria-label={showPassword ? "Hide password" : "Show password"}
                    aria-pressed={showPassword}
                    title={showPassword ? "Hide password" : "Show password"}
                  >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <path d="M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12z" />
                      <circle cx="12" cy="12" r="3" />
                      {showPassword && <path d="M4 20L20 4" />}
                    </svg>
                  </button>
                </div>
                {mode !== "signin" && <span className="muted small">At least {MIN_PASSWORD} characters.</span>}
              </label>
            )}
            {error && (
              <p className="error-text" role="alert">
                {error}
              </p>
            )}
            {codeDead ? (
              <button type="button" className="btn btn-primary" disabled={busy} onClick={resend}>
                {busy ? "Working..." : "Resend code"}
              </button>
            ) : (
              <button type="submit" className="btn btn-primary" disabled={busy || passwordTooShort}>
                {busy ? "Working..." : cta[mode]}
              </button>
            )}
          </form>

          <div className="auth-switch muted">
            {mode === "signin" && (
              <>
                <button type="button" className="link-btn" onClick={() => setMode("forgot")}>
                  Forgot password?
                </button>
                <span>
                  New here?{" "}
                  <button type="button" className="link-btn" onClick={() => setMode("signup")}>
                    Create an account
                  </button>
                </span>
              </>
            )}
            {mode === "signup" && (
              <span>
                Have an account?{" "}
                <button type="button" className="link-btn" onClick={() => setMode("signin")}>
                  Sign in
                </button>
              </span>
            )}
            {(mode === "verify" || mode === "reset") &&
              (codeDead ? (
                <button type="button" className="link-btn" onClick={tryAnotherEmail}>
                  Try with another email
                </button>
              ) : (
                <button type="button" className="link-btn" onClick={resend}>
                  Resend code
                </button>
              ))}
            {(mode === "forgot" || mode === "reset") && (
              <button type="button" className="link-btn" onClick={() => setMode("signin")}>
                Back to sign in
              </button>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}