@main12/auth-login 0.1.2 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # @main12/auth-login
 
-**Payload CMS authentication plugin** — login, signup, OTP, forgot password, branded emails, and "Powered by Main 12" footer. Install once, configure your project name and logo, done.
+**Payload CMS authentication plugin** — login, signup, OTP, forgot password, branded emails, and "Powered by Main 12" footer. Install once, done.
 
 ```ts
 // payload.config.ts
@@ -10,7 +10,8 @@ plugins: [
   authLoginPlugin({
     projectName: 'My SaaS',
     domain: 'https://myapp.com',
-    style: 'hero-ui',        // 'tailwind' (default) | 'hero-ui'
+    logo: 'https://myapp.com/logo.png',  // shown in all auth pages + emails
+    style: 'hero-ui',                     // 'tailwind' (default) | 'hero-ui'
   }),
 ]
 ```
@@ -24,7 +25,8 @@ plugins: [
 - **5 API endpoints** — `check-email`, `otp/send`, `otp/verify`, `set-password`, `signup`
 - **OTP engine** — SHA-256 hashing + `timingSafeEqual` comparison, 10-min expiry, 3 attempts
 - **Email templates** — welcome, OTP login, password reset, password changed (EN/ES)
-- **Powered by Main 12** — bundled inline SVG, linked to main12.com by default
+- **Powered by Main 12** — bundled inline SVG, linked to main12.com by default (URL overridable)
+- **Global logo** — pass once in plugin config, automatically shown on all pages and email headers
 - **Zero runtime deps** (Tailwind mode) — Next.js + React are peer dependencies
 
 ---
@@ -35,9 +37,9 @@ plugins: [
 pnpm add @main12/auth-login
 ```
 
-### Tailwind mode (default, zero UI deps)
+### Tailwind mode (default, zero UI deps — also ShadCN compatible)
 
-No extra dependencies needed.
+No extra dependencies needed. The Tailwind style uses standard utility classes that work in any Tailwind project, including ShadCN-based ones.
 
 ### HeroUI mode
 
@@ -49,21 +51,33 @@ pnpm add @heroui/react framer-motion @iconify/react
 
 ## Quick Start
 
-### 1. Add the plugin to your Payload config
+### 1. Add the plugin + Users collection to your Payload config
 
 ```ts
 import { authLoginPlugin } from '@main12/auth-login'
 
 export default buildConfig({
+  collections: [
+    {
+      slug: 'users',
+      auth: { tokenExpiration: 7200, verify: false, maxLoginAttempts: 5 },
+      fields: [
+        { name: 'name', type: 'text' },
+        // OTP fields required by the plugin:
+        { name: 'otpHash', type: 'text', admin: { hidden: true } },
+        { name: 'otpAttempts', type: 'number', admin: { hidden: true } },
+        { name: 'otpExpiresAt', type: 'text', admin: { hidden: true } },
+      ],
+    },
+  ],
   plugins: [
     authLoginPlugin({
       projectName: 'My App',
       domain: 'https://myapp.com',
-      contactEmail: 'support@myapp.com',
-      style: 'tailwind',   // or 'hero-ui'
+      logo: '/logo.png',          // shown automatically on all auth pages
+      style: 'hero-ui',           // or 'tailwind'
     }),
   ],
-  // ... rest of your config
 })
 ```
 
@@ -88,30 +102,24 @@ export { VerifyOtpPage as default } from '@main12/auth-login/client'
 export { SetPasswordPage as default } from '@main12/auth-login/client'
 ```
 
-### 3. Wire up the login action
+The logo is already handled — no need to pass it. The plugin reads it from the global config.
 
-The plugin needs a `login` function. Pass yours from Payload's `useAuth()`:
+### 3. Wire up the login action
 
 ```tsx
-// login/page.tsx
+// login/page.tsx — override with your Payload login function:
 'use client'
 import { LoginPage } from '@main12/auth-login/client'
 import { useAuth } from '@/providers/Auth'
-import AppLogo from '@/components/Logo/AppLogo'
 
 export default function Page() {
   const { login } = useAuth()
-  return (
-    <LoginPage
-      logo={<AppLogo width={180} height={42} />}
-      onPasswordLogin={login}
-      redirectTo="/dashboard"
-      poweredBy={{ enabled: true }}
-    />
-  )
+  return <LoginPage onPasswordLogin={login} redirectTo="/dashboard" />
 }
 ```
 
+### 4. That's it — visit `/login`
+
 ---
 
 ## Configuration Options
@@ -122,71 +130,135 @@ authLoginPlugin({
   projectName: 'My App',          // Used in email subjects and footers
   contactEmail: 'hi@myapp.com',   // Email footer contact
   domain: 'https://myapp.com',    // Links in emails
+  logo: '/logo.png',              // Shown on all auth pages + email headers
 
   // === Style ===
-  style: 'tailwind',              // 'tailwind' | 'hero-ui'
+  style: 'tailwind',              // 'tailwind' (default) | 'hero-ui'
 
   // === Enable/Disable ===
   enabled: true,                  // Set false to disable the plugin
 })
 ```
 
-Each page component also accepts these props:
+### Per-page overrides
+
+Each page component also accepts these props for project-specific customization:
 
 ```ts
 <LoginPage
-  logo={...}                    // React node — your brand logo
-  onPasswordLogin={login}       // Required — Payload's login function
-  redirectTo="/dashboard"       // Where to go after login
-  showGoogleOAuth={true}        // Show "Continue with Google" button
-  signupUrl="/signup"           // Link to signup page
-  poweredBy={{                  // Powered by logo config
+  logo={<AppLogo width={180} />}  // Override global logo (optional)
+  onPasswordLogin={login}          // Required — Payload's login function
+  redirectTo="/dashboard"          // Where to go after login
+  showGoogleOAuth={true}           // Show "Continue with Google" button
+  signupUrl="/signup"              // Link to signup page
+  poweredBy={{                     // Powered by logo config
     enabled: true,
-    logoUrl: '/custom-logo.png',  // Override the default Main12 logo
+    logoUrl: '/custom.png',        // Override default Main12 logo
     linkUrl: 'https://your-site.com',
-    width: 28,
-    height: 28,
   }}
 />
 ```
 
 ---
 
-## Using Hooks & Services Directly
+## Building Custom Auth Pages
+
+You can build your own UI while reusing the plugin's hooks, services, and endpoints.
 
-Don't want the pre-built pages? Use the hooks and services to build your own:
+### Custom login with your own components
 
 ```tsx
-import { useLoginFlow, useVerifyOtpFlow, checkEmail, sendOtp } from '@main12/auth-login/client'
+'use client'
+import { useLoginFlow } from '@main12/auth-login/client'
+import { Button, Input } from '@heroui/react' // or shadcn, or plain HTML
+import { useAuth } from '@/providers/Auth'
 
-function MyCustomLogin() {
-  const { email, handleEmailSubmit, ... } = useLoginFlow({
+export default function MyCustomLogin() {
+  const { login } = useAuth()
+  const {
+    step, email, password, error, isLoading, showPassword,
+    setEmail, setPassword, setShowPassword,
+    handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail,
+  } = useLoginFlow({
     redirectTo: '/dashboard',
     onPasswordLogin: login,
   })
-  // Build your own UI with these values
+
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="w-full max-w-md p-8 bg-white rounded-2xl shadow-xl">
+        {step === 'email' && (
+          <form onSubmit={handleEmailSubmit}>
+            <Input type="email" label="Email" value={email} onValueChange={setEmail} />
+            <Button type="submit" isLoading={isLoading}>Continue</Button>
+          </form>
+        )}
+        {step === 'password' && (
+          <form onSubmit={handlePasswordSubmit}>
+            <p>Signing in as {email} <button onClick={handleEditEmail}>Edit</button></p>
+            <Input type="password" label="Password" value={password} onValueChange={setPassword} />
+            <Button type="submit" isLoading={isLoading}>Sign In</Button>
+          </form>
+        )}
+        {step === 'otp-prompt' && (
+          <>
+            <p>{email} <button onClick={handleEditEmail}>Edit</button></p>
+            <Button onPress={handleSendOtp} isLoading={isLoading}>Send Code</Button>
+          </>
+        )}
+      </div>
+    </div>
+  )
 }
 ```
 
-### Exported Hooks
+### Custom email templates
 
-| Hook | Purpose |
-|------|---------|
-| `useLoginFlow` | Multi-step login state machine (email → password/OTP) |
-| `useVerifyOtpFlow` | OTP input, verify, resend with cooldown |
-| `useForgotPasswordFlow` | Email → check → send OTP |
-| `useSetPasswordFlow` | Set password with strength indicator |
+Override individual email translations or entire template functions:
 
-### Exported Services
+```ts
+import { getEmailTranslations } from '@main12/auth-login/rsc'
+
+// Option 1: Deep-merge translations
+const myTranslations = getEmailTranslations('en')
+myTranslations.welcome.subject = 'Welcome to My SaaS! 🚀'
+myTranslations.otp.purposeLogin = 'Use this code to access your dashboard:'
+
+// Option 2: Import template generators and wrap them
+import { generateWelcomeEmail, generateOtpEmail } from '@main12/auth-login/rsc'
+
+function myWelcomeEmail(params) {
+  const base = generateWelcomeEmail(params)
+  return {
+    ...base,
+    html: base.html.replace('Get Started', 'Launch Dashboard'),
+  }
+}
 
-| Function | Description |
-|----------|-------------|
-| `checkEmail(email)` | Check if user exists and has password |
-| `sendOtp(email, purpose)` | Send OTP to email |
-| `verifyOtp(email, otp)` | Verify OTP code |
-| `setUserPassword(password, confirm)` | Set/update password |
-| `signup(name, email)` | Create new user |
-| `initiateGoogleLogin(redirect)` | Redirect to Google OAuth |
+// Use in your Payload hooks or custom endpoints
+await payload.sendEmail({
+  to: user.email,
+  subject: myWelcomeEmail({ userName: user.name }).subject,
+  html: myWelcomeEmail({ userName: user.name }).html,
+})
+```
+
+---
+
+## Exported Hooks & Services
+
+| Hook / Service | Type | Purpose |
+|---------------|------|---------|
+| `useLoginFlow` | Hook | Multi-step login state machine (email → password/OTP) |
+| `useVerifyOtpFlow` | Hook | OTP input, verify, resend with cooldown |
+| `useForgotPasswordFlow` | Hook | Email → check → send OTP |
+| `useSetPasswordFlow` | Hook | Set password with strength indicator |
+| `checkEmail(email)` | Service | Check if user exists and has password |
+| `sendOtp(email, purpose)` | Service | Send OTP to email |
+| `verifyOtp(email, otp)` | Service | Verify OTP code |
+| `setUserPassword(pw, confirm)` | Service | Set/update password |
+| `signup(name, email)` | Service | Create new user |
+| `initiateGoogleLogin(redirect)` | Service | Redirect to Google OAuth |
 
 ---
 
@@ -197,23 +269,22 @@ Registered automatically by the plugin:
 | Method | Path | Description |
 |--------|------|-------------|
 | POST | `/api/auth/check-email` | Check if email is registered |
-| POST | `/api/auth/otp/send` | Generate + send OTP |
-| POST | `/api/auth/otp/verify` | Verify OTP + login |
+| POST | `/api/auth/otp/send` | Generate + send OTP via Payload email adapter |
+| POST | `/api/auth/otp/verify` | Verify OTP + login (sets httpOnly cookie) |
 | POST | `/api/auth/set-password` | Set/update password |
-| POST | `/api/auth/signup` | Create account |
+| POST | `/api/auth/signup` | Create account + send welcome email |
 
 ---
 
-## Email Templates
+## ShadCN Compatibility
 
-Four HTML email templates in EN/ES, using the host project's Payload email adapter:
+The `tailwind` style uses standard Tailwind utility classes — it works in ShadCN projects out of the box. If you want ShadCN components instead of plain HTML:
 
-- **Welcome** — sent on signup
-- **OTP** — 6-digit code for login or password reset
-- **Password Reset** — OTP email for forgot password flow
-- **Password Changed** — confirmation after password update
+1. Follow the [Custom Auth Pages](#building-custom-auth-pages) guide above
+2. Import `useLoginFlow`, `useVerifyOtpFlow`, etc. from the plugin
+3. Use your ShadCN `<Button>`, `<Input>`, `<Card>` components with the same hook values
 
-Override translations or template functions via the `emails` option (Phase 2).
+No need for a separate `style: 'shadcn'` — the Tailwind style already renders compatible markup, and custom pages give you full ShadCN component control.
 
 ---
 
@@ -222,18 +293,13 @@ Override translations or template functions via the `emails` option (Phase 2).
 This repo ships with a dev harness. To test locally:
 
 ```bash
+git clone https://github.com/MAIN-12/auth-login-plugin.git
 cd auth-login-plugin
 pnpm install
 pnpm dev
 ```
 
-Visits:
-- `http://localhost:3000/login` — multi-step login
-- `http://localhost:3000/signup` — create account
-- `http://localhost:3000/forgot-password` — password reset
-- `http://localhost:3000/admin` — Payload admin panel
-
-The dev config uses SQLite (no external DB needed) with a Users collection pre-configured.
+Visit `http://localhost:3000/login` — all 5 auth pages wired with SQLite.
 
 ---
 

package/dist/components/AuthLayout.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface AuthLayoutConfig {
-    logo: React.ReactNode;
+    /** Logo as a React node. Falls back to pluginConfig.logoUrl if not provided. */
+    logo?: React.ReactNode;
     title?: string;
     subtitle?: string;
     poweredBy?: {

package/dist/components/AuthLayout.js

@@ -3,7 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Card, CardContent, CardFooter } from './ui/index.js';
 import { PoweredBy } from './PoweredBy.js';
+import { pluginConfig } from '../config.js';
+function DefaultLogo() {
+    if (!pluginConfig.logoUrl) return null;
+    return /*#__PURE__*/ _jsx("img", {
+        src: pluginConfig.logoUrl,
+        alt: "",
+        width: 180,
+        height: 42,
+        className: "object-contain"
+    });
+}
 export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy, cardClassName = '', backgroundClass = 'bg-white md:bg-[#191919]' })=>{
+    const displayLogo = logo || /*#__PURE__*/ _jsx(DefaultLogo, {});
     return /*#__PURE__*/ _jsx("main", {
         className: `flex flex-col min-h-screen ${backgroundClass}`,
         children: /*#__PURE__*/ _jsx("div", {
@@ -14,12 +26,12 @@ export const AuthLayout = ({ children, logo, title, subtitle, footer, poweredBy,
                     /*#__PURE__*/ _jsxs(Card, {
                         className: cardClassName,
                         children: [
-                            (logo || title) && /*#__PURE__*/ _jsxs("div", {
+                            (displayLogo || title) && /*#__PURE__*/ _jsxs("div", {
                                 className: "flex flex-col items-center gap-2 pt-6 pb-2 px-6",
                                 children: [
-                                    logo && /*#__PURE__*/ _jsx("div", {
+                                    displayLogo && /*#__PURE__*/ _jsx("div", {
                                         className: "flex justify-center mb-2",
-                                        children: logo
+                                        children: displayLogo
                                     }),
                                     title && /*#__PURE__*/ _jsx("h1", {
                                         className: "text-xl font-semibold text-gray-900 text-center",

package/dist/config.d.ts

@@ -5,4 +5,5 @@
 export type AuthStyle = 'tailwind' | 'hero-ui';
 export declare const pluginConfig: {
     style: AuthStyle;
+    logoUrl?: string;
 };

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export interface AuthLoginPluginOptions {
     domain?: string;
     /** UI style for auth pages: 'tailwind' (default) or 'hero-ui' */
     style?: AuthStyle;
+    /** Logo shown in all auth pages and email headers. Can be a URL string. */
+    logo?: string;
 }
 export declare const authLoginPlugin: (options?: AuthLoginPluginOptions) => (config: Config) => Config;
 export { pluginConfig };

package/dist/index.js

@@ -4,6 +4,7 @@ export const authLoginPlugin = (options = {})=>(config)=>{
         if (options.enabled === false) return config;
         // Set global style config — all page components read this at render time
         pluginConfig.style = options.style || 'tailwind';
+        pluginConfig.logoUrl = options.logo;
         // Register auth API endpoints
         config.endpoints = [
             ...config.endpoints || [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@main12/auth-login",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Reusable Payload CMS auth plugin — login, signup, OTP, forgot password, branded emails, Powered by Main12",
   "license": "MIT",
   "type": "module",