React

import { VimineProvider, useVimine, SignInButton } from '@vimine/sdk/react';

Un provider qui détient un client Vimine, traite le retour de connexion au montage et expose la session à l’arbre ; un hook ; un bouton. React ≥ 18 (dépendance pair facultative : le SDK ne l’installe pas).

Exemple

main.jsx

import { Vimine } from '@vimine/sdk';
import { VimineProvider } from '@vimine/sdk/react';

const vimine = new Vimine({ clientId: 'vmc_…', redirectUri: `${location.origin}/vimine/callback` });

createRoot(document.getElementById('root')).render(
    <VimineProvider client={vimine} onSignedIn={({ returnTo }) => navigate(returnTo || '/')}>
        <App />
    </VimineProvider>
);

MembershipCard.jsx

import { useEffect, useState } from 'react';
import { useVimine, SignInButton } from '@vimine/sdk/react';

export function MembershipCard() {
    const { client, isSignedIn, loading, signOut } = useVimine();
    const [card, setCard] = useState(null);

    useEffect(() => {
        if (isSignedIn) client.membership.get().then(setCard);
    }, [client, isSignedIn]);

    if (loading) return <p>Connexion en cours…</p>;
    if (!isSignedIn) return <SignInButton returnTo={location.pathname}>Se connecter avec Vimine</SignInButton>;
    return (
        <>
            <p>Carte {card?.verdict === 'valid' ? 'valable' : card?.verdict}</p>
            <button onClick={() => signOut()}>Se déconnecter</button>
        </>
    );
}

Le provider doit être monté aussi sur la page de callback (redirectUri) : c’est là qu’il échange le code.

<VimineProvider>

Prop
client	Vimine	l’instance (créez-la en dehors du rendu)
handleRedirect	boolean, par défaut true	échange le code quand la page se charge avec des paramètres de connexion
onSignedIn	(result: RedirectResult) => void	après l’échange : result.returnTo est ce qui a été passé à signIn()
onRedirectError	(error: VimineError) => void	access_denied, state_mismatch, …

useVimine()

Renvoie :

client	le Vimine
session	la session courante ou null, mise à jour à chaque connexion, rafraîchissement et déconnexion
isSignedIn	!!session
loading	true pendant l’échange du code de retour
signIn(options?)	identique à client.signIn
signOut(options?)	identique à client.signOut

Lève une erreur quand il est utilisé en dehors du provider.

<SignInButton>

Un simple <button> qui lance la connexion depuis le clic (la page de connexion doit être atteinte depuis un geste de l’utilisateur). Accepte scopes, prompt, returnTo et n’importe quel attribut de bouton ; il est désactivé pendant loading. Texte par défaut : « Accedi con Vimine ».