Magic Link (E-mail Passwordless)

Les Magic Links permettent aux utilisateurs de s’authentifier simplement en cliquant sur un lien reçu par e-mail — aucun mot de passe requis. Cette approche réduit la friction à la connexion, élimine les problèmes liés aux mots de passe oubliés et améliore la sécurité en excluant la compromission des identifiants.

Comment ça Fonctionne

L’utilisateur saisit son adresse e-mail
Ton app envoie une requête à Auris pour générer un magic link
Auris envoie un e-mail à l’utilisateur avec un lien sécurisé à usage unique
L’utilisateur clique sur le lien (valide pendant un temps configurable, par défaut 15 minutes)
Auris vérifie le token et retourne un access token et un ID token à ton app
L’utilisateur est authentifié

Configuration dans la Console

Active le Magic Link

Va dans Console → Paramètres → Authentification → Méthodes Passwordless et active Magic Link.

Configure l’URL de Redirection

Saisis l’URL vers laquelle Auris enverra l’utilisateur après la vérification du magic link. Cette URL doit être dans la liste des URL de redirection autorisées de l’application :

Développement : http://localhost:3000/api/auth/callback
Production : https://votreapp.com/api/auth/callback

Définis l’Expiration du Token

Configure combien de temps un magic link reste valide :

Paramètre	Défaut	Plage Recommandée
Expiration du Lien	15 minutes	10–30 minutes

Configure le Comportement d’Inscription Automatique

Choisis ce qui se passe quand quelqu’un soumet une adresse e-mail inconnue :

Scénario	Comportement
E-mail connu	L’utilisateur est authentifié normalement
E-mail inconnu + inscription activée	Un nouveau compte est créé
E-mail inconnu + inscription désactivée	Une erreur est retournée
E-mail non vérifié	Le lien sert aussi de vérification d’e-mail

Implémentation

JavaScript


import { AurisClient } from '@auris/js'
 
const auris = new AurisClient({
  domain: 'auth.votredomaine.com',
  clientId: 'votre-client-id',
})
 
// Étape 1 : Envoie le magic link
async function sendMagicLink(email) {
  const { error } = await auris.sendMagicLink({ email })
 
  if (error) {
    console.error('Envoi du magic link échoué :', error.message)
  } else {
    console.log('Magic link envoyé ! Vérifie ton e-mail.')
  }
}
 
// Étape 2 : Gère le callback (quand l'utilisateur clique le lien)
async function handleMagicLinkCallback() {
  const { tokens, user, error } = await auris.handleMagicLinkCallback()
 
  if (error) {
    console.error('Vérification échouée :', error.message)
    return
  }
 
  console.log('Utilisateur authentifié :', user)
  window.location.href = '/dashboard'
}

React


import { useState } from 'react'
import { useAuris } from '@auris/react'
 
function MagicLinkLogin() {
  const { sendMagicLink } = useAuris()
  const [email, setEmail] = useState('')
  const [sent, setSent] = useState(false)
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const { error } = await sendMagicLink({ email })
    if (!error) setSent(true)
  }
 
  if (sent) {
    return (
      <div>
        <h2>Vérifie ton e-mail</h2>
        <p>Nous avons envoyé un lien de connexion à {email}</p>
      </div>
    )
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        placeholder="[email protected]"
        required
      />
      <button type="submit">Envoyer le Magic Link</button>
    </form>
  )
}

Next.js


// app/api/auth/magic-link/route.ts
import { NextRequest, NextResponse } from 'next/server'
 
export async function POST(req: NextRequest) {
  const { email } = await req.json()
 
  const res = await fetch(`${process.env.AURIS_DOMAIN}/api/auth/magic-link`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email,
      client_id: process.env.AURIS_CLIENT_ID,
      redirect_uri: `${process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback`,
    }),
  })
 
  return NextResponse.json(await res.json(), { status: res.status })
}

Guides Associés

Login Hébergé (PKCE) — Flux de connexion standard avec formulaire
SMS OTP — Authentification par code SMS
Passkey / WebAuthn — Authentification biométrique sans mot de passe