Skip to main content

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-auth
2

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-chars
3

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 dev

Open 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.