Add Login to Your Next.js App (App Router)

This quickstart covers Next.js 13.4+ with the App Router and Server Components.

Prerequisites

Node.js 18+ installed
An Optare account (sign up free (opens in a new tab))
Next.js 14+ app (or we'll create one)

1. Create a Next.js App (Optional)

npx create-next-app@latest my-app --typescript --app
cd my-app

2. Install the SDK

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

3. Get Your Credentials

Log in to Optare Console (opens in a new tab)
Go to Applications → OAuth Clients
Create a new client with:
- Redirect URI: https://yourapp.com/api/auth/callback
- Application Type: Regular Web Application
Copy the Client ID and Client Secret

4. Configure Environment Variables

Create .env.local:

OPTARE_DOMAIN=https://id.optare.one
OPTARE_CLIENT_ID=your_client_id
OPTARE_CLIENT_SECRET=your_client_secret
OPTARE_REDIRECT_URI=https://yourapp.com/api/auth/callback

5. Create Auth API Route

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

import { createHandlers } from '@optare/optareid-nextjs';
 
const handlers = createHandlers({
  domain: process.env.OPTARE_DOMAIN!,
  clientId: process.env.OPTARE_CLIENT_ID!,
  clientSecret: process.env.OPTARE_CLIENT_SECRET!,
  redirectUri: process.env.OPTARE_REDIRECT_URI!,
});
 
export const GET = handlers.GET;
export const POST = handlers.POST;

6. Add Middleware (Optional but Recommended)

Create middleware.ts in your project root:

import { createMiddleware } from '@optare/optareid-nextjs/middleware';
 
export const middleware = createMiddleware({
  publicPaths: ['/', '/about', '/api/public'],
});
 
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

7. Create Provider Component

Create app/providers.tsx:

'use client';
 
import { OptareProvider } from '@optare/optareid-nextjs';
 
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <OptareProvider
      domain={process.env.NEXT_PUBLIC_OPTARE_DOMAIN!}
      clientId={process.env.NEXT_PUBLIC_OPTARE_CLIENT_ID!}
    >
      {children}
    </OptareProvider>
  );
}

Update app/layout.tsx:

import { Providers } from './providers';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

8. Use in Server Components

// app/dashboard/page.tsx
import { getSession } from '@optare/optareid-nextjs/server';
import { redirect } from 'next/navigation';
 
export default async function DashboardPage() {
  const session = await getSession();
  
  if (!session) {
    redirect('/api/auth/login');
  }
 
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome, {session.user.email}!</p>
    </div>
  );
}

9. Use in Client Components

'use client';
 
import { useOptare, SignInButton, SignOutButton } from '@optare/optareid-nextjs';
 
export default function Header() {
  const { user, isAuthenticated } = useOptare();
 
  return (
    <header>
      {isAuthenticated ? (
        <>
          <span>{user?.email}</span>
          <SignOutButton />
        </>
      ) : (
        <SignInButton />
      )}
    </header>
  );
}

10. Run Your App

npm run dev

Open https://yourapp.com (opens in a new tab)!

Next Steps

React Next.js (Pages)