Skip to main content

Quick Start

Add ZewstID authentication to your Next.js app.

1. Install

npm install @zewstid/nextjs next-auth

2. Environment Variables

Create

.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

Get credentials from developers.zewstid.com/applications

3. Create Auth Route

Create

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 Provider

Update

app/layout.tsx
:

import { SessionProvider } from 'next-auth/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

5. Add Login Button

'use client';
import { signIn, signOut, useSession } from 'next-auth/react';

export function AuthButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        <p>Welcome, {session.user?.name}</p>
        <button onClick={() => signOut()}>Sign Out</button>
      </>
    );
  }

  return <button onClick={() => signIn('zewstid')}>Sign In</button>;
}

6. Run

npm run dev

Open http://localhost:3000 and click Sign In.

Next Steps

Advanced: Custom Login UI

If you need password, magic link, or OTP authentication with your own UI:

// app/api/zewstid/[...zewstid]/route.ts
import { createZewstIDHandlers } from '@zewstid/nextjs/handlers';

const handlers = createZewstIDHandlers({
  clientId: process.env.ZEWSTID_CLIENT_ID!,
  clientSecret: process.env.ZEWSTID_CLIENT_SECRET!,
  baseUrl: process.env.NEXTAUTH_URL,
  apiUrl: 'https://api.zewstid.com',
  issuerUrl: 'https://auth.zewstid.com/realms/zewstid',
});

export const GET = handlers.GET;
export const POST = handlers.POST;

Then use the SDK hooks in your components:

const { signInWithPassword, sendMagicLink, sendOTP } = useZewstID({
  clientId: process.env.NEXT_PUBLIC_ZEWSTID_CLIENT_ID!,
});

// Password login
await signInWithPassword(email, password);

// Magic link
await sendMagicLink(email);

// OTP
await sendOTP(email);

See API Handlers Guide for full documentation.

Was this page helpful?

Let us know how we can improve our documentation