React
Composants React pré-faits @mailmus/auth-react — SignIn, SignUp, UserButton, MFA, et plus.
Package : @mailmus/auth-react — composants prêts à l'emploi construits au-dessus du SDK navigateur @mailmus/auth. C'est le chemin le plus rapide pour ajouter l'authentification à une app React sans construire vos propres formulaires.
npm install @mailmus/auth-reactimport { MailmusAuthProvider, SignIn, SignedIn, SignedOut, UserButton } from "@mailmus/auth-react";
import "@mailmus/auth-react/styles.css";
function App() {
return (
<MailmusAuthProvider
appId="app_xxx"
publishableKey="pk_xxx"
serverURL="https://api.mailmus.app"
hostedPagesURL="https://www.mailmus.app"
>
<header>
<UserButton />
</header>
<SignedOut>
<SignIn redirectUri={window.location.origin + "/"} />
</SignedOut>
<SignedIn>
<p>Connecté !</p>
</SignedIn>
</MailmusAuthProvider>
);
}Hooks
const { isLoaded, isSignedIn, endUser, organizationId } = useAuth();
// Réactif — se met à jour à chaque connexion/déconnexion/refresh.
const auth = useMailmusAuth();
// Échappatoire vers le client SDK brut (auth.mfa, auth.oauth, auth.sessions,
// auth.organizations...) pour tout ce qui n'a pas de composant dédié.Composants
| Composant | Rôle |
|---|---|
<SignIn /> | Mot de passe, code par email, OAuth, défi MFA géré en interne |
<SignUp /> | Mot de passe, code par email, OAuth |
<UserButton /> | Avatar + menu déroulant (email, déconnexion) |
<SignedIn /> / <SignedOut /> | Rendu conditionnel basé sur la session |
<MagicLinkVerify /> | Page de callback pour les liens magiques |
<VerifyEmail /> | Page de callback pour la vérification d'email |
<MfaEnroll /> | Inscription MFA complète — QR code, secret manuel, codes de secours |
<MfaDisable /> | Désactivation du MFA |
Le détail des flows OAuth et MFA gérés par ces composants est couvert dans les guides OAuth et MFA — le comportement est identique, seule la couche présentation change.
Style
Une seule feuille de style à importer (@mailmus/auth-react/styles.css), classes préfixées mailmus-*, theming par variables CSS (--mailmus-primary, --mailmus-radius, --mailmus-border...) — aucune dépendance à Tailwind.
Hors scope (roadmap)
<OrganizationSwitcher>, <UserProfile>, Home Realm Discovery SSO intégré à <SignIn>, aide middleware Next.js pour la protection de routes serveur. Utilisez le SDK brut (useMailmusAuth()) ou le SDK navigateur directement pour ces cas en attendant.
Suivant
- Ajouter l'authentification — vue d'ensemble des deux SDK (navigateur + serveur).
- SDK navigateur — API complète sous-jacente.