React

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

Um provider que mantém um cliente Vimine, trata o retorno do login na montagem e expõe a sessão à árvore; um hook; um botão. React ≥ 18 (peer dependency opcional: o SDK não o instala).

Exemplo

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>Entrando…</p>;
    if (!isSignedIn) return <SignInButton returnTo={location.pathname}>Entrar com Vimine</SignInButton>;
    return (
        <>
            <p>Carteirinha {card?.verdict === 'valid' ? 'válida' : card?.verdict}</p>
            <button onClick={() => signOut()}>Sair</button>
        </>
    );
}

O provider precisa estar montado também na página de callback (redirectUri): é ali que ele troca o código.

<VimineProvider>

Prop
client	Vimine	a instância (crie-a fora da renderização)
handleRedirect	boolean, padrão true	trocar o código quando a página carrega com parâmetros de login
onSignedIn	(result: RedirectResult) => void	depois da troca: result.returnTo é o que foi passado para signIn()
onRedirectError	(error: VimineError) => void	access_denied, state_mismatch, …

useVimine()

Devolve:

client	o Vimine
session	a sessão atual ou null, atualizada a cada login, renovação e logout
isSignedIn	!!session
loading	true enquanto o código de retorno está sendo trocado
signIn(options?)	igual a client.signIn
signOut(options?)	igual a client.signOut

Lança um erro quando usado fora do provider.

<SignInButton>

Um <button> simples que inicia o login a partir do clique (a página de login precisa ser alcançada a partir de um gesto do usuário). Aceita scopes, prompt, returnTo e qualquer atributo de botão; fica desativado durante o loading. Texto padrão: “Accedi con Vimine”.