@main12/auth-login 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +56 -9
  2. package/package.json +10 -10
package/README.md CHANGED
@@ -35,7 +35,7 @@ plugins: [
35
35
  - **Auto-verify OTP** — automatically verifies when all 6 digits are entered
36
36
  - **Smart redirects** — logged-in users are redirected away from auth pages
37
37
  - **Google account picker** — always shows account selection by default (`prompt: 'select_account'`)
38
- - **Zero runtime deps** (Tailwind mode) — Next.js + React are peer dependencies
38
+ - **No UI library required** (Tailwind mode) — only Next.js/React/Payload peers; `style: 'hero-ui'` additionally requires HeroUI + Framer Motion
39
39
  - **Multi-language** — built-in English/Spanish, auto-detected per-request, fully overridable via `messages` prop, works with or without next-intl/next-i18next
40
40
 
41
41
  ---
@@ -194,6 +194,9 @@ authLoginPlugin({
194
194
  style: 'tailwind', // 'tailwind' | 'hero-ui'
195
195
  enabled: true,
196
196
 
197
+ // Signup
198
+ allowSignup: true, // Allow new users to sign up (default: true)
199
+
197
200
  // Login methods
198
201
  passwordLogin: true, // Allow password-based login (default: true)
199
202
  otpLogin: true, // Allow OTP-based login (default: true)
@@ -294,10 +297,20 @@ The `AuthPages` component accepts these props for customization:
294
297
  logo={<MyLogo />} // Custom logo component
295
298
  basePath="/auth" // Base path for sibling links (default: '/auth')
296
299
  showGoogleOAuth={true} // Override Google OAuth visibility
300
+ allowSignup={true} // Override plugin's allowSignup setting for this render
301
+ passwordLogin={true} // Override plugin's passwordLogin setting for this render
302
+ otpLogin={true} // Override plugin's otpLogin setting for this render
297
303
  onPasswordLogin={customLogin} // Custom login handler
298
304
  onSignup={customSignup} // Custom signup handler
299
305
  locale="es" // Override auto-detected locale (see Multi-Language Support)
300
306
  messages={{ es: { login: { title: 'Bienvenido' } } }} // Partial translation overrides
307
+
308
+ // Card chrome — same options accepted by <AuthCard> (see Components Reference)
309
+ poweredBy={{ enabled: true }} // Configure/hide the "Powered by Main 12" badge
310
+ cardClassName="" // Extra classes on the card wrapper
311
+ removeBorder={false} // Remove the card border (useful for split/custom layouts)
312
+ removeShadow={false} // Remove the card shadow
313
+ mobileVariant="plain" // 'plain' | 'card' — how the card renders on mobile widths
301
314
  />
302
315
  ```
303
316
 
@@ -429,6 +442,39 @@ export default function Page() {
429
442
 
430
443
  ---
431
444
 
445
+ ## Custom Layouts (Split-Screen, etc.)
446
+
447
+ For layouts `AuthPages` can't express (e.g. a split-screen with an image pane), compose `AuthLayout` + `AuthCard` directly — the same primitives every built-in page is built from. Pass `slug` to auto-render the matching form (with full translation/config support), and use `removeBorder`/`removeShadow`/`cardClassName` to fit the card into your own layout:
448
+
449
+ ```tsx
450
+ // app/(auth)/auth/[...slug]/page.tsx (server component, no 'use client' needed)
451
+ import { AuthLayout, AuthCard } from '@main12/auth-login/rsc'
452
+
453
+ export default async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
454
+ const { slug } = await params
455
+ return (
456
+ <AuthLayout backgroundClass="bg-white">
457
+ <div className="min-h-screen grid md:grid-cols-2">
458
+ <div className="hidden md:block bg-cover bg-center" style={{ backgroundImage: 'url(/hero.jpg)' }} />
459
+ <div className="flex items-center justify-center">
460
+ <AuthCard
461
+ slug={slug?.[0] ?? 'login'}
462
+ removeShadow
463
+ removeBorder
464
+ basePath="/auth"
465
+ redirectTo="/admin"
466
+ />
467
+ </div>
468
+ </div>
469
+ </AuthLayout>
470
+ )
471
+ }
472
+ ```
473
+
474
+ `AuthCard` also accepts `children` instead of `slug` for fully custom form content — see [Building Custom Pages](#building-custom-pages) below.
475
+
476
+ ---
477
+
432
478
  ## Building Custom Pages
433
479
 
434
480
  Use the plugin's hooks to build your own UI with any component library (HeroUI, shadcn, plain Tailwind).
@@ -437,10 +483,10 @@ Use the plugin's hooks to build your own UI with any component library (HeroUI,
437
483
 
438
484
  | Hook | Returns | Key inputs |
439
485
  |------|---------|------------|
440
- | `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
486
+ | `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
441
487
  | `useForgotPasswordFlow()` | `email, error, isLoading, setEmail, handleSubmit` | none |
442
488
  | `useVerifyOtpFlow({ email, purpose, redirectTo })` | `otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode` | `email: string`, `purpose: 'login'\|'signup'\|'password-reset'` |
443
- | `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, strength, setPassword, setConfirmPassword, handleSubmit` | `redirectTo: string` |
489
+ | `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit` | `redirectTo?: string` |
444
490
 
445
491
  > **Signup note:** No hook needed — call `signup(name, email)` from `@main12/auth-login/client`, then redirect to `/verify-otp?email=...&purpose=signup`.
446
492
 
@@ -592,7 +638,8 @@ await payload.sendEmail({
592
638
  | `ForgotPasswordPage` | Standalone forgot-password page | Individual route setup |
593
639
  | `VerifyOtpPage` | Standalone OTP verification page — **requires `?email=...` in the URL** | Reached via redirect from signup/login/forgot-password |
594
640
  | `SetPasswordPage` | Standalone set/reset password page | Individual route setup, or post-OTP password creation |
595
- | `AuthLayout` | Shared card/background/logo/footer chrome used by every page — use it directly when building fully custom pages | `<AuthLayout title="..." subtitle="...">{children}</AuthLayout>` |
641
+ | `AuthCard` | The card chrome (logo, title/subtitle, footer, "Powered by" badge) — pass `slug` to auto-render the matching form, or `children` for fully custom content. `removeBorder`/`removeShadow`/`cardClassName`/`mobileVariant` support custom layouts like split-screen | `<AuthCard slug="login" removeShadow basePath="/auth" />` or `<AuthCard title="..." subtitle="...">{children}</AuthCard>` |
642
+ | `AuthLayout` | Outermost full-height background wrapper used by every page — compose it with `AuthCard` (and e.g. a split-screen image) when building fully custom layouts | `<AuthLayout backgroundClass="bg-white"><AuthCard slug="login" /></AuthLayout>` |
596
643
  | `AuthClientInit` | Drop into your root layout to sync server plugin config (`style`, Google OAuth flag) to client bundles. Optional — only needed if you hit issues with plugin config not reaching client components in certain bundler setups | `<AuthClientInit />` inside `<body>` |
597
644
  | `PoweredBy` | The "Powered by Main 12" footer badge, rendered automatically on every page (configurable via `poweredBy` prop) | Rarely used standalone — mostly internal |
598
645
 
@@ -600,10 +647,10 @@ await payload.sendEmail({
600
647
 
601
648
  | Hook | Returns | Key inputs |
602
649
  |------|---------|------------|
603
- | `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
650
+ | `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
604
651
  | `useForgotPasswordFlow()` | `email, error, isLoading, setEmail, handleSubmit` | none |
605
652
  | `useVerifyOtpFlow({ email, purpose, redirectTo })` | `otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode` | `email: string`, `purpose: 'login'\|'signup'\|'password-reset'` |
606
- | `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, strength, setPassword, setConfirmPassword, handleSubmit` | `redirectTo: string` |
653
+ | `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, showPassword, strength, setPassword, setConfirmPassword, setShowPassword, handleSubmit` | `redirectTo?: string` |
607
654
 
608
655
  ### Service functions (`@main12/auth-login/client`)
609
656
 
@@ -763,10 +810,10 @@ The auth-login plugin uses `payload.sendEmail()` internally — which routes thr
763
810
 
764
811
  | Dependency | Version | Required |
765
812
  |------------|---------|----------|
766
- | Payload CMS | `^3.82.0` | ✅ |
767
- | Next.js | `^16.0.0` | ✅ |
813
+ | Payload CMS | `^3.90.0` | ✅ |
814
+ | Next.js | `^16.3.3` | ✅ |
768
815
  | React | `^19.0.0` | ✅ |
769
- | HeroUI | `^2.x` | Only for `style: 'hero-ui'` |
816
+ | HeroUI | `>=3.2.0` | Only for `style: 'hero-ui'` |
770
817
  | Framer Motion | `^12.x` | Only for `style: 'hero-ui'` |
771
818
 
772
819
  ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@main12/auth-login",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Reusable Payload CMS auth plugin — login, signup, OTP, forgot password, branded emails, Powered by Main12",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -52,10 +52,10 @@
52
52
  "@heroui/styles": "^3.2.2",
53
53
  "@iconify/react": "^6.0.2",
54
54
  "@main12/auth-login": "link:.",
55
- "@payloadcms/db-sqlite": "3.82.1",
56
- "@payloadcms/next": "3.82.1",
57
- "@payloadcms/richtext-lexical": "3.82.1",
58
- "@payloadcms/ui": "3.82.1",
55
+ "@payloadcms/db-sqlite": "3.90.2",
56
+ "@payloadcms/next": "3.90.2",
57
+ "@payloadcms/richtext-lexical": "3.90.2",
58
+ "@payloadcms/ui": "3.90.2",
59
59
  "@swc/cli": "0.6.0",
60
60
  "@tailwindcss/postcss": "^4.3.3",
61
61
  "@types/node": "24.12.3",
@@ -65,12 +65,12 @@
65
65
  "cross-env": "10.1.0",
66
66
  "eslint": "^9.23.0",
67
67
  "framer-motion": "^12.43.0",
68
- "next": "16.2.7",
69
- "payload": "3.82.1",
68
+ "next": "16.3.6",
69
+ "payload": "3.90.2",
70
70
  "react": "19.2.6",
71
71
  "react-dom": "19.2.6",
72
72
  "rimraf": "3.0.2",
73
- "sharp": "0.34.2",
73
+ "sharp": "0.35.4",
74
74
  "tailwindcss": "^4.3.3",
75
75
  "tw-animate-css": "^1.4.0",
76
76
  "typescript": "6.0.3",
@@ -79,9 +79,9 @@
79
79
  "peerDependencies": {
80
80
  "@heroui/react": ">=3.2.0",
81
81
  "framer-motion": ">=12.0.0",
82
- "next": "^16.0.0",
82
+ "next": "^16.3.3",
83
83
  "next-intl": "*",
84
- "payload": "^3.82.0",
84
+ "payload": "^3.90.0",
85
85
  "react": "^19.0.0"
86
86
  },
87
87
  "peerDependenciesMeta": {