Popup Sign-In (Auth0 Lock-style)

Open a popup window for authentication. The user authenticates on

in the popup, and your parent page receives the result via . No full-page redirect required.

SDK Version: Requires

Copy

@zewstid/nextjs

v0.9.0+

When to Use Popup Sign-In

Quick Start

1. Create the Popup Callback Page

Copy
// app/popup-callback/page.tsx
import { PopupCallback } from '@zewstid/nextjs';

export default function PopupCallbackPage() {
  return <PopupCallback />;
}

This page receives the OAuth callback inside the popup and relays the result to your parent window via

.

2. Add the PopupSignIn Button

Copy
'use client';
import { PopupSignIn } from '@zewstid/nextjs';
import { useRouter } from 'next/navigation';

export function LoginButton() {
  const router = useRouter();

  return (
    <PopupSignIn
      onSuccess={() => router.push('/dashboard')}
      onError={(err) => console.error('Auth failed:', err)}
    >
      Sign in with ZewstID
    </PopupSignIn>
  );
}

That's it. The button opens a popup, the user authenticates, the popup closes, and

fires.

How It Works

Copy
1. User clicks PopupSignIn button
2. Popup opens to auth.zewstid.com with ?display=popup
3. ZewstID renders compact login theme (no header/footer)
4. User authenticates (password, social, OTP, etc.)
5. ZewstID redirects to /popup-callback in the popup
6. PopupCallback sends postMessage to parent window
7. Popup auto-closes
8. Parent receives message, NextAuth session updates
9. onSuccess() fires in your app

API Reference

Copy

<PopupSignIn>

Copy

<PopupCallback>

Popup Blocker Fallback

If the browser blocks the popup,

automatically falls back to a full-page redirect via . The callback fires with before the redirect.

Custom Styling

Pass a

to use your own styles (default gradient styles are disabled when is set):

Copy
<PopupSignIn className="btn btn-primary" onSuccess={handleSuccess}>
  Sign in
</PopupSignIn>

Or use inline

to extend the defaults:

Copy
<PopupSignIn
  style={{ background: '#1a1a2e', borderRadius: '12px' }}
  onSuccess={handleSuccess}
>
  Sign in
</PopupSignIn>

Non-Next.js Apps

For React SPAs, Vue, Svelte, or other frameworks, use the standalone popup callback HTML served by the API Gateway at

. This handles the relay without NextAuth.

Copy
// Open popup manually
const popup = window.open(
  'https://auth.zewstid.com/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=https://api.zewstid.com/popup-callback&response_type=code&scope=openid&display=popup',
  'zewstid-signin',
  'width=500,height=700'
);

// Listen for result
window.addEventListener('message', (event) => {
  if (event.data?.type === 'zewstid:auth:success') {
    // Exchange event.data.code for tokens
  }
});