feat: add 2FA verification to auth provider
- Introduced `verify2fa` method for handling two-factor authentication. - Updated `login` to support 2FA response handling. - Enhanced `AuthContext` with new `verify2fa` method and types.
This commit is contained in:
Mathis HERRIOT
213
frontend/src/components/two-factor-setup.tsx
Normal file
213
frontend/src/components/two-factor-setup.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Shield, ShieldCheck, ShieldAlert, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSeparator,
|
||||
InputOTPSlot,
|
||||
} from "@/components/ui/input-otp";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
import { useAuth } from "@/providers/auth-provider";
|
||||
|
||||
export function TwoFactorSetup() {
|
||||
const { user, refreshUser } = useAuth();
|
||||
const [step, setStep] = useState<"idle" | "setup" | "verify">("idle");
|
||||
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||
const [secret, setSecret] = useState<string | null>(null);
|
||||
const [otpValue, setOtpValue] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSetup = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const data = await AuthService.setup2fa();
|
||||
setQrCode(data.qrCodeUrl);
|
||||
setSecret(data.secret);
|
||||
setStep("setup");
|
||||
} catch (error) {
|
||||
toast.error("Erreur lors de la configuration de la 2FA.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEnable = async () => {
|
||||
if (otpValue.length !== 6) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await AuthService.enable2fa(otpValue);
|
||||
toast.success("Double authentification activée !");
|
||||
await refreshUser();
|
||||
setStep("idle");
|
||||
setOtpValue("");
|
||||
} catch (error) {
|
||||
toast.error("Code invalide. Veuillez réessayer.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisable = async () => {
|
||||
if (otpValue.length !== 6) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await AuthService.disable2fa(otpValue);
|
||||
toast.success("Double authentification désactivée.");
|
||||
await refreshUser();
|
||||
setStep("idle");
|
||||
setOtpValue("");
|
||||
} catch (error) {
|
||||
toast.error("Code invalide. Veuillez réessayer.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Note: We need a way to know if 2FA is enabled.
|
||||
// Assuming user object might have twoFactorEnabled property or similar.
|
||||
// For now, let's assume it's on the user object (we might need to add it to the type).
|
||||
const isEnabled = (user as any)?.twoFactorEnabled;
|
||||
|
||||
if (step === "idle") {
|
||||
return (
|
||||
<Card className="border-none shadow-sm">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Shield className="h-5 w-5 text-primary" />
|
||||
<CardTitle>Double Authentification (2FA)</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant une application d'authentification.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4 p-4 rounded-lg bg-zinc-50 dark:bg-zinc-900 border">
|
||||
{isEnabled ? (
|
||||
<>
|
||||
<div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-full">
|
||||
<ShieldCheck className="h-6 w-6 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold">La 2FA est activée</p>
|
||||
<p className="text-sm text-muted-foreground">Votre compte est protégé par un code temporaire.</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => setStep("verify")}>
|
||||
Désactiver
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="bg-zinc-200 dark:bg-zinc-800 p-2 rounded-full">
|
||||
<ShieldAlert className="h-6 w-6 text-zinc-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold">La 2FA n'est pas activée</p>
|
||||
<p className="text-sm text-muted-foreground">Activez la 2FA pour mieux protéger votre compte.</p>
|
||||
</div>
|
||||
<Button variant="primary" size="sm" onClick={handleSetup} disabled={isLoading}>
|
||||
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Configurer"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === "setup") {
|
||||
return (
|
||||
<Card className="border-none shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Configurer la 2FA</CardTitle>
|
||||
<CardDescription>
|
||||
Scannez le QR Code ci-dessous avec votre application d'authentification (Google Authenticator, Authy, etc.).
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center gap-6">
|
||||
{qrCode && (
|
||||
<div className="bg-white p-4 rounded-xl border-4 border-zinc-100">
|
||||
<img src={qrCode} alt="QR Code 2FA" className="w-48 h-48" />
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full space-y-2">
|
||||
<p className="text-sm font-medium text-center">Ou entrez ce code manuellement :</p>
|
||||
<code className="block p-2 bg-muted text-center rounded text-xs font-mono break-all">
|
||||
{secret}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
|
||||
<p className="text-sm font-medium">Entrez le code à 6 chiffres pour confirmer :</p>
|
||||
<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
|
||||
<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>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button variant="ghost" onClick={() => setStep("idle")}>Annuler</Button>
|
||||
<Button onClick={handleEnable} disabled={otpValue.length !== 6 || isLoading}>
|
||||
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Activer la 2FA"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (step === "verify") {
|
||||
return (
|
||||
<Card className="border-none shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Désactiver la 2FA</CardTitle>
|
||||
<CardDescription>
|
||||
Veuillez entrer le code de votre application pour désactiver la double authentification.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center gap-6">
|
||||
<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} />
|
||||
<InputOTPSlot index={1} />
|
||||
<InputOTPSlot index={2} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={3} />
|
||||
<InputOTPSlot index={4} />
|
||||
<InputOTPSlot index={5} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between">
|
||||
<Button variant="ghost" onClick={() => setStep("idle")}>Annuler</Button>
|
||||
<Button variant="destructive" onClick={handleDisable} disabled={otpValue.length !== 6 || isLoading}>
|
||||
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Confirmer la désactivation"}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user