0ct0pu5/pangolin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add 2fa form to login

Browse source
This commit is contained in:
Milo Schwartz 2024-12-22 14:38:17 -05:00
parent 8e544cca42
commit 9c37036a39
No known key found for this signature in database
1 changed files with 162 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

218
src/components/LoginForm.tsx
View file

@ -12,14 +12,14 @@ import {
FormField, FormField,
FormItem, FormItem,
FormLabel, FormLabel,
FormMessage, FormMessage
} from "@/components/ui/form"; } from "@/components/ui/form";
import { import {
Card, Card,
CardContent, CardContent,
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert"; import { Alert, AlertDescription } from "@/components/ui/alert";
import { LoginResponse } from "@server/routers/auth"; import { LoginResponse } from "@server/routers/auth";
@ -29,6 +29,12 @@ import { formatAxiosError } from "@app/lib/utils";
import { LockIcon } from "lucide-react"; import { LockIcon } from "lucide-react";
import { createApiClient } from "@app/api"; import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot
} from "./ui/input-otp";
type LoginFormProps = { type LoginFormProps = {
redirect?: string; redirect?: string;
@ -39,7 +45,11 @@ const formSchema = z.object({
email: z.string().email({ message: "Invalid email address" }), email: z.string().email({ message: "Invalid email address" }),
password: z password: z
.string() .string()
.min(8, { message: "Password must be at least 8 characters" }), .min(8, { message: "Password must be at least 8 characters" })
});
const mfaSchema = z.object({
code: z.string().length(6, { message: "Invalid code" })
}); });
export default function LoginForm({ redirect, onLogin }: LoginFormProps) { export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
@ -50,17 +60,26 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [mfaRequested, setMfaRequested] = useState(false);
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { defaultValues: {
email: "", email: "",
password: "", password: ""
}, }
}); });
async function onSubmit(values: z.infer<typeof formSchema>) { const mfaForm = useForm<z.infer<typeof mfaSchema>>({
const { email, password } = values; resolver: zodResolver(mfaSchema),
defaultValues: {
code: ""
}
});
async function onSubmit(values: any) {
const { email, password } = form.getValues();
const { code } = mfaForm.getValues()
setLoading(true); setLoading(true);
@ -68,18 +87,30 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
.post<AxiosResponse<LoginResponse>>("/auth/login", { .post<AxiosResponse<LoginResponse>>("/auth/login", {
email, email,
password, password,
code
}) })
.catch((e) => { .catch((e) => {
console.error(e); console.error(e);
setError( setError(
formatAxiosError(e, "An error occurred while logging in"), formatAxiosError(e, "An error occurred while logging in")
); );
}); });
if (res && res.status === 200) { if (res) {
setError(null); setError(null);
if (res.data?.data?.emailVerificationRequired) { const data = res.data.data;
console.log(data);
if (data?.codeRequested) {
setMfaRequested(true);
setLoading(false);
mfaForm.reset();
return;
}
if (data?.emailVerificationRequired) {
if (redirect) { if (redirect) {
router.push(`/auth/verify-email?redirect=${redirect}`); router.push(`/auth/verify-email?redirect=${redirect}`);
} else { } else {
@ -97,51 +128,126 @@ export default function LoginForm({ redirect, onLogin }: LoginFormProps) {
} }
return ( return (
<Form {...form}> <div>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8"> {!mfaRequested && (
<FormField <Form {...form}>
control={form.control} <form
name="email" onSubmit={form.handleSubmit(onSubmit)}
render={({ field }) => ( className="space-y-8"
<FormItem> >
<FormLabel>Email</FormLabel> <FormField
<FormControl> control={form.control}
<Input name="email"
placeholder="Enter your email" render={({ field }) => (
{...field} <FormItem>
/> <FormLabel>Email</FormLabel>
</FormControl> <FormControl>
<FormMessage /> <Input
</FormItem> placeholder="Enter your email"
)} {...field}
/> />
<FormField </FormControl>
control={form.control} <FormMessage />
name="password" </FormItem>
render={({ field }) => ( )}
<FormItem> />
<FormLabel>Password</FormLabel> <FormField
<FormControl> control={form.control}
<Input name="password"
type="password" render={({ field }) => (
placeholder="Enter your password" <FormItem>
{...field} <FormLabel>Password</FormLabel>
/> <FormControl>
</FormControl> <Input
<FormMessage /> type="password"
</FormItem> placeholder="Enter your password"
)} {...field}
/> />
{error && ( </FormControl>
<Alert variant="destructive"> <FormMessage />
<AlertDescription>{error}</AlertDescription> </FormItem>
</Alert> )}
)} />
<Button type="submit" className="w-full" loading={loading}> {error && (
<LockIcon className="w-4 h-4 mr-2" /> <Alert variant="destructive">
Login <AlertDescription>{error}</AlertDescription>
</Button> </Alert>
</form> )}
</Form> <Button
type="submit"
className="w-full"
loading={loading}
>
<LockIcon className="w-4 h-4 mr-2" />
Login
</Button>
</form>
</Form>
)}
{mfaRequested && (
<Form {...mfaForm}>
<form
onSubmit={mfaForm.handleSubmit(onSubmit)}
className="space-y-8"
>
<FormField
control={mfaForm.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>Authenticator Code</FormLabel>
<FormControl>
<div className="flex justify-center">
<InputOTP maxLength={6} {...field}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="space-y-4">
<Button
type="submit"
className="w-full"
loading={loading}
>
<LockIcon className="w-4 h-4 mr-2" />
Submit Code
</Button>
<Button
type="button"
className="w-full"
variant="outline"
onClick={() => {
setMfaRequested(false);
mfaForm.reset();
}}
>
Back to Login
</Button>
</div>
</form>
</Form>
)}
</div>
); );
} }