Next.js App Router Integration

This example demonstrates how to integrate Optare ID using our dedicated SDK @optare/optareid-nextjs.

📦 Installation

npm install @optare/optareid-nextjs

⚙️ Configuration

Create app/api/auth/[...optare]/route.ts:

// app/api/auth/[...optare]/route.ts
import { createHandlers } from '@optare/optareid-nextjs';
 
export const { GET, POST } = createHandlers({
    clientId: process.env.OPTARE_CLIENT_ID!,
    clientSecret: process.env.OPTARE_CLIENT_SECRET!,
    secret: process.env.AUTH_SECRET!,
});

Wrap your application in app/layout.tsx:

// app/layout.tsx
import { OptareProvider } from '@optare/optareid-nextjs';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <OptareProvider>{children}</OptareProvider>
            </body>
        </html>
    );
}

💻 Usage Example

Here represents a complete login/logout flow with protected content:

// app/page.tsx
'use client';
 
import { useOptare, SignInButton, Authenticated, Unauthenticated, SignOutButton } from '@optare/optareid-nextjs';
 
export default function HomePage() {
    const { user, isLoading } = useOptare();
 
    if (isLoading) {
        return <div className="loading">Loading...</div>;
    }
 
    return (
        <main className="container">
            <h1>Optare ID + Next.js Example</h1>
 
            <Authenticated>
                <div className="user-card">
                    <p><strong>Logged in as:</strong> {user?.name || user?.email}</p>
                    <p><strong>Email:</strong> {user?.email}</p>
                    {user?.organizationId && (
                        <p><strong>Organization:</strong> {user.organizationId}</p>
                    )}
                    <SignOutButton className="btn btn-danger">
                        Sign Out
                    </SignOutButton>
                </div>
            </Authenticated>
 
            <Unauthenticated>
                <div className="guest">
                    <p>You are not logged in.</p>
                    <SignInButton className="btn btn-primary">
                        Sign In with Optare
                    </SignInButton>
                </div>
            </Unauthenticated>
        </main>
    );
}

🔑 Environment Variables

Add these to your .env.local:

OPTARE_CLIENT_ID=your_client_id
OPTARE_CLIENT_SECRET=your_client_secret
AUTH_SECRET=generate_a_random_string_here
NEXT_PUBLIC_OPTARE_URL=https://id.optare.one

Navigation Quick Start Guide