Supabase Auth — Email Templates (Bécik)¶

Ces emails sont gérés par Supabase Auth (confirmation, reset password, magic link, invitation).

Objectif: garder le même design que les emails de notifications envoyés par l’app.

Recommandation d’envoi¶

Configure Supabase Auth pour utiliser SMTP Resend (même domaine/From), afin d’unifier le provider avec les notifications.

Notes importantes (placeholders)¶

Supabase utilise des placeholders de type Go templates, ex: {{ .ConfirmationURL }}.
Selon le template, la variable peut être {{ .RecoveryURL }}, {{ .MagicLinkURL }}, {{ .InviteURL }}, etc.
Vérifie les variables disponibles directement dans le Dashboard Supabase (Authentication → Email Templates), et ajuste au besoin.

Design tokens (inline)¶

Background: #f8fafc
Card border: #e2e8f0
Text: #0f172a / muted #475569
CTA: #059669 (emerald)

Subject (suggestion): Bécik — Confirmez votre adresse email

<div style="background:#f8fafc;padding:24px 0">
  <table
    role="presentation"
    cellpadding="0"
    cellspacing="0"
    border="0"
    width="100%"
    style="border-collapse:collapse"
  >
    <tr>
      <td align="center" style="padding:0 12px">
        <table
          role="presentation"
          cellpadding="0"
          cellspacing="0"
          border="0"
          width="600"
          style="width:600px;max-width:100%;border-collapse:collapse"
        >
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;padding:0 0 12px 0"
            >
              <div
                style="font-weight:700;font-size:18px;letter-spacing:-0.01em"
              >
                Bécik
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:18px"
            >
              <div
                style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;line-height:1.5"
              >
                <h2 style="margin:0 0 10px 0;font-size:18px">
                  Confirmez votre adresse email
                </h2>
                <p style="margin:0 0 12px 0;color:#475569;font-size:13px">
                  Cliquez sur le bouton pour activer votre compte.
                </p>
                <div style="margin:16px 0 0 0">
                  <a
                    href="{{ .ConfirmationURL }}"
                    style="display:inline-block;background:#059669;color:#ffffff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px"
                    >Confirmer mon email</a
                  >
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#64748b;font-size:12px;line-height:1.4;padding:12px 0 0 0"
            >
              Si vous n’êtes pas à l’origine de cette demande, ignorez ce
              message.
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

2) Reset password¶

Subject (suggestion): Bécik — Réinitialisation du mot de passe

<div style="background:#f8fafc;padding:24px 0">
  <table
    role="presentation"
    cellpadding="0"
    cellspacing="0"
    border="0"
    width="100%"
    style="border-collapse:collapse"
  >
    <tr>
      <td align="center" style="padding:0 12px">
        <table
          role="presentation"
          cellpadding="0"
          cellspacing="0"
          border="0"
          width="600"
          style="width:600px;max-width:100%;border-collapse:collapse"
        >
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;padding:0 0 12px 0"
            >
              <div
                style="font-weight:700;font-size:18px;letter-spacing:-0.01em"
              >
                Bécik
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:18px"
            >
              <div
                style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;line-height:1.5"
              >
                <h2 style="margin:0 0 10px 0;font-size:18px">
                  Réinitialiser votre mot de passe
                </h2>
                <p style="margin:0 0 12px 0;color:#475569;font-size:13px">
                  Cliquez sur le bouton pour choisir un nouveau mot de passe.
                </p>
                <div style="margin:16px 0 0 0">
                  <a
                    href="{{ .RecoveryURL }}"
                    style="display:inline-block;background:#059669;color:#ffffff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px"
                    >Réinitialiser</a
                  >
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#64748b;font-size:12px;line-height:1.4;padding:12px 0 0 0"
            >
              Si vous n’êtes pas à l’origine de cette demande, ignorez ce
              message.
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

3) Magic link¶

Subject (suggestion): Bécik — Connexion

<div style="background:#f8fafc;padding:24px 0">
  <table
    role="presentation"
    cellpadding="0"
    cellspacing="0"
    border="0"
    width="100%"
    style="border-collapse:collapse"
  >
    <tr>
      <td align="center" style="padding:0 12px">
        <table
          role="presentation"
          cellpadding="0"
          cellspacing="0"
          border="0"
          width="600"
          style="width:600px;max-width:100%;border-collapse:collapse"
        >
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;padding:0 0 12px 0"
            >
              <div
                style="font-weight:700;font-size:18px;letter-spacing:-0.01em"
              >
                Bécik
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:18px"
            >
              <div
                style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;line-height:1.5"
              >
                <h2 style="margin:0 0 10px 0;font-size:18px">
                  Votre lien de connexion
                </h2>
                <p style="margin:0 0 12px 0;color:#475569;font-size:13px">
                  Cliquez sur le bouton pour vous connecter.
                </p>
                <div style="margin:16px 0 0 0">
                  <a
                    href="{{ .MagicLinkURL }}"
                    style="display:inline-block;background:#059669;color:#ffffff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px"
                    >Se connecter</a
                  >
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#64748b;font-size:12px;line-height:1.4;padding:12px 0 0 0"
            >
              Si vous n’êtes pas à l’origine de cette demande, ignorez ce
              message.
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

4) Invite user¶

Subject (suggestion): Bécik — Invitation

<div style="background:#f8fafc;padding:24px 0">
  <table
    role="presentation"
    cellpadding="0"
    cellspacing="0"
    border="0"
    width="100%"
    style="border-collapse:collapse"
  >
    <tr>
      <td align="center" style="padding:0 12px">
        <table
          role="presentation"
          cellpadding="0"
          cellspacing="0"
          border="0"
          width="600"
          style="width:600px;max-width:100%;border-collapse:collapse"
        >
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;padding:0 0 12px 0"
            >
              <div
                style="font-weight:700;font-size:18px;letter-spacing:-0.01em"
              >
                Bécik
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:18px"
            >
              <div
                style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;line-height:1.5"
              >
                <h2 style="margin:0 0 10px 0;font-size:18px">
                  Vous êtes invité(e) sur Bécik
                </h2>
                <p style="margin:0 0 12px 0;color:#475569;font-size:13px">
                  Cliquez sur le bouton pour accepter l’invitation.
                </p>
                <div style="margin:16px 0 0 0">
                  <a
                    href="{{ .InviteURL }}"
                    style="display:inline-block;background:#059669;color:#ffffff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px"
                    >Accepter l’invitation</a
                  >
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td
              style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#64748b;font-size:12px;line-height:1.4;padding:12px 0 0 0"
            >
              Si vous n’êtes pas à l’origine de cette demande, ignorez ce
              message.
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>