Intégration Memberstack : espace membres pour Animaj

Le contexte

Animaj propose un espace client sur son site Webflow avec une contrainte précise : pas n'importe qui ne doit pouvoir s'y connecter. L'accès est ouvert uniquement aux partenaires validés par l'équipe Animaj, donc le tunnel d'inscription doit prévoir une étape de revue manuelle.

L'idée du parcours est la suivante : un visiteur remplit le formulaire d'inscription, son compte est créé mais marqué comme « non validé », l'équipe Animaj reçoit une notification, ouvre Memberstack, vérifie la légitimité de la demande, puis active le compte d'un clic. Tant que ce clic n'a pas eu lieu, la connexion est refusée.

L'architecture

Le module tient sur deux acteurs.

1. Memberstack gère les comptes (authentification, mots de passe, sessions, custom fields).
2. Webflow sert l'interface, et reçoit un petit script qui contrôle l'accès à la connexion en fonction du statut de validation.

Pas de Xano, pas de Worker, pas de backend custom. La logique métier tient dans un champ booléen côté Memberstack et une trentaine de lignes de JavaScript posées sur la page de connexion.

Étape 1, le custom field verifiedUser

Memberstack permet d'ajouter des champs personnalisés à chaque membre, depuis l'interface admin. On crée un champ booléen verifiedUser, false par défaut.

À la création d'un compte via le formulaire Webflow, ce champ est positionné à false. Memberstack envoie quand même la confirmation d'inscription habituelle, et le compte existe dans la base, mais il n'est pas encore actif aux yeux d'Animaj.

C'est ce simple champ qui sert de cadenas pour tout le reste.

Étape 2, l'inscription et la notification

Le formulaire d'inscription est un formulaire Webflow standard, branché sur Memberstack via les attributs natifs (data-ms-form="signup", data-ms-member="email", data-ms-member="password").

Au moment où Memberstack confirme la création du membre, un webhook part vers Make. Make formate un email lisible (nom, email, raison de la demande renseignée dans le formulaire) et l'envoie à l'équipe Animaj. L'email contient un lien direct vers la fiche du membre dans Memberstack.

L'avantage de passer par Make plutôt que par une notification de formulaire Webflow brute : on peut enrichir le message, router vers la bonne boîte selon le contexte, et garder une trace dans un Sheet si besoin.

Étape 3, la validation côté Animaj, un clic

Quand l'équipe Animaj reçoit l'email, elle clique, atterrit sur la fiche du membre dans Memberstack, et bascule le toggle isValid à true. C'est tout.

Pas de back-office custom à maintenir, pas d'admin Webflow à coder, pas d'écran d'approbation à designer. L'admin Memberstack fait le job, et l'expérience pour Animaj est aussi simple qu'ouvrir un email et cocher une case.

Étape 4, le contrôle à la connexion

C'est ici que tout se joue. Par défaut, Memberstack laisse n'importe quel compte créé se connecter. On surcharge ce comportement avec un script posé sur la page de connexion (et plus généralement sur toute page protégée).

Le script écoute l'événement de connexion via le SDK DOM de Memberstack, lit le champ isValid du membre, et prend deux décisions :

const ms = window.$memberstackDom;

ms.onAuthChange(async ({ member }) => {
  if (!member) return;

  if (member.customFields.isValid !== true) {
    await ms.logout();
    document.querySelector('[data-pending-message]').style.display = 'block';
  }
});

Si isValid est false, on déclenche un logout immédiat et on affiche un bloc « Votre compte est en cours de validation » qui était caché par défaut. Si isValid est true, on laisse Memberstack faire son travail habituel et le membre accède à son espace.

Côté Webflow, le bloc « en attente » est un élément posé dans le designer, masqué par défaut. Le script se contente de toggler sa visibilité. Aucun composant à styler en dur, l'équipe design reste maître du rendu.

Pourquoi pas autre chose ?

• Outseta ou Auth0, c'est plus puissant mais c'est aussi un investissement (intégration, courbe d'apprentissage, coût mensuel) qui n'a pas de sens pour un besoin aussi ciblé.
• Coder l'auth à la main avec Xano, on peut, mais on réinvente trois mois de travail (mots de passe, reset, sessions, RGPD) pour un cas d'usage qui ne le mérite pas.
• Un formulaire Webflow + un Sheet partagé, ça marche tant qu'il y a 5 partenaires. Au-delà, plus personne ne sait qui a accès à quoi.

Memberstack est le bon outil dès que le besoin est « accès membre simple, branché à Webflow, sans complexifier la stack ». La seule subtilité ici, la validation manuelle, tient dans un champ booléen et une trentaine de lignes de JS. Typiquement le genre de projet où notre agence Webflow peut vous accompagner.

Le résultat

Animaj dispose d'un espace client gardé, sans avoir investi dans une stack d'authentification. L'équipe valide les comptes en un clic depuis Memberstack, l'expérience visiteur reste fluide (le compte est créé tout de suite, le message d'attente est clair), et toute la couche sécurité (mots de passe, sessions, reset) est déléguée à un acteur dont c'est le métier.