@djangocfg/layouts 2.1.57 → 2.1.58

package/README.md

@@ -678,7 +678,7 @@ export default function DashboardPage() {
 }
 ```
 
-### Auth Page (OTP Authentication)
+### Auth Page (OTP + 2FA Authentication)
 
 ```tsx
 // app/auth/page.tsx
@@ -695,9 +695,10 @@ export default function AuthPage() {
       privacyUrl="/privacy"
       enablePhoneAuth={false}
       enableGithubAuth={true}
+      logoUrl="/logo.svg"
       redirectUrl="/dashboard"
       onOTPSuccess={() => {
-        console.log('OTP authentication successful');
+        console.log('Authentication successful');
       }}
       onOAuthSuccess={(user, isNewUser, provider) => {
         console.log('OAuth success:', { user, isNewUser, provider });
@@ -714,17 +715,24 @@ export default function AuthPage() {
 }
 ```
 
+**Authentication Flow:**
+1. **Identifier** → Enter email/phone or click GitHub OAuth
+2. **OTP** → Enter 6-digit verification code
+3. **2FA** → Enter TOTP code (if 2FA enabled for user)
+4. **Success** → Show logo animation, then redirect
+
 **AuthLayout Props:**
 | Prop | Type | Description |
 |------|------|-------------|
 | `sourceUrl` | `string` | Application URL for OTP emails |
 | `redirectUrl` | `string` | URL to redirect after successful auth (default: `/dashboard`) |
+| `logoUrl` | `string` | Logo URL for success screen (SVG recommended) |
 | `enablePhoneAuth` | `boolean` | Enable phone number authentication |
 | `enableGithubAuth` | `boolean` | Enable GitHub OAuth |
 | `termsUrl` | `string` | Terms of service URL (shows checkbox if provided) |
 | `privacyUrl` | `string` | Privacy policy URL |
 | `supportUrl` | `string` | Support page URL |
-| `onOTPSuccess` | `() => void` | Callback after successful OTP verification |
+| `onOTPSuccess` | `() => void` | Callback after successful authentication |
 | `onOAuthSuccess` | `(user, isNewUser, provider) => void` | Callback after successful OAuth |
 | `onError` | `(message: string) => void` | Error callback |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.57",
+  "version": "2.1.58",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.57",
-    "@djangocfg/centrifugo": "^2.1.57",
-    "@djangocfg/ui-nextjs": "^2.1.57",
+    "@djangocfg/api": "^2.1.58",
+    "@djangocfg/centrifugo": "^2.1.58",
+    "@djangocfg/ui-nextjs": "^2.1.58",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -112,11 +112,12 @@
   },
   "dependencies": {
     "nextjs-toploader": "^3.9.17",
+    "qrcode.react": "^4.2.0",
     "react-ga4": "^2.1.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.57",
+    "@djangocfg/typescript-config": "^2.1.58",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,26 +1,8 @@
 /**
  * Auth Layout
  *
- * Layout for authentication pages with OTP (email/phone) and OAuth (GitHub) support.
- * Supports two-step authentication flow: identifier input → OTP verification
- * Also handles OAuth callbacks automatically when enableGithubAuth is true.
- *
- * @example
- * ```tsx
- * import { AuthLayout } from '@djangocfg/layouts';
- *
- * <AuthLayout
- *   sourceUrl="https://example.com"
- *   supportUrl="https://example.com/support"
- *   termsUrl="https://example.com/terms"
- *   privacyUrl="https://example.com/privacy"
- *   enablePhoneAuth={false}
- *   enableGithubAuth={true}
- *   redirectUrl="/dashboard"
- * >
- *   {/* Optional custom content above forms *\/}
- * </AuthLayout>
- * ```
+ * Layout for authentication pages with OTP (email/phone), OAuth (GitHub), and 2FA support.
+ * Supports multi-step authentication flow: identifier → OTP → 2FA (if enabled)
  */
 
 'use client';
@@ -28,51 +10,77 @@
 import React from 'react';
 
 import { Suspense } from '../../components';
-import { AuthProvider, useAuthContext } from './AuthContext';
-import { IdentifierForm } from './IdentifierForm';
-import { OAuthCallback } from './OAuthCallback';
-import { OTPForm } from './OTPForm';
+import { AuthSuccess, IdentifierForm, OAuthCallback, OTPForm, TwoFactorForm, TwoFactorSetup } from './components';
+import { AuthFormProvider, useAuthFormContext } from './context';
 
-import type { AuthProps } from './types';
+import type { AuthLayoutProps } from './types';
 
-export type AuthLayoutProps = AuthProps;
+export type { AuthLayoutProps };
 
-export const AuthLayout: React.FC<AuthProps> = (props) => {
-  const { enableGithubAuth, redirectUrl = '/dashboard', onOAuthSuccess, onError } = props;
+export const AuthLayout: React.FC<AuthLayoutProps> = (props) => {
+  const { enableGithubAuth, redirectUrl = '/dashboard', onOAuthSuccess, onError, className } = props;
 
   return (
     <Suspense>
-      {/* Handle OAuth callback when GitHub auth is enabled */}
-      {enableGithubAuth && (
-        <Suspense fallback={null}>
-          <OAuthCallback
-            redirectUrl={redirectUrl}
-            onSuccess={onOAuthSuccess ? (user, isNewUser) => onOAuthSuccess(user, isNewUser, 'github') : undefined}
-            onError={onError}
-          />
-        </Suspense>
-      )}
+      <AuthFormProvider {...props}>
+        {/* Full-screen success overlay */}
+        <AuthSuccessOverlay />
 
-      <AuthProvider {...props}>
         <div
-          className={`min-h-screen flex flex-col items-center justify-center bg-background py-6 px-4 sm:py-12 sm:px-6 lg:px-8 ${props.className || ''}`}
+          className={`min-h-screen flex flex-col items-center justify-center bg-background py-6 px-4 sm:py-12 sm:px-6 lg:px-8 ${className || ''}`}
         >
+          {/* Handle OAuth callback when GitHub auth is enabled */}
+          {enableGithubAuth && (
+            <Suspense fallback={null}>
+              <OAuthCallback
+                redirectUrl={redirectUrl}
+                onSuccess={onOAuthSuccess ? (user, isNewUser) => onOAuthSuccess(user, isNewUser, 'github') : undefined}
+                onError={onError}
+              />
+            </Suspense>
+          )}
+
           <div className="w-full sm:max-w-md space-y-8">
             {props.children}
-
             <AuthContent />
           </div>
         </div>
-      </AuthProvider>
+      </AuthFormProvider>
     </Suspense>
   );
 };
 
-// Separate component to use the context
 const AuthContent: React.FC = () => {
-  const { step } = useAuthContext();
+  const { step, setStep } = useAuthFormContext();
 
-  return (
-    <div>{step === 'identifier' ? <IdentifierForm /> : <OTPForm />}</div>
-  );
+  switch (step) {
+    case 'identifier':
+      return <IdentifierForm />;
+    case 'otp':
+      return <OTPForm />;
+    case '2fa':
+      return <TwoFactorForm />;
+    case '2fa-setup':
+      return (
+        <TwoFactorSetup
+          onComplete={() => setStep('success')}
+          onSkip={() => setStep('success')}
+        />
+      );
+    case 'success':
+      // Success is rendered as full-screen overlay, return null here
+      return null;
+    default:
+      return <IdentifierForm />;
+  }
+};
+
+const AuthSuccessOverlay: React.FC = () => {
+  const { step } = useAuthFormContext();
+
+  if (step !== 'success') {
+    return null;
+  }
+
+  return <AuthSuccess />;
 };

package/src/layouts/AuthLayout/{AuthHelp.tsx → components/AuthHelp.tsx}

@@ -3,15 +3,15 @@ import React from 'react';
 
 import { Button } from '@djangocfg/ui-nextjs/components';
 
-import { useAuthContext } from './AuthContext';
+import { useAuthFormContext } from '../context';
 
-import type { AuthHelpProps } from './types';
+import type { AuthHelpProps } from '../types';
 
 export const AuthHelp: React.FC<AuthHelpProps> = ({
   className = '',
   variant = 'default',
 }) => {
-  const { supportUrl, channel } = useAuthContext();
+  const { supportUrl, channel } = useAuthFormContext();
 
   const getChannelIcon = () => {
     return channel === 'phone' ? (

package/src/layouts/AuthLayout/components/AuthSuccess.tsx

@@ -0,0 +1,101 @@
+/**
+ * Auth Success Component
+ *
+ * Full-screen success layout shown after successful authentication.
+ * Displays a centered logo with a subtle animation, then redirects.
+ */
+
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
+
+import { useAuthFormContext } from '../context';
+
+export interface AuthSuccessProps {
+  className?: string;
+  /** Delay before redirect in ms (default: 1500) */
+  redirectDelay?: number;
+}
+
+export const AuthSuccess: React.FC<AuthSuccessProps> = ({ className, redirectDelay = 1500 }) => {
+  const { logoUrl, redirectUrl } = useAuthFormContext();
+  const router = useCfgRouter();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Trigger animation after mount
+    const animTimer = setTimeout(() => setIsVisible(true), 50);
+
+    // Redirect after delay
+    const redirectTimer = setTimeout(() => {
+      const finalUrl = redirectUrl || '/dashboard';
+      router.hardPush(finalUrl);
+    }, redirectDelay);
+
+    return () => {
+      clearTimeout(animTimer);
+      clearTimeout(redirectTimer);
+    };
+  }, [redirectUrl, redirectDelay, router]);
+
+  if (!logoUrl) {
+    // Fallback: simple checkmark if no logo provided
+    return (
+      <div className={`fixed inset-0 flex items-center justify-center bg-background z-50 ${className || ''}`}>
+        <div
+          className={`transition-all duration-700 ease-out ${
+            isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+          }`}
+        >
+          <div className="w-24 h-24 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
+            <svg
+              className="w-12 h-12 text-green-600 dark:text-green-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`fixed inset-0 flex items-center justify-center bg-background z-50 ${className || ''}`}>
+      <div
+        className={`transition-all duration-700 ease-out ${
+          isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
+        }`}
+      >
+        {/* Logo container with max size and animation */}
+        <div className="relative">
+          {/* Subtle glow effect */}
+          <div
+            className={`absolute inset-0 blur-3xl transition-opacity duration-1000 ${
+              isVisible ? 'opacity-20' : 'opacity-0'
+            }`}
+            style={{
+              background: 'radial-gradient(circle, currentColor 0%, transparent 70%)',
+            }}
+          />
+
+          {/* Logo image */}
+          <img
+            src={logoUrl}
+            alt="Success"
+            className="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 object-contain"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/layouts/AuthLayout/{IdentifierForm.tsx → components/IdentifierForm.tsx}

@@ -8,9 +8,9 @@ import {
     PhoneInput, Tabs, TabsContent, TabsList, TabsTrigger
 } from '@djangocfg/ui-nextjs/components';
 
-import { useAuthContext } from './AuthContext';
+import { useAuthFormContext } from '../context';
 import { AuthHelp } from './AuthHelp';
-import { OAuthProviders } from './OAuthProviders';
+import { OAuthProviders } from './oauth';
 
 export const IdentifierForm: React.FC = () => {
   const {
@@ -28,7 +28,7 @@ export const IdentifierForm: React.FC = () => {
     detectChannelFromIdentifier,
     validateIdentifier,
     error,
-  } = useAuthContext();
+  } = useAuthFormContext();
 
   const [localChannel, setLocalChannel] = useState<'email' | 'phone'>(channel);
 
@@ -215,20 +215,13 @@ export const IdentifierForm: React.FC = () => {
               {/* Submit Button */}
               <Button
                 type="submit"
-                className="w-full h-11 text-base font-medium"
-                disabled={isLoading || !identifier || (hasAnyLinks && !acceptedTerms)}
+                size="lg"
+                className="w-full"
+                disabled={!identifier || (hasAnyLinks && !acceptedTerms)}
+                loading={isLoading}
               >
-                {isLoading ? (
-                  <div className="flex items-center gap-2">
-                    <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                    Sending code...
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2">
-                    <Send className="w-4 h-4" />
-                    Send verification code
-                  </div>
-                )}
+                <Send className="w-4 h-4" />
+                Send verification code
               </Button>
             </form>
           </Tabs>
@@ -306,20 +299,13 @@ export const IdentifierForm: React.FC = () => {
             {/* Submit Button */}
             <Button
               type="submit"
-              className="w-full h-11 text-base font-medium"
-              disabled={isLoading || !identifier || (hasAnyLinks && !acceptedTerms)}
+              size="lg"
+              className="w-full"
+              disabled={!identifier || (hasAnyLinks && !acceptedTerms)}
+              loading={isLoading}
             >
-              {isLoading ? (
-                <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                  Sending code...
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <Send className="w-4 h-4" />
-                  Send verification code
-                </div>
-              )}
+              <Send className="w-4 h-4" />
+              Send verification code
             </Button>
           </form>
         )}

package/src/layouts/AuthLayout/{OTPForm.tsx → components/OTPForm.tsx}

@@ -7,8 +7,8 @@ import {
     Button, Card, CardContent, CardDescription, CardHeader, CardTitle, OTPInput
 } from '@djangocfg/ui-nextjs/components';
 
-import { config } from '../../utils';
-import { useAuthContext } from './AuthContext';
+import { config } from '../../../utils';
+import { useAuthFormContext } from '../context';
 import { AuthHelp } from './AuthHelp';
 
 export const OTPForm: React.FC = () => {
@@ -23,15 +23,17 @@ export const OTPForm: React.FC = () => {
     handleOTPSubmit,
     handleResendOTP,
     handleBackToIdentifier,
-  } = useAuthContext();
+    isAutoSubmittingFromUrl,
+  } = useAuthFormContext();
 
   // Ref to track if auto-submit is in progress to prevent duplicate submissions
   const isAutoSubmittingRef = useRef(false);
 
   // Handle auto-submit when OTP is complete (after paste or last digit entry)
+  // Note: useAutoAuth already handles auto-submit from URL, this handles manual input/paste
   const handleOTPComplete = useCallback((completedValue: string) => {
-    // Prevent duplicate submissions
-    if (isAutoSubmittingRef.current || isLoading) return;
+    // Prevent duplicate submissions - check local ref, isLoading, and URL auto-submit ref
+    if (isAutoSubmittingRef.current || isLoading || isAutoSubmittingFromUrl.current) return;
 
     if (completedValue.length === 6) {
       isAutoSubmittingRef.current = true;
@@ -41,13 +43,17 @@ export const OTPForm: React.FC = () => {
         preventDefault: () => {},
       } as React.FormEvent;
 
-      // Small delay to ensure state is updated
-      setTimeout(() => {
-        handleOTPSubmit(fakeEvent);
-        isAutoSubmittingRef.current = false;
+      // Small delay to ensure state is updated, then submit
+      // Reset ref after submit completes (isLoading will handle preventing re-submits)
+      setTimeout(async () => {
+        try {
+          await handleOTPSubmit(fakeEvent);
+        } finally {
+          isAutoSubmittingRef.current = false;
+        }
       }, 100);
     }
-  }, [handleOTPSubmit, isLoading]);
+  }, [handleOTPSubmit, isLoading, isAutoSubmittingFromUrl]);
 
   const getChannelIcon = () => {
     return channel === 'phone' ? (
@@ -98,7 +104,7 @@ export const OTPForm: React.FC = () => {
                 onComplete={handleOTPComplete}
                 disabled={isLoading}
                 autoFocus={true}
-                autoSubmit={true}
+                autoSubmit={false}
                 size="lg"
               />
             </div>
@@ -114,20 +120,13 @@ export const OTPForm: React.FC = () => {
           <div className="space-y-4">
             <Button
               type="submit"
-              className="w-full h-11 text-base font-medium"
-              disabled={isLoading || otp.length < 6}
+              size="lg"
+              className="w-full"
+              disabled={otp.length < 6}
+              loading={isLoading}
             >
-              {isLoading ? (
-                <div className="flex items-center gap-2">
-                  <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
-                  Verifying...
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <ShieldCheck className="w-5 h-5" />
-                  Verify Code
-                </div>
-              )}
+              <ShieldCheck className="w-5 h-5" />
+              Verify Code
             </Button>
 
             <div className="flex gap-3">
@@ -136,12 +135,10 @@ export const OTPForm: React.FC = () => {
                 variant="outline"
                 onClick={handleBackToIdentifier}
                 disabled={isLoading}
-                className="flex-1 h-10"
+                className="flex-1"
               >
-                <div className="flex items-center gap-2">
-                  <ArrowLeft className="w-4 h-4" />
-                  Back
-                </div>
+                <ArrowLeft className="w-4 h-4" />
+                Back
               </Button>
 
               <Button
@@ -149,12 +146,10 @@ export const OTPForm: React.FC = () => {
                 variant="outline"
                 onClick={handleResendOTP}
                 disabled={isLoading}
-                className="flex-1 h-10"
+                className="flex-1"
               >
-                <div className="flex items-center gap-2">
-                  <RotateCw className="w-4 h-4" />
-                  Resend
-                </div>
+                <RotateCw className="w-4 h-4" />
+                Resend
               </Button>
             </div>
           </div>

package/src/layouts/AuthLayout/components/TwoFactorForm.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import { KeyRound, Loader2, ShieldCheck } from 'lucide-react';
+import React from 'react';
+
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  OTPInput,
+  Input,
+} from '@djangocfg/ui-nextjs/components';
+
+import { useAuthFormContext } from '../context';
+
+/**
+ * Two-Factor Authentication Form
+ *
+ * Displays TOTP code input or backup code input based on user selection.
+ * Used after OTP/OAuth verification when user has 2FA enabled.
+ */
+export const TwoFactorForm: React.FC = () => {
+  const {
+    twoFactorCode,
+    useBackupCode,
+    error,
+    is2FALoading,
+    twoFactorWarning,
+    setTwoFactorCode,
+    handle2FASubmit,
+    handleUseBackupCode,
+    handleUseTOTP,
+  } = useAuthFormContext();
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="space-y-1 text-center">
+        <div className="mx-auto w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-2">
+          <ShieldCheck className="w-6 h-6 text-primary" />
+        </div>
+        <CardTitle className="text-2xl">Two-Factor Authentication</CardTitle>
+        <CardDescription>
+          {useBackupCode
+            ? 'Enter one of your backup recovery codes'
+            : 'Enter the 6-digit code from your authenticator app'}
+        </CardDescription>
+      </CardHeader>
+
+      <form onSubmit={handle2FASubmit}>
+        <CardContent className="space-y-4">
+          {/* Error Alert */}
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Warning Alert (e.g., low backup codes) */}
+          {twoFactorWarning && (
+            <Alert>
+              <AlertDescription>{twoFactorWarning}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* TOTP Code Input */}
+          {!useBackupCode && (
+            <div className="flex justify-center">
+              <OTPInput
+                length={6}
+                validationMode="numeric"
+                pasteBehavior="clean"
+                value={twoFactorCode}
+                onChange={setTwoFactorCode}
+                disabled={is2FALoading}
+                autoFocus={true}
+                size="lg"
+              />
+            </div>
+          )}
+
+          {/* Backup Code Input */}
+          {useBackupCode && (
+            <div className="space-y-2">
+              <Input
+                type="text"
+                placeholder="Enter backup code"
+                value={twoFactorCode}
+                onChange={(e) => setTwoFactorCode(e.target.value.toUpperCase())}
+                disabled={is2FALoading}
+                className="text-center font-mono text-lg tracking-widest"
+                maxLength={12}
+                autoComplete="off"
+              />
+              <p className="text-xs text-muted-foreground text-center">
+                Backup codes are 8 characters, letters and numbers
+              </p>
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter className="flex flex-col space-y-3">
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={is2FALoading || (!useBackupCode && twoFactorCode.length !== 6)}
+          >
+            {is2FALoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Verifying...
+              </>
+            ) : (
+              'Verify'
+            )}
+          </Button>
+
+          {/* Toggle between TOTP and Backup Code */}
+          <Button
+            type="button"
+            variant="ghost"
+            className="w-full text-sm"
+            onClick={useBackupCode ? handleUseTOTP : handleUseBackupCode}
+            disabled={is2FALoading}
+          >
+            <KeyRound className="mr-2 h-4 w-4" />
+            {useBackupCode
+              ? 'Use authenticator app instead'
+              : "Can't access your authenticator? Use a backup code"}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+};