@djangocfg/layouts 2.1.57 → 2.1.59

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

@@ -0,0 +1,286 @@
+'use client';
+
+import { CheckCircle, Copy, Eye, EyeOff, Loader2, ShieldCheck } from 'lucide-react';
+import React, { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+import { useTwoFactorSetup } from '@djangocfg/api/auth';
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  OTPInput,
+} from '@djangocfg/ui-nextjs/components';
+
+export interface TwoFactorSetupProps {
+  /** Callback when setup is complete */
+  onComplete?: (backupCodes: string[]) => void;
+  /** Callback to skip setup */
+  onSkip?: () => void;
+  /** Callback on error */
+  onError?: (error: string) => void;
+  /** Device name for the authenticator */
+  deviceName?: string;
+}
+
+/**
+ * Two-Factor Authentication Setup Component
+ *
+ * Guides user through enabling 2FA:
+ * 1. Shows QR code to scan with authenticator app
+ * 2. User enters code to confirm
+ * 3. Shows backup codes to save
+ */
+export const TwoFactorSetup: React.FC<TwoFactorSetupProps> = ({
+  onComplete,
+  onSkip,
+  onError,
+  deviceName,
+}) => {
+  const [confirmCode, setConfirmCode] = useState('');
+  const [showSecret, setShowSecret] = useState(false);
+  const [copiedSecret, setCopiedSecret] = useState(false);
+  const [copiedBackupCodes, setCopiedBackupCodes] = useState(false);
+
+  const {
+    isLoading,
+    error,
+    setupData,
+    backupCodes,
+    backupCodesWarning,
+    setupStep,
+    startSetup,
+    confirmSetup,
+    resetSetup,
+  } = useTwoFactorSetup({
+    onComplete,
+    onError,
+  });
+
+  // Start setup on mount if not already started
+  React.useEffect(() => {
+    if (setupStep === 'idle') {
+      startSetup(deviceName);
+    }
+  }, [setupStep, startSetup, deviceName]);
+
+  const handleConfirm = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await confirmSetup(confirmCode);
+  };
+
+  const copySecret = async () => {
+    if (setupData?.secret) {
+      await navigator.clipboard.writeText(setupData.secret);
+      setCopiedSecret(true);
+      setTimeout(() => setCopiedSecret(false), 2000);
+    }
+  };
+
+  const copyBackupCodes = async () => {
+    if (backupCodes) {
+      await navigator.clipboard.writeText(backupCodes.join('\n'));
+      setCopiedBackupCodes(true);
+      setTimeout(() => setCopiedBackupCodes(false), 2000);
+    }
+  };
+
+  // Loading state
+  if (isLoading && !setupData) {
+    return (
+      <Card className="w-full max-w-md mx-auto">
+        <CardContent className="flex items-center justify-center py-12">
+          <Loader2 className="w-8 h-8 animate-spin text-primary" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Complete - show backup codes
+  if (setupStep === 'complete' && backupCodes) {
+    return (
+      <Card className="w-full max-w-md mx-auto">
+        <CardHeader className="space-y-1 text-center">
+          <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-2">
+            <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
+          </div>
+          <CardTitle className="text-2xl">2FA Enabled!</CardTitle>
+          <CardDescription>
+            Save these backup codes in a secure place
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          {backupCodesWarning && (
+            <Alert>
+              <AlertDescription>{backupCodesWarning}</AlertDescription>
+            </Alert>
+          )}
+
+          <div className="bg-muted rounded-lg p-4">
+            <div className="grid grid-cols-2 gap-2 font-mono text-sm">
+              {backupCodes.map((code, index) => (
+                <div key={index} className="text-center py-1">
+                  {code}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground text-center">
+            Each code can only be used once. Store them securely.
+          </p>
+        </CardContent>
+
+        <CardFooter className="flex flex-col space-y-3">
+          <Button
+            type="button"
+            variant="outline"
+            className="w-full"
+            onClick={copyBackupCodes}
+          >
+            <Copy className="mr-2 h-4 w-4" />
+            {copiedBackupCodes ? 'Copied!' : 'Copy all codes'}
+          </Button>
+
+          <Button
+            type="button"
+            className="w-full"
+            onClick={() => onComplete?.(backupCodes)}
+          >
+            I've saved my backup codes
+          </Button>
+        </CardFooter>
+      </Card>
+    );
+  }
+
+  // Scanning/Confirming - show QR code
+  return (
+    <Card className="w-full max-w-md mx-auto">
+      <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">Set Up 2FA</CardTitle>
+        <CardDescription>
+          Scan this QR code with your authenticator app
+        </CardDescription>
+      </CardHeader>
+
+      <form onSubmit={handleConfirm}>
+        <CardContent className="space-y-6">
+          {error && (
+            <Alert variant="destructive">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* QR Code */}
+          {setupData && (
+            <div className="flex justify-center">
+              <div className="bg-white p-4 rounded-lg">
+                <QRCodeSVG
+                  value={setupData.provisioningUri}
+                  size={200}
+                  level="M"
+                  marginSize={0}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Manual entry option */}
+          {setupData && (
+            <div className="space-y-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="w-full text-xs"
+                onClick={() => setShowSecret(!showSecret)}
+              >
+                {showSecret ? (
+                  <EyeOff className="mr-2 h-3 w-3" />
+                ) : (
+                  <Eye className="mr-2 h-3 w-3" />
+                )}
+                {showSecret ? 'Hide' : 'Show'} manual entry code
+              </Button>
+
+              {showSecret && (
+                <div className="flex items-center gap-2 bg-muted rounded-lg p-3">
+                  <code className="flex-1 text-xs font-mono break-all">
+                    {setupData.secret}
+                  </code>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={copySecret}
+                  >
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Confirm code input */}
+          <div className="space-y-2">
+            <p className="text-sm text-center text-muted-foreground">
+              Enter the 6-digit code from your app to confirm
+            </p>
+            <div className="flex justify-center">
+              <OTPInput
+                length={6}
+                validationMode="numeric"
+                pasteBehavior="clean"
+                value={confirmCode}
+                onChange={setConfirmCode}
+                disabled={isLoading}
+                autoFocus={true}
+                size="lg"
+              />
+            </div>
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex flex-col space-y-3">
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={isLoading || confirmCode.length !== 6}
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Verifying...
+              </>
+            ) : (
+              'Confirm & Enable 2FA'
+            )}
+          </Button>
+
+          {onSkip && (
+            <Button
+              type="button"
+              variant="ghost"
+              className="w-full"
+              onClick={onSkip}
+              disabled={isLoading}
+            >
+              Skip for now
+            </Button>
+          )}
+        </CardFooter>
+      </form>
+    </Card>
+  );
+};

package/src/layouts/AuthLayout/components/index.ts

@@ -0,0 +1,7 @@
+export { IdentifierForm } from './IdentifierForm';
+export { OTPForm } from './OTPForm';
+export { AuthHelp } from './AuthHelp';
+export { OAuthProviders, OAuthCallback, type OAuthCallbackProps } from './oauth';
+export { TwoFactorForm } from './TwoFactorForm';
+export { TwoFactorSetup, type TwoFactorSetupProps } from './TwoFactorSetup';
+export { AuthSuccess, type AuthSuccessProps } from './AuthSuccess';

package/src/layouts/AuthLayout/{OAuthCallback.tsx → components/oauth/OAuthCallback.tsx}

@@ -1,6 +1,6 @@
 'use client';
 
-import { AlertCircle, CheckCircle, Loader2 } from 'lucide-react';
+import { AlertCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
@@ -9,13 +9,15 @@ import {
     Card, CardContent, CardDescription, CardHeader, CardTitle
 } from '@djangocfg/ui-nextjs/components';
 
+import { useAuthFormContext } from '../../context';
+
 export interface OAuthCallbackProps {
   onSuccess?: (user: any, isNewUser: boolean, provider: string) => void;
   onError?: (error: string) => void;
   redirectUrl?: string;
 }
 
-type CallbackStatus = 'processing' | 'success' | 'error';
+type CallbackStatus = 'processing' | 'error';
 
 /**
  * OAuth Callback Handler Component
@@ -52,6 +54,7 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
   redirectUrl,
 }) => {
   const searchParams = useSearchParams();
+  const { setStep, setTwoFactorSessionId, setShouldPrompt2FA } = useAuthFormContext();
   const [status, setStatus] = useState<CallbackStatus | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
@@ -67,7 +70,8 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
     error: githubError,
   } = useGithubAuth({
     onSuccess: (user, isNewUser) => {
-      setStatus('success');
+      // Show success screen with logo instead of redirecting
+      setStep('success');
       onSuccess?.(user, isNewUser, 'github');
     },
     onError: (err) => {
@@ -75,7 +79,14 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
       setErrorMessage(err);
       onError?.(err);
     },
+    onRequires2FA: (sessionId, shouldPrompt) => {
+      // Handle 2FA requirement
+      setTwoFactorSessionId(sessionId);
+      setShouldPrompt2FA(shouldPrompt);
+      setStep('2fa');
+    },
     redirectUrl,
+    skipRedirect: true, // We handle navigation via success screen
   });
 
   // Process OAuth callback on mount
@@ -116,6 +127,8 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
     return null;
   }
 
+  // Only show UI for processing or error states
+  // Success state is handled by AuthSuccess component via setStep('success')
   return (
     <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
       <Card className="w-full max-w-md mx-4 shadow-lg">
@@ -132,18 +145,6 @@ export const OAuthCallback: React.FC<OAuthCallbackProps> = ({
             </>
           )}
 
-          {status === 'success' && (
-            <>
-              <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center mb-4">
-                <CheckCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
-              </div>
-              <CardTitle>Success!</CardTitle>
-              <CardDescription>
-                You have been signed in successfully. Redirecting...
-              </CardDescription>
-            </>
-          )}
-
           {status === 'error' && (
             <>
               <div className="mx-auto w-12 h-12 bg-destructive/10 rounded-full flex items-center justify-center mb-4">

package/src/layouts/AuthLayout/components/oauth/OAuthProviders.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Github } from 'lucide-react';
+import React from 'react';
+
+import { useGithubAuth } from '@djangocfg/api/auth';
+import { Button } from '@djangocfg/ui-nextjs/components';
+
+import { useAuthFormContext } from '../../context';
+
+/**
+ * OAuth Providers Component
+ *
+ * Shows OAuth login buttons (GitHub, etc.) when enabled.
+ */
+export const OAuthProviders: React.FC = () => {
+  const { enableGithubAuth, sourceUrl, setError } = useAuthFormContext();
+
+  const { isLoading, startGithubAuth } = useGithubAuth({
+    sourceUrl,
+    onError: setError,
+  });
+
+  if (!enableGithubAuth) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-border" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-card px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+
+      {/* OAuth Buttons */}
+      <Button
+        type="button"
+        variant="outline"
+        size="lg"
+        className="w-full"
+        onClick={startGithubAuth}
+        loading={isLoading}
+      >
+        <Github className="w-5 h-5" />
+        Continue with GitHub
+      </Button>
+    </div>
+  );
+};

package/src/layouts/AuthLayout/components/oauth/index.ts

@@ -0,0 +1,2 @@
+export { OAuthProviders } from './OAuthProviders';
+export { OAuthCallback, type OAuthCallbackProps } from './OAuthCallback';

package/src/layouts/AuthLayout/{AuthContext.tsx → context.tsx}

@@ -4,19 +4,20 @@ import React, { createContext, useContext } from 'react';
 
 import { useAuthForm } from '@djangocfg/api/auth';
 
-import type { AuthContextType, AuthProps } from './types';
+import type { AuthFormContextType, AuthLayoutProps } from './types';
 
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
+const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
 
-export const AuthProvider: React.FC<AuthProps> = ({
+export const AuthFormProvider: React.FC<AuthLayoutProps> = ({
   children,
   sourceUrl: sourceUrlProp,
   supportUrl,
   termsUrl,
   privacyUrl,
-  enablePhoneAuth = false, // Default to false for backward compatibility
-  enableGithubAuth = false, // Default to false for backward compatibility
-  redirectUrl, // URL to redirect after successful OTP auth
+  enablePhoneAuth = false,
+  enableGithubAuth = false,
+  logoUrl,
+  redirectUrl,
   onIdentifierSuccess,
   onOTPSuccess,
   onError,
@@ -26,7 +27,7 @@ export const AuthProvider: React.FC<AuthProps> = ({
   // Require terms acceptance only if terms or privacy URL is provided
   const requireTermsAcceptance = Boolean(termsUrl || privacyUrl);
 
-  // Use the auth form hook with required sourceUrl and redirectUrl
+  // Use the auth form hook
   const authForm = useAuthForm({
     onIdentifierSuccess,
     onOTPSuccess,
@@ -36,10 +37,8 @@ export const AuthProvider: React.FC<AuthProps> = ({
     requireTermsAcceptance,
   });
 
-  const value: AuthContextType = {
-    // Form state from auth form hook
+  const value: AuthFormContextType = {
     ...authForm,
-
     // UI-specific configuration
     sourceUrl,
     supportUrl,
@@ -47,16 +46,17 @@ export const AuthProvider: React.FC<AuthProps> = ({
     privacyUrl,
     enablePhoneAuth,
     enableGithubAuth,
+    logoUrl,
+    redirectUrl,
   };
 
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+  return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
 };
 
-export const useAuthContext = () => {
-  const context = useContext(AuthContext);
+export const useAuthFormContext = (): AuthFormContextType => {
+  const context = useContext(AuthFormContext);
   if (context === undefined) {
-    throw new Error('useAuthContext must be used within an AuthProvider');
+    throw new Error('useAuthFormContext must be used within an AuthFormProvider');
   }
   return context;
 };
-

package/src/layouts/AuthLayout/index.ts

@@ -2,27 +2,29 @@
  * Auth Layout exports
  */
 
+// Main layout
 export { AuthLayout } from './AuthLayout';
 export type { AuthLayoutProps } from './AuthLayout';
 
-// Context and hooks (renamed to avoid conflict with main AuthProvider)
-export { AuthProvider as AuthLayoutProvider, useAuthContext } from './AuthContext';
+// Context and hooks
+export { AuthFormProvider, useAuthFormContext } from './context';
 
-// Forms
-export { IdentifierForm } from './IdentifierForm';
-export { OTPForm } from './OTPForm';
+// Components
+export {
+  IdentifierForm,
+  OTPForm,
+  AuthHelp,
+  OAuthProviders,
+  OAuthCallback,
+  type OAuthCallbackProps,
+} from './components';
 
-// OAuth
-export { OAuthProviders } from './OAuthProviders';
-export { OAuthCallback, type OAuthCallbackProps } from './OAuthCallback';
-
-// Help component
-export { AuthHelp } from './AuthHelp';
-
-// Types (renamed to avoid conflict with main AuthContextType)
-export type { 
-  AuthContextType as AuthLayoutContextType, 
-  AuthProps as AuthLayoutFormProps, 
-  AuthHelpProps 
+// Types (re-exported from @djangocfg/api/auth)
+export type {
+  AuthChannel,
+  AuthStep,
+  AuthFormState,
+  AuthFormContextType,
+  AuthLayoutConfig,
+  AuthHelpProps,
 } from './types';
-

package/src/layouts/AuthLayout/types.ts

@@ -1,66 +1,22 @@
-import React from 'react';
-
-// Auth Context Types - Multi-channel support
-export interface AuthContextType {
-  // Form state
-  identifier: string; // Email or phone number
-  channel: 'email' | 'phone';
-  otp: string;
-  isLoading: boolean;
-  acceptedTerms: boolean;
-
-  // Auth state
-  step: 'identifier' | 'otp';
-  error: string;
-
-  // Support configuration
-  supportUrl?: string;
-  termsUrl?: string;
-  privacyUrl?: string;
-  sourceUrl: string;
-  enablePhoneAuth?: boolean;
-  enableGithubAuth?: boolean;
-
-  // Form handlers
-  setIdentifier: (identifier: string) => void;
-  setChannel: (channel: 'email' | 'phone') => void;
-  setOtp: (otp: string) => void;
-  setAcceptedTerms: (accepted: boolean) => void;
-  setError: (error: string) => void;
-  clearError: () => void;
-
-  // Auth handlers
-  handleIdentifierSubmit: (e: React.FormEvent) => Promise<void>;
-  handleOTPSubmit: (e: React.FormEvent) => Promise<void>;
-  handleResendOTP: () => Promise<void>;
-  handleBackToIdentifier: () => void;
-  forceOTPStep: () => void;
-
-  // Utility methods
-  detectChannelFromIdentifier: (identifier: string) => 'email' | 'phone' | null;
-  validateIdentifier: (identifier: string, channel?: 'email' | 'phone') => boolean;
-}
-
-// Unified Auth Props - used by both AuthProvider and AuthLayout
-export interface AuthProps {
-  children?: React.ReactNode;
-  sourceUrl?: string;
-  supportUrl?: string;
-  termsUrl?: string;
-  privacyUrl?: string;
-  className?: string;
-  enablePhoneAuth?: boolean; // Controls whether phone authentication is available
-  enableGithubAuth?: boolean; // Controls whether GitHub OAuth is available
-  redirectUrl?: string; // URL to redirect after successful auth (default: /dashboard)
-  onIdentifierSuccess?: (identifier: string, channel: 'email' | 'phone') => void;
-  onOTPSuccess?: () => void;
-  onOAuthSuccess?: (user: any, isNewUser: boolean, provider: string) => void;
-  onError?: (message: string) => void;
-}
-
-// Auth Help Types
-export interface AuthHelpProps {
-  className?: string;
-  variant?: 'default' | 'compact';
-}
-
+/**
+ * Auth Layout Types
+ *
+ * Re-exports from @djangocfg/api/auth for convenience.
+ * Single source of truth is in @djangocfg/api/auth/types.
+ */
+
+export type {
+  AuthChannel,
+  AuthStep,
+  AuthFormState,
+  AuthFormStateHandlers,
+  AuthFormSubmitHandlers,
+  AuthFormValidation,
+  AuthFormAutoSubmit,
+  AuthFormReturn,
+  UseAuthFormOptions,
+  AuthLayoutConfig,
+  AuthFormContextType,
+  AuthLayoutProps,
+  AuthHelpProps,
+} from '@djangocfg/api/auth';