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