Quick Start: Connect Client App to id.optare.one

Your Optare Domain

https://id.optare.one

Step 1: Create OAuth Client

Go to https://id.optare.one/portal (opens in a new tab)
Click "OAuth Clients"
Click "Create OAuth Client"

Fill in:

Application Name: My App
Redirect URIs: https://myapp.com/auth/callback
Allowed Origins: https://myapp.com

Save Client ID and Client Secret

Step 2: Choose Your Framework

Installation

Start by installing the NextAuth.js package, which handles the authentication complexity.

npm install next-auth

Environment Setup

Configure your environment variables in .env.local. You'll need the Client ID and Client Secret from Step 1.

Generate a random secret for NEXTAUTH_SECRET using openssl rand -base64 32 or similar.

OPTARE_CLIENT_ID=oauth_xxxxxxxxxxxxxxxx
OPTARE_CLIENT_SECRET=secret_xxxxxxxxxxxxxxxx
NEXTAUTH_URL=https://myapp.com
NEXTAUTH_SECRET=your-random-secret-key

Auth Route Config

Create the main authentication route handler. This file manages the OAuth handshake with Optare.

file: app/api/auth/[...nextauth]/route.ts

import NextAuth from "next-auth";
 
export const authOptions = {
  providers: [
    {
      id: "optare",
      name: "Optare",
      type: "oauth",
      wellKnown: "https://id.optare.one/.well-known/openid-configuration",
      clientId: process.env.OPTARE_CLIENT_ID!,
      clientSecret: process.env.OPTARE_CLIENT_SECRET!,
      authorization: {
        params: {
          scope: "openid email profile",
        },
      },
      checks: ["pkce", "state", "nonce"],
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
        };
      },
    },
  ],
};
 
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Login Component

Add a sign-in button to your page. The signIn("optare") function triggers the flow.

file: app/page.tsx

"use client";
 
import { signIn, signOut, useSession } from "next-auth/react";
 
export default function Home() {
  const { data: session } = useSession();
 
  if (session) {
    return (
      <div>
        <h1>Welcome, {session.user?.name}!</h1>
        <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }
 
  return (
    <button onClick={() => signIn("optare")}>
      Sign in with Optare
    </button>
  );
}

Provider Wrap

Wrap your application with SessionProvider to make authentication state available globally.

file: app/layout.tsx

import { SessionProvider } from "next-auth/react";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

Production Setup

Update Optare OAuth Client

Go to https://id.optare.one/portal (opens in a new tab)
Edit your OAuth client

Update:

Redirect URIs: https://myapp.com/auth/callback
Allowed Origins: https://myapp.com

Deploy Your App

Deploy to your hosting (Vercel, AWS, etc.)
Add environment variables to production
Test production login

Checklist

Created OAuth client in id.optare.one
Saved Client ID and Secret
Added environment variables
Tested locally
Deployed to production
Updated production environment variables
Updated OAuth client redirect URIs
Tested production login

Done!

Your app is now connected to id.optare.one. Users can sign in!

Full Guide

See CONNECT_CLIENT_APP.md for detailed setup and troubleshooting.

Introduction Database Setup