Optare v1.0 is now available. Get started →
Start Here
Quick Start Guide

Quick Start

Add Optare authentication to your React/Next.js app in 5 minutes.

Prerequisites

Step 1: Create OAuth Client

  1. Go to id.optare.one/portal (opens in a new tab) and sign in
  2. Navigate to OAuth Clients → Create OAuth Client
  3. Fill in:
    • Name: Your app name
    • Redirect URI: https://yourapp.com (for development)
  4. Copy your Client ID

Step 2: Install the SDK

npm install @optare/optareid-react @optare/optareid-js

Step 3: Add the Provider

Wrap your app with OptareProvider:

// app/layout.tsx (Next.js App Router)
import { OptareProvider } from '@optare/optareid-react';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <OptareProvider
          clientId="your_client_id"
          domain="https://id.optare.one"
        >
          {children}
        </OptareProvider>
      </body>
    </html>
  );
}

Step 4: Add Sign In Button

// components/LoginButton.tsx
'use client';
 
import { useOptare, SignInButton } from '@optare/optareid-react';
 
export function LoginButton() {
  const { isAuthenticated, user, logout } = useOptare();
 
  if (isAuthenticated) {
    return (
      <div>
        <span>Welcome, {user?.name}</span>
        <button onClick={() => logout()}>Sign Out</button>
      </div>
    );
  }
 
  return <SignInButton />;
}

Step 5: Protect a Page

// app/dashboard/page.tsx
'use client';
 
import { ProtectedRoute, useOptare } from '@optare/optareid-react';
 
export default function Dashboard() {
  const { user } = useOptare();
 
  return (
    <ProtectedRoute>
      <h1>Dashboard</h1>
      <p>Welcome, {user?.name}!</p>
      <p>Email: {user?.email}</p>
    </ProtectedRoute>
  );
}

Step 6: Test It

npm run dev
  1. Open https://yourapp.com
  2. Click the sign-in button
  3. You'll be redirected to Optare to authenticate
  4. After login, you're redirected back with a session

What You Built

  • OAuth 2.0 authentication with PKCE
  • Automatic token management
  • Protected routes
  • Session state via React context

Next Steps

Non-React Apps

For Vue, Svelte, or other frameworks, use the standard OAuth flow:

// Redirect to Optare
const authUrl = new URL('https://id.optare.one/oauth/authorize');
authUrl.searchParams.set('client_id', 'YOUR_CLIENT_ID');
authUrl.searchParams.set('redirect_uri', 'https://yourapp.com/callback');
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('scope', 'openid email profile');
 
window.location.href = authUrl.toString();

See Token Verification for exchanging the code and verifying tokens.

Next.js SDK ExampleSDK Installation