# React

> VimineProvider, useVimine et SignInButton de @vimine/sdk/react.

URL: https://developers.vimine.network/fr/sdk/react/

```jsx
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

```jsx title="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>
);
```

```jsx title="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 ».