QUICKSTART · SANDBOX

Votre connexion
en cinq étapes.

Commencez avec un profil fictif. Aucun compte Meta, numéro vérifié ni message sortant n’est nécessaire. Créez votre compte gratuitement pour accéder immédiatement au dashboard.

1. Essayez la sandbox intégrée

Lancez la démonstration. Vérifiez les mots affichés, choisissez un profil fictif puis simulez l’envoi. Le navigateur revient avec le résultat de l’échange OAuth.

2. Créez votre client de test

Créez votre compte puis ouvrez le dashboard. Créez une application Sandbox de type Serveur et ajoutez votre URL de retour, par exemple http://localhost:3000/auth/callback. Enregistrez le secret : il n’est affiché qu’une seule fois.

3. Ajoutez les SDK

Les deux SDK sont livrés dans le dépôt privé, prêts à être empaquetés. Ils ne sont pas encore publiés sur npm.

# Dans le dépôt notif-auth
npm run build:sdk
npm pack --workspace @spay/notif-auth-react
npm pack --workspace @spay/notif-auth-node

# Dans votre application : installez les deux archives générées
npm install /chemin/spay-notif-auth-react-0.1.0.tgz \
  /chemin/spay-notif-auth-node-0.1.0.tgz

4. Branchez le bouton et le callback

Le SDK conserve state et le vérificateur PKCE dans le navigateur. Le callback doit être sur la même origine que votre application.

import { WhatsAppLoginButton, NotifAuthCallback }
  from '@spay/notif-auth-react';

const onCode = async (code, verifier) => {
  await fetch('/api/session', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ code, verifier }),
  });
};

// Votre écran de connexion
<WhatsAppLoginButton
  clientId="pk_test_..."
  redirectUri="http://localhost:3000/auth/callback"
  onCode={onCode}
/>

// Votre page /auth/callback
<NotifAuthCallback onCode={onCode} onError={showError} />

5. Échangez le code côté serveur

Gardez le secret dans les variables de votre serveur. Créez ensuite votre propre session applicative à partir du profil vérifié.

import { NotifAuth } from '@spay/notif-auth-node';

const auth = new NotifAuth({
  clientId: process.env.NOTIF_CLIENT_ID,
  clientSecret: process.env.NOTIF_CLIENT_SECRET,
  redirectUri: 'http://localhost:3000/auth/callback',
});

const profile = await auth.exchange(code, verifier);
// profile vient du JWT vérifié : signature RS256, iss, aud, exp.
// Créez ici votre session avec un cookie HttpOnly.

Les profils de test portent mode: TEST et provider: sandbox. Le SDK refuse par défaut ces profils pour un client Live. Les identités et les sujets sont distincts entre tenants et environnements.

Clients publics

Choisissez le type Public si votre application ne peut pas garder un secret. PKCE S256 reste obligatoire. Échangez le code via une route de votre application ou un serveur de confiance ; l’API n’ouvre pas de CORS générique.

Convex

L’échange se fait dans une action Node Convex qui possède le secret. Le front ne reçoit que le client_id. Ne rattachez jamais automatiquement un compte existant à partir d’un nom : la liaison WhatsApp doit être demandée depuis une session déjà authentifiée.

"use node";
import { action } from './_generated/server';
import { v } from 'convex/values';
import { NotifAuth } from '@spay/notif-auth-node';
export const exchange = action({
  args: { code: v.string(), verifier: v.string() },
  handler: async (_, { code, verifier }) =>
    new NotifAuth({
      clientId: process.env.NOTIF_CLIENT_ID!,
      clientSecret: process.env.NOTIF_CLIENT_SECRET!,
      redirectUri: process.env.NOTIF_REDIRECT_URI!,
    }).exchange(code, verifier),
});

Passer en Live

Vérifiez votre adresse e-mail depuis le lien reçu, puis choisissez Live dans le dashboard et ajoutez une URL HTTPS exacte. Aucune validation manuelle par un administrateur n’est nécessaire. Le numéro WhatsApp de réception est géré par Notif Auth. Un client Test ne peut pas recevoir de preuve Live, et une simulation ne peut pas authentifier un client Live. Conservez une connexion de secours et une vérification supplémentaire pour les opérations sensibles. Les conditions d’utilisation sont précisées dans les CGU.

Votre connexionen cinq étapes.