Interactive Playground
Experiment with the Optare React SDK without setting up a local environment. This sandbox allows you to test authentication flows and explore the API surface.
💡
Dependency Error? If you see a "Failed to resolve import" error, the auto-installer may have timed out.
Simply type this into the terminal below the code editor and hit Enter:
npm install @optare/optareid-react @optare/optareid-js
🎮 How to use
The playground above has @optare/optareid-react pre-installed. Simply click the copy button (top-right of the code block), then paste it into src/App.tsx:
import { OptareProvider, useOptare } from '@optare/optareid-react';
function Demo() {
const { login, isAuthenticated, user, logout } = useOptare();
if (isAuthenticated) {
return (
<div style={{ padding: 20 }}>
<h2>👋 Welcome {user?.email}</h2>
<button onClick={() => logout()}>Sign Out</button>
<pre>{JSON.stringify(user, null, 2)}</pre>
</div>
);
}
return (
<div style={{ padding: 20 }}>
<h1>Optare Demo</h1>
<button
onClick={() => login()}
style={{
padding: '10px 20px',
background: 'black',
color: 'white',
borderRadius: 4,
cursor: 'pointer'
}}
>
Sign In
</button>
</div>
);
}
export default function App() {
return (
<OptareProvider
domain="id.optare.one"
clientId="demo_client_id"
>
<Demo />
</OptareProvider>
);
}