fix(auth): restore email verification login flow from main
The frontend ApiClient had a non-existent `/auth/login` endpoint. Restored the two-step `sendCode` + `verifyCode` flow matching the backend, including OTP input UI and CLI browser login callback support. Also restored `IF NOT EXISTS` in migration 012 to prevent failures on databases where the column already exists. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing
parent
f70b34a50f
commit
8366e91b95
4 changed files with 174 additions and 33 deletions
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { Suspense, useState } from "react";
|
||||
import { Suspense, useState, useEffect, useCallback } from "react";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { useAuthStore } from "@/features/auth";
|
||||
import { useWorkspaceStore } from "@/features/workspace";
|
||||
|
|
@ -16,20 +16,34 @@ import {
|
|||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSlot,
|
||||
} from "@/components/ui/input-otp";
|
||||
|
||||
function LoginPageContent() {
|
||||
const router = useRouter();
|
||||
const login = useAuthStore((s) => s.login);
|
||||
const isLoading = useAuthStore((s) => s.isLoading);
|
||||
const sendCode = useAuthStore((s) => s.sendCode);
|
||||
const verifyCode = useAuthStore((s) => s.verifyCode);
|
||||
const hydrateWorkspace = useWorkspaceStore((s) => s.hydrateWorkspace);
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [step, setStep] = useState<"email" | "code">("email");
|
||||
const [email, setEmail] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [code, setCode] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [cooldown, setCooldown] = useState(0);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
useEffect(() => {
|
||||
if (cooldown <= 0) return;
|
||||
const timer = setTimeout(() => setCooldown((c) => c - 1), 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [cooldown]);
|
||||
|
||||
const handleSendCode = async (e?: React.FormEvent) => {
|
||||
e?.preventDefault();
|
||||
if (!email) {
|
||||
setError("Email is required");
|
||||
return;
|
||||
|
|
@ -37,16 +51,141 @@ function LoginPageContent() {
|
|||
setError("");
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await login(email, name || undefined);
|
||||
const wsList = await api.listWorkspaces();
|
||||
await hydrateWorkspace(wsList);
|
||||
router.push(searchParams.get("next") || "/issues");
|
||||
} catch {
|
||||
setError("Login failed. Make sure the server is running.");
|
||||
await sendCode(email);
|
||||
setStep("code");
|
||||
setCode("");
|
||||
setCooldown(10);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to send code. Make sure the server is running."
|
||||
);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyCode = useCallback(
|
||||
async (value: string) => {
|
||||
if (value.length !== 6) return;
|
||||
setError("");
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const cliCallback = searchParams.get("cli_callback");
|
||||
if (cliCallback) {
|
||||
try {
|
||||
const cbUrl = new URL(cliCallback);
|
||||
if (cbUrl.protocol !== "http:") {
|
||||
setError("Invalid callback URL");
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
if (cbUrl.hostname !== "localhost" && cbUrl.hostname !== "127.0.0.1") {
|
||||
setError("Invalid callback URL");
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
setError("Invalid callback URL");
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
const { token } = await api.verifyCode(email, value);
|
||||
const cliState = searchParams.get("cli_state") || "";
|
||||
const separator = cliCallback.includes("?") ? "&" : "?";
|
||||
window.location.href = `${cliCallback}${separator}token=${encodeURIComponent(token)}&state=${encodeURIComponent(cliState)}`;
|
||||
return;
|
||||
}
|
||||
|
||||
await verifyCode(email, value);
|
||||
const wsList = await api.listWorkspaces();
|
||||
await hydrateWorkspace(wsList);
|
||||
router.push(searchParams.get("next") || "/issues");
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Invalid or expired code"
|
||||
);
|
||||
setCode("");
|
||||
setSubmitting(false);
|
||||
}
|
||||
},
|
||||
[email, verifyCode, hydrateWorkspace, router, searchParams]
|
||||
);
|
||||
|
||||
const handleResend = async () => {
|
||||
if (cooldown > 0) return;
|
||||
setError("");
|
||||
try {
|
||||
await sendCode(email);
|
||||
setCooldown(10);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to resend code"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (step === "code") {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">Check your email</CardTitle>
|
||||
<CardDescription>
|
||||
We sent a verification code to{" "}
|
||||
<span className="font-medium text-foreground">{email}</span>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center gap-4">
|
||||
<InputOTP
|
||||
maxLength={6}
|
||||
value={code}
|
||||
onChange={(value) => {
|
||||
setCode(value);
|
||||
if (value.length === 6) handleVerifyCode(value);
|
||||
}}
|
||||
disabled={submitting}
|
||||
>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">{error}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleResend}
|
||||
disabled={cooldown > 0}
|
||||
className="text-primary underline-offset-4 hover:underline disabled:text-muted-foreground disabled:no-underline disabled:cursor-not-allowed"
|
||||
>
|
||||
{cooldown > 0 ? `Resend in ${cooldown}s` : "Resend code"}
|
||||
</button>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
setStep("email");
|
||||
setCode("");
|
||||
setError("");
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<Card className="w-full max-w-sm">
|
||||
|
|
@ -55,17 +194,7 @@ function LoginPageContent() {
|
|||
<CardDescription>AI-native task management</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form id="login-form" onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<form id="login-form" onSubmit={handleSendCode} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
|
|
@ -86,11 +215,11 @@ function LoginPageContent() {
|
|||
<Button
|
||||
type="submit"
|
||||
form="login-form"
|
||||
disabled={submitting || isLoading}
|
||||
disabled={submitting}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
>
|
||||
{submitting ? "Signing in..." : "Sign in"}
|
||||
{submitting ? "Sending code..." : "Continue"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ interface AuthState {
|
|||
isLoading: boolean;
|
||||
|
||||
initialize: () => Promise<void>;
|
||||
login: (email: string, name?: string) => Promise<User>;
|
||||
sendCode: (email: string) => Promise<void>;
|
||||
verifyCode: (email: string, code: string) => Promise<User>;
|
||||
logout: () => void;
|
||||
setUser: (user: User) => void;
|
||||
}
|
||||
|
|
@ -39,8 +40,12 @@ export const useAuthStore = create<AuthState>((set) => ({
|
|||
}
|
||||
},
|
||||
|
||||
login: async (email: string, name?: string) => {
|
||||
const { token, user } = await api.login(email, name);
|
||||
sendCode: async (email: string) => {
|
||||
await api.sendCode(email);
|
||||
},
|
||||
|
||||
verifyCode: async (email: string, code: string) => {
|
||||
const { token, user } = await api.verifyCode(email, code);
|
||||
localStorage.setItem("multica_token", token);
|
||||
api.setToken(token);
|
||||
set({ user });
|
||||
|
|
|
|||
|
|
@ -112,10 +112,17 @@ export class ApiClient {
|
|||
}
|
||||
|
||||
// Auth
|
||||
async login(email: string, name?: string): Promise<LoginResponse> {
|
||||
return this.fetch("/auth/login", {
|
||||
async sendCode(email: string): Promise<void> {
|
||||
await this.fetch("/auth/send-code", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, name }),
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
}
|
||||
|
||||
async verifyCode(email: string, code: string): Promise<LoginResponse> {
|
||||
return this.fetch("/auth/verify-code", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ email, code }),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
ALTER TABLE inbox_item ADD COLUMN actor_type TEXT;
|
||||
ALTER TABLE inbox_item ADD COLUMN actor_id UUID;
|
||||
ALTER TABLE inbox_item ADD COLUMN IF NOT EXISTS actor_type TEXT;
|
||||
ALTER TABLE inbox_item ADD COLUMN IF NOT EXISTS actor_id UUID;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue