React

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

Un provider que posee un cliente Vimine, gestiona la vuelta del inicio de sesión al montarse y expone la sesión al árbol; un hook; un botón. React ≥ 18 (dependencia peer opcional: el SDK no la instala).

Ejemplo

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>Iniciando sesión…</p>;
    if (!isSignedIn) return <SignInButton returnTo={location.pathname}>Iniciar sesión con Vimine</SignInButton>;
    return (
        <>
            <p>Carné {card?.verdict === 'valid' ? 'válido' : card?.verdict}</p>
            <button onClick={() => signOut()}>Cerrar sesión</button>
        </>
    );
}

El provider debe montarse también en la página de callback (redirectUri): es ahí donde intercambia el código.

<VimineProvider>

Prop
client	Vimine	la instancia (créala fuera del render)
handleRedirect	boolean, por defecto true	intercambia el código cuando la página se carga con los parámetros de un inicio de sesión
onSignedIn	(result: RedirectResult) => void	después del intercambio: result.returnTo es lo que se pasó a signIn()
onRedirectError	(error: VimineError) => void	access_denied, state_mismatch, …

useVimine()

Devuelve:

client	el Vimine
session	la sesión actual o null, actualizada en cada inicio de sesión, renovación y cierre de sesión
isSignedIn	!!session
loading	true mientras se intercambia el código de vuelta
signIn(options?)	igual que client.signIn
signOut(options?)	igual que client.signOut

Lanza un error si se usa fuera del provider.

<SignInButton>

Un <button> simple que lanza el inicio de sesión desde el clic (a la página de inicio de sesión hay que llegar desde un gesto del usuario). Acepta scopes, prompt, returnTo y cualquier atributo de botón; está desactivado mientras loading. Texto por defecto: «Accedi con Vimine».