React

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

A provider that owns one Vimine client, handles the sign-in return on mount and exposes the session to the tree; a hook; a button. React ≥ 18 (optional peer dependency: the SDK does not install it).

Example

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>Signing in…</p>;
    if (!isSignedIn) return <SignInButton returnTo={location.pathname}>Sign in with Vimine</SignInButton>;
    return (
        <>
            <p>Card {card?.verdict === 'valid' ? 'valid' : card?.verdict}</p>
            <button onClick={() => signOut()}>Sign out</button>
        </>
    );
}

The provider must be mounted on the callback page (redirectUri) too: that is where it exchanges the code.

<VimineProvider>

Prop
client	Vimine	the instance (create it outside the render)
handleRedirect	boolean, default true	exchange the code when the page loads with sign-in parameters
onSignedIn	(result: RedirectResult) => void	after the exchange: result.returnTo is what was given to signIn()
onRedirectError	(error: VimineError) => void	access_denied, state_mismatch, …

useVimine()

Returns:

client	the Vimine
session	the current session or null, updated on every sign-in, refresh and sign-out
isSignedIn	!!session
loading	true while the return code is being exchanged
signIn(options?)	same as client.signIn
signOut(options?)	same as client.signOut

Throws when used outside the provider.

<SignInButton>

A plain <button> that starts the sign-in from the click (the sign-in page must be reached from a user gesture). Accepts scopes, prompt, returnTo and any button attribute; it is disabled while loading. Default text: “Accedi con Vimine”.