Examples

// app/api/protected/route.ts
import { createRemoteJWKSet, jwtVerify } from 'jose';
import { NextRequest, NextResponse } from 'next/server';
 
const JWKS = createRemoteJWKSet(
  new URL('https://id.optare.one/.well-known/jwks.json')
);
 
export async function GET(request: NextRequest) {
  const authHeader = request.headers.get('authorization');
  
  if (!authHeader?.startsWith('Bearer ')) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  try {
    const { payload } = await jwtVerify(authHeader.slice(7), JWKS, {
      issuer: 'https://id.optare.one',
    });
    
    const data = await fetchUserData(payload.sub);
    return NextResponse.json(data);
  } catch {
    return NextResponse.json({ error: 'Invalid token' }, { status: 401 });
  }
}

import { useOptare, SignInButton } from '@optare/optareid-react';
 
function LoginPage() {
  const { isAuthenticated, user, logout } = useOptare();
 
  if (isAuthenticated) {
    return (
      <div>
        <p>Welcome, {user?.name}</p>
        <button onClick={() => logout()}>Sign Out</button>
      </div>
    );
  }
 
  return <SignInButton label="Sign in with Optare" />;
}

import { ProtectedRoute, useOptare } from '@optare/optareid-react';
 
function Dashboard() {
  const { user } = useOptare();
  
  return (
    <ProtectedRoute>
      <h1>Welcome, {user?.name}</h1>
      <p>Your email: {user?.email}</p>
    </ProtectedRoute>
  );
}

import { useOptare } from '@optare/optareid-react';
 
function AdminPanel() {
  const { user } = useOptare();
  
  // Check role from the session/token claims
  if (!['owner', 'admin'].includes(user?.role)) {
    return null;
  }
 
  return (
    <div>
      <h2>Admin Panel</h2>
      {/* Admin-only content */}
    </div>
  );
}

import { useOptare } from '@optare/optareid-react';
 
function useApiClient() {
  const { getAccessTokenSilently } = useOptare();
  
  async function fetchProtectedData(endpoint: string) {
    const token = await getAccessTokenSilently();
    
    const response = await fetch(endpoint, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    
    return response.json();
  }
  
  return { fetchProtectedData };
}