@optare/optareid-nextjs
v0.1.0
Published
Next.js SDK for Optare ID - Server components, route handlers, and middleware
Maintainers
optareaiReadme
Optare ID Next.js SDK
Official Next.js SDK for Optare ID with support for App Router, Server Components, and Edge Runtime.
Installation
npm install @optare/optareid-nextjsQuick Start
1. Create Route Handler
// 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!,
});2. Add Middleware (Optional)
// middleware.ts
import { createMiddleware } from '@optare/optareid-nextjs/middleware';
export default createMiddleware({
secret: process.env.AUTH_SECRET!,
protectedRoutes: ['/dashboard/*', '/settings/*'],
});
export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};3. Add Provider
// app/layout.tsx
import { OptareProvider } from '@optare/optareid-nextjs';
export default function RootLayout({ children }) {
return (
<html>
<body>
<OptareProvider>{children}</OptareProvider>
</body>
</html>
);
}4. Use in Server Components
// app/dashboard/page.tsx
import { getSession } from '@optare/optareid-nextjs/server';
import { redirect } from 'next/navigation';
export default async function Dashboard() {
const session = await getSession();
if (!session?.user) {
redirect('/api/auth/signin');
}
return <h1>Welcome, {session.user.name}</h1>;
}5. Use in Client Components
'use client';
import { useOptare, SignInButton, SignOutButton } from '@optare/optareid-nextjs';
export function UserNav() {
const { user, isLoading } = useOptare();
if (isLoading) return <div>Loading...</div>;
if (!user) return <SignInButton>Sign In</SignInButton>;
return (
<div>
<span>{user.name}</span>
<SignOutButton />
</div>
);
}Environment Variables
OPTARE_CLIENT_ID=your-client-id
OPTARE_CLIENT_SECRET=your-client-secret
AUTH_SECRET=random-32-char-secretLicense
MIT