Quick Start
Add ZewstID authentication to your app in 5 minutes. Choose your framework to get started.
1
Install Dependencies
npm install @zewstid/nextjs next-auth2
Configure Environment
Get your Client ID and Secret from Applications in the Developer Portal.
# .env.local
ZEWSTID_CLIENT_ID=your-client-id
ZEWSTID_CLIENT_SECRET=your-client-secret
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-random-secret-min-32-chars3
Set Up Authentication
Create the auth configuration file. This handles the OAuth flow with ZewstID.
app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import { ZewstIDAuthProvider, getZewstIDCallbacks } from '@zewstid/nextjs';
const handler = NextAuth({
providers: [
ZewstIDAuthProvider({
clientId: process.env.ZEWSTID_CLIENT_ID!,
clientSecret: process.env.ZEWSTID_CLIENT_SECRET!,
}),
],
callbacks: getZewstIDCallbacks(),
});
export { handler as GET, handler as POST };4
Add Login UI
Add a sign-in button that redirects users to auth.zewstid.com for authentication.
app/components/AuthButton.tsx
'use client';
import { signIn, signOut, useSession } from 'next-auth/react';
export function AuthButton() {
const { data: session } = useSession();
if (session) {
return (
<div>
<p>Welcome, {session.user?.name}</p>
<button onClick={() => signOut()}>Sign Out</button>
</div>
);
}
return <button onClick={() => signIn('zewstid')}>Sign In</button>;
}5
Run Your App
npm run devOpen your app and click Sign In. You'll be redirected to auth.zewstid.com where users can authenticate with email/password, social login, passkeys, and more.