Vérification d'Email

Vérifiez les adresses email des utilisateurs pour assurer la propriété du compte.

---

Comment ça fonctionne

1. L'utilisateur s'inscrit avec email/mot de passe
2. SyAuth envoie un code de vérification à 6 chiffres à son email
3. L'utilisateur entre le code dans votre application
4. L'email est marqué comme vérifié

---

Email de Vérification

Quand un utilisateur s'inscrit, il reçoit un email contenant :

• Un code de vérification à 6 chiffres
• Un lien vers votre page de vérification (si configuré)
• Le code expire dans 1 heure

---

Implémenter la Vérification

Exemples d'Implémentation

SDK Next.js

'use client';

import { useState } from 'react';

export function VerifyEmailForm({ email }: { email: string }) {
  const [code, setCode] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleVerify = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const response = await fetch('https://api.syauth.com/e/v1/email/verify/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, code }),
      });

      if (response.ok) {
        alert('Email vérifié ! Vous pouvez maintenant vous connecter.');
        window.location.href = '/login';
      } else {
        const data = await response.json();
        setError(data.error || 'Échec de la vérification');
      }
    } catch (err) {
      setError('Erreur réseau');
    } finally {
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleVerify}>
      <p>Entrez le code à 6 chiffres envoyé à {email}</p>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="000000"
        maxLength={6}
        pattern="[0-9]{6}"
        required
      />
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={loading}>
        {loading ? 'Vérification...' : 'Vérifier l\'Email'}
      </button>
    </form>
  );
}

Python / Django

Cet exemple effectue la requête de vérification en utilisant Python requests :

import requests

def verify_email(email, code):
    url = "https://api.syauth.com/e/v1/email/verify/"
    payload = {
        "email": email,
        "code": code
    }
    headers = {
        "Content-Type": "application/json"
    }

    response = requests.post(url, json=payload, headers=headers)
    return response.json()

cURL / API

curl -X POST https://api.syauth.com/e/v1/email/verify/ \
     -H "Content-Type: application/json" \
     -d '{
       "email": "[email protected]",
       "code": "123456"
     }'

---

Renvoyer l'Email de Vérification

Si l'utilisateur n'a pas reçu l'email ou si le code a expiré :

async function resendVerification(email: string) {
  const response = await fetch('https://api.syauth.com/e/v1/email/verify/resend/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email }),
  });

  if (response.ok) {
    alert('Email de vérification envoyé');
  }
}

<button onClick={() => resendVerification(email)}>
  Renvoyer l'Email de Vérification
</button>

---

Endpoints API

Vérifier l'Email

POST https://api.syauth.com/e/v1/email/verify/
Content-Type: application/json

{
  "email": "[email protected]",
  "code": "123456"
}

Réponse succès :

{
  "success": true,
  "message": "Email vérifié avec succès"
}

Renvoyer la Vérification

POST https://api.syauth.com/e/v1/email/verify/resend/
Content-Type: application/json

{
  "email": "[email protected]"
}

Réponse :

{
  "success": true,
  "message": "Email de vérification envoyé"
}

---

Gestion des Erreurs

Erreur	Cause	Solution
invalid_code	Code de vérification incorrect	Demander à l'utilisateur de vérifier le code
code_expired	Code plus vieux qu'1 heure	Renvoyer la vérification
already_verified	Email déjà vérifié	Procéder à la connexion
user_not_found	Email non inscrit	Inviter à s'inscrire

---

Vérifier le Statut de Vérification

Vous pouvez vérifier si l'email d'un utilisateur est vérifié :

const { user } = useSyAuth();

if (!user?.email_verified) {
  return <VerifyEmailPrompt email={user?.email} />;
}

---

Personnaliser le Modèle d'Email

Personnalisez les emails de vérification dans le tableau de bord :

1. Allez dans Modèles d'Email dans la barre latérale
2. Sélectionnez le modèle « Confirmation d'Inscription »
3. Modifiez le sujet, le nom d'expéditeur et le corps
4. Utilisez les placeholders : {{code}}, {{first_name}}, {{email}}

---

Prochaines étapes

• Réinitialisation du Mot de Passe - Implémenter la réinitialisation
• Connexion & Déconnexion - Après la vérification