npm package: @hashubo/auth-next
Description: Next.js integration for Hashub Auth
Latest version: 0.1.2

# @wop-sso/next

Next.js integration for WOP-SSO with NextAuth support.

## Features

- ✅ Drop-in NextAuth provider
- ✅ Auto PKCE, state, and token handling
- ✅ User sync callback
- ✅ TypeScript support
- ✅ Token auto-refresh

## Installation

```bash
pnpm add @wop-sso/next next-auth
```

## Usage

### Basic Setup

```typescript
// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { WOPSSOProvider } from "@wop-sso/next";

const handler = NextAuth({
  providers: [
    WOPSSOProvider({
      clientId: process.env.SSO_CLIENT_ID!,
      clientSecret: process.env.SSO_CLIENT_SECRET!,
    }),
  ],
});

export { handler as GET, handler as POST };
```

### With User Sync

Automatically sync SSO users to your local database:

```typescript
import { WOPSSOProvider } from "@wop-sso/next";
import { db } from "@/lib/db";

const handler = NextAuth({
  providers: [
    WOPSSOProvider({
      clientId: process.env.SSO_CLIENT_ID!,
      clientSecret: process.env.SSO_CLIENT_SECRET!,

      // Sync user on login
      async onUserLogin(ssoUser) {
        const localUser = await db.user.upsert({
          where: { email: ssoUser.email },
          create: {
            email: ssoUser.email,
            name: ssoUser.name,
            avatar: ssoUser.picture,
            ssoId: ssoUser.sub,
          },
          update: {
            name: ssoUser.name,
            avatar: ssoUser.picture,
            lastLogin: new Date(),
          },
        });

        return localUser; // Will be available in session
      },
    }),
  ],
});
```

### Environment Variables

```env
SSO_CLIENT_ID=your-client-id
SSO_CLIENT_SECRET=your-client-secret
SSO_URL=http://localhost:3003  # optional
```

### Using in Components

```typescript
import { useSession } from "next-auth/react";

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

  return (
    <div>
      <h1>Welcome {session?.user?.name}</h1>
      <p>Email: {session?.user?.email}</p>
    </div>
  );
}
```

## API

### `WOPSSOProvider(config)`

NextAuth OAuth provider for WOP-SSO.

**Options:**

```typescript
interface WOPSSOConfig {
  clientId: string;
  clientSecret: string;
  ssoUrl?: string; // Default: process.env.SSO_URL
  scopes?: string[]; // Default: ["openid", "email", "profile"]
  onUserLogin?: (user: SSOUser) => Promise<any> | any;
  onError?: (error: Error) => void;
}
```

**onUserLogin Callback:**

Called when user successfully logs in. Use this to sync the SSO user to your local database.

```typescript
onUserLogin: async (ssoUser) => {
  // ssoUser contains:
  // - sub: SSO user ID
  // - email: User email
  // - name: User name
 // - picture: Avatar URL

  // Return your local user object
  return await syncToDatabase(ssoUser);
}
```

## Migration from Manual Setup

**Before:**

```typescript
// 50+ lines of manual config
providers: [{
  id: "sso",
  type: "oauth",
  authorization: { ... },
  token: { ... },
  userinfo: { ... },
  // ...
}]
```

**After:**

```typescript
// 5 lines with SDK
providers: [
  WOPSSOProvider({
    clientId: process.env.SSO_CLIENT_ID!,
    clientSecret: process.env.SSO_CLIENT_SECRET!,
  })
]
```

## Examples

See [examples/](../../examples/nextjs) for complete working example.

## License

MIT