@redacto.io/consent-sdk-react 3.4.0 → 4.0.0

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -14,8 +14,9 @@ import {
   clearApiCache,
   fetchConsentContent,
   fetchTTSAudioUrls,
+  initiateGuardianVerification,
   submitConsentEvent,
-  submitGuardianInfo,
+  verifyGuardianStatus,
 } from "./api";
 
 // Type imports
@@ -37,6 +38,9 @@ import { injectCheckboxStyles } from "./injectStyles";
 import { styles } from "./styles";
 import { useMediaQuery } from "./useMediaQuery";
 
+// Storage service for redirect flow
+import { clearConsentState, getConsentState, saveConsentState } from "./services/storage";
+
 // =============================================================================
 // SUB-COMPONENTS
 // =============================================================================
@@ -355,6 +359,13 @@ const PurposeItem: React.FC<
  *
  * Displays a form for collecting guardian information for minor consent.
  */
+const RELATIONSHIP_OPTIONS = [
+  { value: "Father", label: "Father" },
+  { value: "Mother", label: "Mother" },
+  { value: "Legal Guardian", label: "Legal Guardian" },
+  { value: "Grandparent", label: "Grandparent" },
+];
+
 const GuardianForm: React.FC<{
   formData: {
     guardianName: string;
@@ -390,39 +401,144 @@ const GuardianForm: React.FC<{
   declineButtonStyle,
   logoUrl,
 }) => {
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [openUpward, setOpenUpward] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const optionsRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown on outside click
+    useEffect(() => {
+      if (!isDropdownOpen) return;
+      const handleClickOutside = (e: MouseEvent) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+          setIsDropdownOpen(false);
+          setFocusedIndex(-1);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isDropdownOpen]);
+
+    // Determine direction on open
+    useEffect(() => {
+      if (!isDropdownOpen || !dropdownRef.current) return;
+      const rect = dropdownRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const dropdownHeight = 220; // approximate max height of options panel
+      setOpenUpward(spaceBelow < dropdownHeight && rect.top > dropdownHeight);
+    }, [isDropdownOpen]);
+
+    const handleSelect = (value: string) => {
+      onChange("guardianRelationship", value);
+      setIsDropdownOpen(false);
+      setFocusedIndex(-1);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (!isDropdownOpen) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault();
+          setIsDropdownOpen(true);
+          setFocusedIndex(0);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => Math.min(prev + 1, RELATIONSHIP_OPTIONS.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (focusedIndex >= 0) handleSelect(RELATIONSHIP_OPTIONS[focusedIndex].value);
+          break;
+        case "Escape":
+        case "Tab":
+          setIsDropdownOpen(false);
+          setFocusedIndex(-1);
+          break;
+      }
+    };
+
+    // Scroll focused option into view
+    useEffect(() => {
+      if (focusedIndex >= 0 && optionsRef.current) {
+        const option = optionsRef.current.children[focusedIndex] as HTMLElement;
+        option?.scrollIntoView?.({ block: "nearest" });
+      }
+    }, [focusedIndex]);
+
+    const borderColor = settings?.borderColor || "#d0d5dd";
+    const textColor = settings?.textColor || "#344054";
+    const bgColor = settings?.backgroundColor || "#ffffff";
+    const radius = settings?.borderRadius || "8px";
+    const font = settings?.font || "inherit";
+
     const inputStyle = {
       width: "100%",
       padding: "10px 12px",
-      border: `1px solid ${settings?.borderColor || "#d0d5dd"}`,
-      borderRadius: settings?.borderRadius || "8px",
+      border: `1px solid ${borderColor}`,
+      borderRadius: radius,
       fontSize: "13px",
-      fontFamily: settings?.font || "inherit",
-      color: settings?.textColor || "#344054",
-      backgroundColor: settings?.backgroundColor || "#ffffff",
-      marginBottom: "4px",
+      fontFamily: font,
+      color: textColor,
+      backgroundColor: bgColor,
+      marginBottom: "2px",
       boxSizing: "border-box" as const,
+      outline: "none",
     };
 
     const errorStyle = {
       color: "#DC2626",
-      fontSize: "12px",
+      fontSize: "11px",
       marginTop: "4px",
-      marginBottom: "16px",
+      marginBottom: "0px",
     };
 
     const labelStyle = {
       ...componentTextStyle,
       fontSize: "13px",
-      fontWeight: "500",
-      marginBottom: "6px",
+      fontWeight: "500" as const,
+      marginBottom: "4px",
       display: "block",
     };
 
+    const hintStyle = {
+      fontSize: "11px",
+      color: "#667085",
+      marginTop: "2px",
+      marginBottom: "0px",
+      lineHeight: "1.4",
+    };
+
+    const infoBannerStyle = {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "8px",
+      padding: "10px 12px",
+      backgroundColor: "#EFF6FF",
+      border: "1px solid #BFDBFE",
+      borderRadius: radius,
+      marginBottom: "16px",
+      fontSize: "12px",
+      lineHeight: "1.5",
+      color: "#1E40AF",
+    };
+
+    const selectedLabel = RELATIONSHIP_OPTIONS.find((o) => o.value === formData.guardianRelationship)?.label;
+    const hasError = Boolean(errors.guardianRelationship);
+
     return (
       <>
         <div style={{ ...styles.topSection, ...componentTextStyle }}>
           <div style={styles.topLeft}>
-            <img style={styles.logo} src={logoUrl} alt="Redacto Logo" />
+            <img style={styles.logo} src={logoUrl} alt="Logo" />
             <h2
               id="guardian-form-title"
               style={{
@@ -433,7 +549,7 @@ const GuardianForm: React.FC<{
                 fontWeight: 600,
               }}
             >
-              Guardian Information Required
+              Guardian Verification
             </h2>
           </div>
         </div>
@@ -450,28 +566,46 @@ const GuardianForm: React.FC<{
               ...styles.privacyText,
               ...responsiveStyles.privacyText,
               ...componentTextStyle,
-              fontSize: "14px",
-              lineHeight: "1.4",
+              fontSize: "13px",
+              lineHeight: "1.5",
+              marginBottom: "12px",
             }}
           >
-            As you are under the age of consent, we need to collect information
-            about your legal guardian to proceed.
+            Since you are under the age of consent, a legal guardian must verify
+            their identity via DigiLocker before you can proceed.
           </p>
 
+          <div style={infoBannerStyle}>
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#2563EB"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              style={{ flexShrink: 0, marginTop: "1px" }}
+            >
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="16" x2="12" y2="12" />
+              <line x1="12" y1="8" x2="12.01" y2="8" />
+            </svg>
+            <span>
+              The guardian's name will be matched against their DigiLocker identity document (e.g. Aadhaar). Please enter the name exactly as it appears on the document.
+            </span>
+          </div>
+
           <div
             style={{
               display: "flex",
               flexDirection: "column",
-              gap: "12px",
-              marginTop: "16px",
+              gap: "14px",
             }}
           >
             <div>
-              <label
-                htmlFor="guardianName"
-                style={{ ...labelStyle, marginBottom: "8px", display: "block" }}
-              >
-                Name of Guardian *
+              <label htmlFor="guardianName" style={labelStyle}>
+                Guardian's Full Name <span style={{ color: "#DC2626" }}>*</span>
               </label>
               <input
                 id="guardianName"
@@ -480,64 +614,171 @@ const GuardianForm: React.FC<{
                 onChange={(e) => onChange("guardianName", e.target.value)}
                 style={{
                   ...inputStyle,
-                  borderColor: errors.guardianName
-                    ? "#DC2626"
-                    : inputStyle.border,
+                  borderColor: errors.guardianName ? "#DC2626" : borderColor,
                 }}
-                placeholder="Enter guardian's full name"
+                placeholder="e.g. Rajesh Kumar"
+                autoComplete="name"
+                aria-describedby="guardianName-hint"
               />
+              <p id="guardianName-hint" style={hintStyle}>
+                Enter the full name as per government ID (Aadhaar, PAN, etc.)
+              </p>
               {errors.guardianName && (
-                <div style={errorStyle}>{errors.guardianName}</div>
+                <div style={errorStyle} role="alert">{errors.guardianName}</div>
               )}
             </div>
 
             <div>
-              <label
-                htmlFor="guardianContact"
-                style={{ ...labelStyle, marginBottom: "8px", display: "block" }}
-              >
-                Contact of Guardian *
+              <label htmlFor="guardianContact" style={labelStyle}>
+                Guardian's Phone Number <span style={{ color: "#DC2626" }}>*</span>
               </label>
               <input
                 id="guardianContact"
-                type="text"
+                type="tel"
+                inputMode="tel"
                 value={formData.guardianContact}
                 onChange={(e) => onChange("guardianContact", e.target.value)}
                 style={{
                   ...inputStyle,
-                  borderColor: errors.guardianContact
-                    ? "#DC2626"
-                    : inputStyle.border,
+                  borderColor: errors.guardianContact ? "#DC2626" : borderColor,
                 }}
-                placeholder="Enter guardian's email or phone number"
+                placeholder="e.g. 9876543210"
+                autoComplete="tel"
+                aria-describedby="guardianContact-hint"
               />
+              <p id="guardianContact-hint" style={hintStyle}>
+                Mobile number linked to guardian's Aadhaar
+              </p>
               {errors.guardianContact && (
-                <div style={errorStyle}>{errors.guardianContact}</div>
+                <div style={errorStyle} role="alert">{errors.guardianContact}</div>
               )}
             </div>
 
-            <div>
-              <label
-                htmlFor="guardianRelationship"
-                style={{ ...labelStyle, marginBottom: "8px", display: "block" }}
-              >
-                Relationship to Guardian *
+            <div ref={dropdownRef} style={{ position: "relative" }}>
+              <label id="guardianRelationship-label" style={labelStyle}>
+                Relationship <span style={{ color: "#DC2626" }}>*</span>
               </label>
-              <input
-                id="guardianRelationship"
-                type="text"
-                value={formData.guardianRelationship}
-                onChange={(e) => onChange("guardianRelationship", e.target.value)}
+              <div
+                role="combobox"
+                aria-expanded={isDropdownOpen}
+                aria-haspopup="listbox"
+                aria-labelledby="guardianRelationship-label"
+                aria-controls="guardianRelationship-listbox"
+                aria-activedescendant={focusedIndex >= 0 ? `guardianRelationship-option-${focusedIndex}` : undefined}
+                tabIndex={0}
+                onClick={() => { setIsDropdownOpen((prev) => !prev); setFocusedIndex(-1); }}
+                onKeyDown={handleKeyDown}
                 style={{
                   ...inputStyle,
-                  borderColor: errors.guardianRelationship
-                    ? "#DC2626"
-                    : inputStyle.border,
+                  borderColor: hasError ? "#DC2626" : isDropdownOpen ? (settings?.button?.accept?.backgroundColor || "#3b82f6") : borderColor,
+                  boxShadow: isDropdownOpen ? `0 0 0 1px ${settings?.button?.accept?.backgroundColor || "#3b82f6"}` : "none",
+                  color: selectedLabel ? textColor : "#9CA3AF",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  userSelect: "none",
+                  transition: "border-color 0.15s, box-shadow 0.15s",
                 }}
-                placeholder="e.g., Parent, Legal Guardian, etc."
-              />
+              >
+                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                  {selectedLabel || "Select relationship"}
+                </span>
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="#667085"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{
+                    flexShrink: 0,
+                    marginLeft: "8px",
+                    transform: isDropdownOpen ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.2s",
+                  }}
+                >
+                  <polyline points="6 9 12 15 18 9" />
+                </svg>
+              </div>
+
+              {isDropdownOpen && (
+                <div
+                  ref={optionsRef}
+                  id="guardianRelationship-listbox"
+                  role="listbox"
+                  aria-labelledby="guardianRelationship-label"
+                  style={{
+                    position: "absolute",
+                    ...(openUpward
+                      ? { bottom: "calc(100% + 4px)" }
+                      : { top: "calc(100% + 4px)" }),
+                    left: 0,
+                    right: 0,
+                    backgroundColor: bgColor,
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: radius,
+                    boxShadow: openUpward
+                      ? "0 -4px 12px rgba(0, 0, 0, 0.1), 0 -1px 3px rgba(0, 0, 0, 0.06)"
+                      : "0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06)",
+                    zIndex: 50,
+                    overflow: "hidden",
+                    padding: "4px 0",
+                    maxHeight: "220px",
+                    overflowY: "auto",
+                  }}
+                >
+                  {RELATIONSHIP_OPTIONS.map((option, index) => {
+                    const isSelected = formData.guardianRelationship === option.value;
+                    const isFocused = focusedIndex === index;
+                    const accentColor = settings?.button?.accept?.backgroundColor || "#3b82f6";
+                    return (
+                      <div
+                        key={option.value}
+                        id={`guardianRelationship-option-${index}`}
+                        role="option"
+                        aria-selected={isSelected}
+                        onClick={() => handleSelect(option.value)}
+                        onMouseEnter={() => setFocusedIndex(index)}
+                        style={{
+                          padding: "9px 12px",
+                          fontSize: "13px",
+                          fontFamily: font,
+                          color: isSelected ? accentColor : textColor,
+                          backgroundColor: isFocused ? "#F3F4F6" : "transparent",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          transition: "background-color 0.1s",
+                        }}
+                      >
+                        <span>{option.label}</span>
+                        {isSelected && (
+                          <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke={accentColor}
+                            strokeWidth="2.5"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            style={{ flexShrink: 0 }}
+                          >
+                            <polyline points="20 6 9 17 4 12" />
+                          </svg>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
               {errors.guardianRelationship && (
-                <div style={errorStyle}>{errors.guardianRelationship}</div>
+                <div style={errorStyle} role="alert">{errors.guardianRelationship}</div>
               )}
             </div>
           </div>
@@ -547,7 +788,7 @@ const GuardianForm: React.FC<{
               role="alert"
               style={{
                 color: "#DC2626",
-                fontSize: "14px",
+                fontSize: "13px",
                 marginTop: "16px",
                 padding: "12px",
                 borderRadius: "6px",
@@ -581,11 +822,11 @@ const GuardianForm: React.FC<{
             type="button"
             aria-label={
               isSubmitting
-                ? "Submitting guardian information"
-                : "Submit guardian information and proceed"
+                ? "Verifying guardian identity"
+                : "Proceed to guardian verification"
             }
           >
-            {isSubmitting ? "Submitting..." : "Next"}
+            {isSubmitting ? "Verifying..." : "Verify via DigiLocker"}
           </button>
           <button
             style={{
@@ -596,7 +837,7 @@ const GuardianForm: React.FC<{
             }}
             onClick={onDecline}
             type="button"
-            aria-label="Cancel guardian information form"
+            aria-label="Cancel"
           >
             Cancel
           </button>
@@ -605,6 +846,292 @@ const GuardianForm: React.FC<{
     );
   };
 
+/**
+ * VerificationScreen Component
+ *
+ * Displays verification status while DigiLocker verification is in progress.
+ * No longer requires document type selection - handled by backend.
+ */
+const VerificationScreen: React.FC<{
+  onBack: (clearName?: boolean) => void;
+  onContinue: () => void;
+  isInitiating: boolean;
+  isPolling: boolean;
+  isVerificationComplete: boolean;
+  isAutoTransitioning: boolean;
+  error: string | null;
+  errorCode: string | null;
+  canRetry: boolean;
+  styles: any;
+  responsiveStyles: any;
+  settings?: any;
+  componentHeadingStyle: any;
+  componentTextStyle: any;
+  acceptButtonStyle: any;
+  declineButtonStyle: any;
+  logoUrl: string;
+}> = ({
+  onBack,
+  onContinue,
+  isInitiating,
+  isPolling,
+  isVerificationComplete,
+  isAutoTransitioning,
+  error,
+  errorCode,
+  canRetry,
+  styles,
+  responsiveStyles,
+  settings,
+  componentHeadingStyle,
+  componentTextStyle,
+  acceptButtonStyle,
+  declineButtonStyle,
+  logoUrl,
+}) => {
+  const errorStyle = {
+    color: "#DC2626",
+    fontSize: "14px",
+    marginTop: "16px",
+    padding: "12px",
+    borderRadius: "6px",
+    border: "1px solid #FCA5A5",
+    backgroundColor: "#FEF2F2",
+    textAlign: "center" as const,
+  };
+
+  const statusStyle = {
+    color: "#059669",
+    fontSize: "14px",
+    marginTop: "16px",
+    padding: "12px",
+    borderRadius: "6px",
+    border: "1px solid #A7F3D0",
+    backgroundColor: "#D1FAE5",
+    textAlign: "center" as const,
+  };
+
+  const spinnerStyle = {
+    width: "48px",
+    height: "48px",
+    border: "4px solid #e5e7eb",
+    borderTopColor: settings?.button?.accept?.backgroundColor || "#3b82f6",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite",
+    margin: "24px auto",
+  };
+
+  return (
+    <>
+      <div style={{ ...styles.topSection, ...componentTextStyle }}>
+        <div style={styles.topLeft}>
+          <img style={styles.logo} src={logoUrl} alt="Logo" />
+          <h2
+            id="verification-title"
+            style={{
+              ...styles.title,
+              ...responsiveStyles.title,
+              ...componentHeadingStyle,
+              fontSize: "16px",
+              fontWeight: 600,
+            }}
+          >
+            Guardian Verification
+          </h2>
+        </div>
+      </div>
+
+      <div
+        style={{
+          ...styles.middleSection,
+          ...responsiveStyles.middleSection,
+          ...componentTextStyle,
+          textAlign: "center" as const,
+        }}
+      >
+        {isVerificationComplete && !error ? (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              flex: 1,
+            }}
+          >
+            <div
+              style={{
+                width: "64px",
+                height: "64px",
+                borderRadius: "50%",
+                backgroundColor: "#D1FAE5",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <svg
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#059669"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+            <p
+              style={{
+                ...componentHeadingStyle,
+                fontSize: "16px",
+                fontWeight: 600,
+                lineHeight: "1.5",
+                marginTop: "12px",
+                marginBottom: "24px",
+              }}
+            >
+              Verification Completed
+            </p>
+          </div>
+        ) : (isInitiating || isPolling) && !error ? (
+          <>
+            <div style={spinnerStyle} />
+            <div style={statusStyle}>
+              {isInitiating
+                ? "Opening DigiLocker in a new tab..."
+                : "Please complete the verification in the DigiLocker tab. This page will update automatically when verification is complete."}
+            </div>
+          </>
+        ) : null}
+
+        {error && (
+          <>
+            <div
+              style={{
+                width: "64px",
+                height: "64px",
+                borderRadius: "50%",
+                backgroundColor: "#fee2e2",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                margin: "24px auto",
+              }}
+            >
+              <svg
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#dc2626"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </div>
+            <p
+              style={{
+                ...styles.privacyText,
+                ...responsiveStyles.privacyText,
+                ...componentTextStyle,
+                fontSize: "14px",
+                lineHeight: "1.5",
+                marginBottom: "12px",
+              }}
+            >
+              Verification failed
+            </p>
+            <div style={errorStyle}>{error}</div>
+          </>
+        )}
+      </div>
+
+      {isAutoTransitioning ? null : (
+      <div
+        style={{
+          ...styles.bottomSection,
+          ...responsiveStyles.bottomSection,
+          ...componentTextStyle,
+          paddingTop: "12px",
+          display: "flex",
+          gap: "12px",
+          justifyContent: "center",
+        }}
+      >
+        {isVerificationComplete && !error ? (
+          <button
+            style={{
+              ...styles.button,
+              ...responsiveStyles.button,
+              ...acceptButtonStyle,
+            }}
+            onClick={onContinue}
+            type="button"
+            aria-label="Continue to consent form"
+          >
+            Continue
+          </button>
+        ) : error && canRetry ? (
+          <button
+            style={{
+              ...styles.button,
+              ...responsiveStyles.button,
+              ...styles.acceptButton,
+              ...acceptButtonStyle,
+            }}
+            onClick={() => onBack(errorCode === "GUARDIAN_UNDER_18")}
+            type="button"
+            aria-label={
+              errorCode === "GUARDIAN_UNDER_18"
+                ? "Change guardian details"
+                : "Try verification again"
+            }
+          >
+            {errorCode === "GUARDIAN_UNDER_18"
+              ? "Change Guardian"
+              : "Try Again"}
+          </button>
+        ) : error ? (
+          <button
+            style={{
+              ...styles.button,
+              ...responsiveStyles.button,
+              ...styles.cancelButton,
+              ...declineButtonStyle,
+            }}
+            onClick={() => onBack(false)}
+            type="button"
+            aria-label="Go back"
+          >
+            Go Back
+          </button>
+        ) : (
+          <button
+            style={{
+              ...styles.button,
+              ...responsiveStyles.button,
+              ...styles.cancelButton,
+              ...declineButtonStyle,
+            }}
+            onClick={() => onBack(false)}
+            type="button"
+            aria-label="Cancel verification"
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+      )}
+    </>
+  );
+};
+
 /**
  * AgeVerification Component
  *
@@ -776,6 +1303,8 @@ export const RedactoNoticeConsent = ({
   settings,
   applicationId,
   validateAgainst = "all",
+  digilockerMode = "redirect", // Default to full page redirect (DigiLocker blocks iframe embedding)
+  digilockerCallbackUrl = "/digilocker-callback", // Default callback path
   includeFullyConsentedData = false,
   reviewModeButtonText = "Continue",
 }: Props) => {
@@ -869,6 +1398,8 @@ export const RedactoNoticeConsent = ({
 
   // Age verification states
   const [showAgeVerification, setShowAgeVerification] = useState(false);
+  const [isMinorFlow, setIsMinorFlow] = useState(false);
+  const [selfDeclaredAdult, setSelfDeclaredAdult] = useState(false);
 
   // Guardian form states
   const [showGuardianForm, setShowGuardianForm] = useState(false);
@@ -882,13 +1413,36 @@ export const RedactoNoticeConsent = ({
     Record<string, string>
   >({});
 
+  // Guardian verification states
+  const [showVerificationScreen, setShowVerificationScreen] = useState(false);
+  const [verificationReference, setVerificationReference] = useState<string | null>(null);
+  const [isInitiatingVerification, setIsInitiatingVerification] =
+    useState(false);
+  const [verificationError, setVerificationError] = useState<string | null>(
+    null
+  );
+  const [verificationErrorCode, setVerificationErrorCode] = useState<string | null>(null);
+  const [canRetryVerification, setCanRetryVerification] = useState(false);
+  const [isPollingStatus, setIsPollingStatus] = useState(false);
+  const [isVerificationComplete, setIsVerificationComplete] = useState(false);
+  const [isAutoTransitioning, setIsAutoTransitioning] = useState(false);
+
   // Refs and constants
   const modalRef = useRef<HTMLDivElement>(null);
   const firstFocusableRef = useRef<HTMLButtonElement>(null);
   const lastFocusableRef = useRef<HTMLButtonElement>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
-  const isRequestInProgressRef = useRef(false); // Prevent rapid successive calls
+  const isRequestInProgressRef = useRef(false);
   const currentAudioRef = useRef<HTMLAudioElement | null>(null);
+  const popupCheckIntervalRef = useRef<number | null>(null);
+  const statusPollIntervalRef = useRef<number | null>(null);
+  const verificationPopupRef = useRef<Window | null>(null);
+  const pollingCleanupRef = useRef<(() => void) | null>(null);
+  const autoTransitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const digilockerRedirectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isInitialMountRef = useRef(true);
+  const isPollingStatusRef = useRef(false);
+  const verificationSessionTokenRef = useRef<string | null>(null);
 
   // =============================================================================
   // RESPONSIVE DESIGN & STYLING
@@ -1049,6 +1603,8 @@ export const RedactoNoticeConsent = ({
 
     // Clear age verification and guardian form state
     setShowAgeVerification(false);
+    setIsMinorFlow(false);
+    setSelfDeclaredAdult(false);
     setShowGuardianForm(false);
     setIsSubmittingGuardian(false);
     setGuardianFormData({
@@ -1057,6 +1613,47 @@ export const RedactoNoticeConsent = ({
       guardianRelationship: "",
     });
     setGuardianFormErrors({});
+
+    // Clear verification state
+    setShowVerificationScreen(false);
+    setVerificationReference(null);
+    setIsInitiatingVerification(false);
+    setVerificationError(null);
+    setVerificationErrorCode(null);
+    setCanRetryVerification(false);
+    setIsVerificationComplete(false);
+    setIsAutoTransitioning(false);
+    setIsPollingStatus(false);
+    isPollingStatusRef.current = false;
+    verificationSessionTokenRef.current = null;
+    if (popupCheckIntervalRef.current) {
+      clearInterval(popupCheckIntervalRef.current);
+      popupCheckIntervalRef.current = null;
+    }
+    if (statusPollIntervalRef.current) {
+      clearTimeout(statusPollIntervalRef.current);
+      statusPollIntervalRef.current = null;
+    }
+    // Clean up visibilitychange listener if polling was active
+    pollingCleanupRef.current?.();
+    pollingCleanupRef.current = null;
+    verificationPopupRef.current?.close();
+    verificationPopupRef.current = null;
+    if (autoTransitionTimerRef.current) {
+      clearTimeout(autoTransitionTimerRef.current);
+      autoTransitionTimerRef.current = null;
+    }
+    if (digilockerRedirectTimeoutRef.current) {
+      clearTimeout(digilockerRedirectTimeoutRef.current);
+      digilockerRedirectTimeoutRef.current = null;
+    }
+
+    // Clear persisted state only on token change, not initial mount.
+    // The restore effect (below) needs to read persisted state on first mount.
+    if (!isInitialMountRef.current) {
+      clearConsentState();
+    }
+    isInitialMountRef.current = false;
   }, [accessToken]);
 
   /**
@@ -1361,7 +1958,14 @@ export const RedactoNoticeConsent = ({
       // Check if age verification is required - set this after all content is loaded
       // but before setIsLoading(false) to ensure proper render order
       if (consentContentData.detail.is_minor) {
-        setShowAgeVerification(true);
+        setIsMinorFlow(true);
+        // Only show age verification if not returning from a DigiLocker redirect
+        // (persisted state means user is mid-verification flow — the state restoration
+        // effect handles showing the correct screen)
+        const persistedState = getConsentState();
+        if (!persistedState?.sessionToken && !persistedState?.verificationReference) {
+          setShowAgeVerification(true);
+        }
       }
 
       // Set loading to false after all state updates are complete
@@ -1494,6 +2098,12 @@ export const RedactoNoticeConsent = ({
     const submitController = new AbortController();
 
     try {
+      // Block submission if minor consent flow is active but verification reference is missing
+      if (isMinorFlow && !verificationReference) {
+        setErrorMessage("Guardian verification is required before consent can be submitted.");
+        return;
+      }
+
       setIsSubmittingAccept(true);
       setIsSubmitting(true); // Keep for backward compatibility with acceptDisabled
       setErrorMessage(null);
@@ -1544,6 +2154,8 @@ export const RedactoNoticeConsent = ({
           meta_data: applicationId
             ? { specific_uuid: applicationId }
             : undefined,
+          guardianVerificationReference: verificationReference || undefined,
+          selfDeclaredAdult: selfDeclaredAdult || undefined,
           signal: submitController.signal,
         });
       }
@@ -1570,33 +2182,11 @@ export const RedactoNoticeConsent = ({
   const handleDecline = useCallback(async () => {
     try {
       setIsSubmittingDecline(true);
-      setIsSubmitting(true); // Keep for backward compatibility
-      // try {
-      //   if (content) {
-      //     await submitConsentEvent(
-      //       accessToken,
-      //       content.notice_uuid,
-      //       content.purposes.map((purpose) => ({
-      //         ...purpose,
-      //         selected: false,
-      //         data_elements: purpose.data_elements.map((element) => ({
-      //           ...element,
-      //           selected: element.required ? true : false,
-      //         })),
-      //       })),
-      //       true
-      //     );
-      //   }
-      // } catch (error) {
-      //   console.error("Error submitting consent:", error);
-      //   onError?.(error as Error);
-      // } finally {
-      //   setIsSubmitting(false);
-      // }
+      setIsSubmitting(true);
       onDecline?.();
     } finally {
       setIsSubmittingDecline(false);
-      setIsSubmitting(false); // Keep for backward compatibility
+      setIsSubmitting(false);
     }
   }, [onDecline]);
 
@@ -1646,21 +2236,140 @@ export const RedactoNoticeConsent = ({
     try {
       setIsSubmittingGuardian(true);
       setGuardianFormErrors({}); // Clear any previous errors
-
-      await submitGuardianInfo({
+      setVerificationError(null);
+
+      // For redirect mode: Don't send frontendCallbackUrl
+      // DigiLocker should redirect to BACKEND callback URL (e.g., http://localhost:8000/consent/public/digilocker/callback)
+      // Backend processes the callback and updates status in database
+      // SDK will poll verify-status endpoint to detect completion
+      // 
+      // For popup mode: Send frontendCallbackUrl so backend can redirect back to frontend
+      const callbackUrl = digilockerMode === "popup"
+        ? new URL(digilockerCallbackUrl, window.location.origin).href
+        : undefined;
+
+      // Initiate guardian verification - combines guardian details + DigiLocker start
+      const response = await initiateGuardianVerification({
         accessToken,
         baseUrl,
         guardianName: guardianFormData.guardianName,
         guardianContact: guardianFormData.guardianContact,
         guardianRelationship: guardianFormData.guardianRelationship,
+        frontendCallbackUrl: callbackUrl, // Only for popup mode
         signal: guardianController.signal,
       });
 
-      // Success - proceed to consent form
+      setIsSubmittingGuardian(false);
+
+      // ── Already verified: skip DigiLocker, brief success flash then consent form ──
+      if (response.already_verified && response.verification_reference) {
+        setVerificationReference(response.verification_reference);
+        setShowGuardianForm(false);
+        setShowVerificationScreen(true);
+        setIsInitiatingVerification(false);
+        setIsVerificationComplete(true);
+        setIsAutoTransitioning(true);
+
+        // Auto-transition to consent form after brief success flash
+        autoTransitionTimerRef.current = setTimeout(() => {
+          setShowVerificationScreen(false);
+          setIsVerificationComplete(false);
+          setIsAutoTransitioning(false);
+          autoTransitionTimerRef.current = null;
+        }, 1000);
+        return;
+      }
+
+      // ── New verification: needs DigiLocker ──
+      if (!response.session_token || !response.digilocker_redirect_url) {
+        throw new Error("Invalid response from server: missing required fields");
+      }
+
+      // Show verification screen before redirect
       setShowGuardianForm(false);
+      setShowVerificationScreen(true);
+      setIsInitiatingVerification(true);
+
+      if (digilockerMode === "redirect") {
+        // Save state BEFORE redirect — restored when user returns from DigiLocker callback
+        // NOTE: Guardian PII (name, contact, relationship) intentionally excluded from
+        // persisted state to avoid storing sensitive data in sessionStorage.
+        saveConsentState({
+          flowState: "digilocker-pending",
+          sessionToken: response.session_token,
+          guardianInfoUuid: response.guardian_info_uuid,
+          selectedPurposes,
+          selectedDataElements,
+          timestamp: new Date().toISOString(),
+          originalUrl: window.location.href,
+          noticeId,
+          baseUrl,
+        });
+
+        // Open DigiLocker in a new tab — keeps original page open for polling
+        // Flow: DigiLocker → backend callback → backend updates DB → this tab polls → detects completion
+        // NOTE: Do NOT pass "noopener" in the features string (3rd param) — it causes
+        // window.open to return null per spec, even when the tab opens successfully.
+        // Instead, manually null out opener after opening.
+        try {
+          const openedWindow = window.open(
+            response.digilocker_redirect_url,
+            "_blank"
+          );
+
+          if (!openedWindow) {
+            // Popup was blocked — show error instead of same-tab redirect
+            // (same-tab redirect would lose the current page with no frontend route back)
+            console.warn("Popup blocked — cannot open DigiLocker in new tab");
+            setIsInitiatingVerification(false);
+            setVerificationError(
+              "Unable to open DigiLocker in a new tab. Please allow popups for this site and try again."
+            );
+            return;
+          }
+
+          // Prevent the opened tab from accessing window.opener (security)
+          try { openedWindow.opener = null; } catch { /* cross-origin — safe to ignore */ }
+        } catch (error) {
+          console.error("Failed to open DigiLocker in new tab:", error);
+          setIsInitiatingVerification(false);
+          setVerificationError(
+            "Unable to open DigiLocker. Please allow popups for this site and try again."
+          );
+          return;
+        }
+
+        setIsInitiatingVerification(false);
+        setIsPollingStatus(true);
+        isPollingStatusRef.current = true;
+        startStatusPolling(response.session_token);
+      } else {
+        // Popup mode - open DigiLocker in new window
+        setIsInitiatingVerification(true);
+        
+        const popup = window.open(
+          response.digilocker_redirect_url,
+          "digilocker_verification",
+          "width=600,height=700,scrollbars=yes,resizable=yes"
+        );
+
+        if (popup) {
+          verificationPopupRef.current = popup;
+          startPopupMonitoring(popup);
+          startStatusPolling(response.session_token);
+          // Keep isInitiatingVerification true while polling
+        } else {
+          // Popup blocked - fall back to redirect
+          setIsInitiatingVerification(false);
+          setVerificationError(
+            "Popup blocked. Please allow popups for this site or use redirect mode."
+          );
+        }
+      }
     } catch (error) {
       // Handle API errors
       const err = error as Error & { status?: number };
+      setIsInitiatingVerification(false);
 
       if (err.status === 422) {
         // Validation error from server - try to extract field-specific errors
@@ -1673,23 +2382,30 @@ export const RedactoNoticeConsent = ({
         } else {
           setGuardianFormErrors({ general: err.message });
         }
+        // Go back to guardian form to show errors
+        setShowVerificationScreen(false);
+        setShowGuardianForm(true);
       } else {
         // Other errors - show general error
         setGuardianFormErrors({
           general:
             err.message ||
-            "Failed to submit guardian information. Please try again.",
+            "Failed to initiate verification. Please try again.",
         });
+        setShowVerificationScreen(false);
+        setShowGuardianForm(true);
         onError?.(err);
       }
     } finally {
       setIsSubmittingGuardian(false);
     }
-  }, [accessToken, baseUrl, guardianFormData, onError]);
+  }, [accessToken, baseUrl, guardianFormData, digilockerMode, digilockerCallbackUrl, selectedPurposes, selectedDataElements, noticeId, onError]);
 
   // Age verification handlers
   const handleAgeVerificationYes = useCallback(() => {
     setShowAgeVerification(false);
+    setIsMinorFlow(false);
+    setSelfDeclaredAdult(true);
     // User is 18+, proceed directly to consent
   }, []);
 
@@ -1699,6 +2415,299 @@ export const RedactoNoticeConsent = ({
     // User is under 18, show guardian form
   }, []);
 
+  const handleVerificationContinue = useCallback(() => {
+    // Transition from verification success screen to consent form
+    setShowVerificationScreen(false);
+    setIsVerificationComplete(false);
+  }, []);
+
+  // Guardian verification handlers
+  const handlePopupClosed = useCallback(async () => {
+    // Stop the popup monitor
+    if (popupCheckIntervalRef.current) {
+      clearInterval(popupCheckIntervalRef.current);
+      popupCheckIntervalRef.current = null;
+    }
+    // Stop status polling timer
+    if (statusPollIntervalRef.current) {
+      clearTimeout(statusPollIntervalRef.current);
+      statusPollIntervalRef.current = null;
+    }
+    // Clean up visibilitychange listener
+    pollingCleanupRef.current?.();
+    pollingCleanupRef.current = null;
+    // Null out popup ref
+    verificationPopupRef.current = null;
+
+    // Use ref to avoid stale closure — startPopupMonitoring installs interval
+    // before startStatusPolling flips isPollingStatus state
+    if (!isPollingStatusRef.current) return;
+
+    // Perform one final status check — the user may have completed verification
+    // right before closing the popup
+    const sessionToken = verificationSessionTokenRef.current;
+    if (sessionToken) {
+      try {
+        const response = await verifyGuardianStatus({
+          accessToken,
+          baseUrl,
+          sessionToken,
+        });
+
+        if (response.status === "verified") {
+          const ref = response.verification_reference || response.guardian_details?.verification_reference;
+          if (ref) {
+            setVerificationReference(ref);
+            setIsVerificationComplete(true);
+            setIsPollingStatus(false);
+            isPollingStatusRef.current = false;
+            setIsInitiatingVerification(false);
+            clearConsentState();
+            return;
+          }
+        }
+      } catch {
+        // Final check failed — fall through to show error
+      }
+    }
+
+    // Verification not complete — mark as failure
+    setVerificationError(
+      "Verification window was closed. Please try again."
+    );
+    setIsPollingStatus(false);
+    isPollingStatusRef.current = false;
+    setIsInitiatingVerification(false);
+  }, [accessToken, baseUrl]);
+
+  const startPopupMonitoring = useCallback((popup: Window) => {
+    // Check every 500ms if popup is closed
+    popupCheckIntervalRef.current = window.setInterval(() => {
+      if (popup.closed) {
+        handlePopupClosed();
+      }
+    }, 500);
+  }, [handlePopupClosed]);
+
+  /** Map error_code to user-friendly message */
+  const getVerificationErrorMessage = useCallback(
+    (errorCode: string | null, fallbackError: string | null): string => {
+      switch (errorCode) {
+        case "GUARDIAN_UNDER_18":
+          return "The guardian must be 18 years or older. Please provide details of a different guardian.";
+        case "TOKEN_FAILED":
+          return "DigiLocker verification could not be completed. Please try again.";
+        case "DIGILOCKER_AUTH_FAILED":
+          return "DigiLocker authorization was cancelled or failed. Please try again.";
+        case "NO_AUTH_CODE":
+          return "DigiLocker did not return an authorization code. Please try again.";
+        case "SESSION_EXPIRED":
+          return "Verification session has expired. Please try again.";
+        default:
+          return fallbackError || "Verification failed. Please try again.";
+      }
+    },
+    []
+  );
+
+  /**
+   * Poll verification status every 3s, hard stop at 2 minutes.
+   * Pauses when tab is hidden (user is on DigiLocker tab), resumes on return.
+   */
+  const startStatusPolling = useCallback(
+    (token: string) => {
+      verificationSessionTokenRef.current = token;
+      setIsPollingStatus(true);
+      isPollingStatusRef.current = true;
+      setVerificationError(null);
+      setVerificationErrorCode(null);
+      setCanRetryVerification(false);
+
+      let attempts = 0;
+      let consecutiveErrors = 0;
+      let paused = false;
+      const MAX_ATTEMPTS = 40; // 40 × 3s = 2 minutes
+      const MAX_CONSECUTIVE_ERRORS = 3;
+      const POLL_INTERVAL = 3000;
+
+      const stopPolling = () => {
+        if (statusPollIntervalRef.current) {
+          clearTimeout(statusPollIntervalRef.current);
+          statusPollIntervalRef.current = null;
+        }
+        if (popupCheckIntervalRef.current) {
+          clearInterval(popupCheckIntervalRef.current);
+          popupCheckIntervalRef.current = null;
+        }
+        verificationPopupRef.current?.close();
+        verificationPopupRef.current = null;
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+        pollingCleanupRef.current = null;
+        setIsPollingStatus(false);
+        isPollingStatusRef.current = false;
+        setIsInitiatingVerification(false);
+      };
+
+      const setError = (message: string, errorCode: string | null, canRetry: boolean) => {
+        stopPolling();
+        setVerificationError(message);
+        setVerificationErrorCode(errorCode);
+        setCanRetryVerification(canRetry);
+      };
+
+      const poll = async () => {
+        if (paused) return;
+
+        attempts++;
+
+        if (attempts > MAX_ATTEMPTS) {
+          setError(
+            "Verification is taking longer than expected. Please try again.",
+            "SESSION_EXPIRED",
+            true
+          );
+          return;
+        }
+
+        try {
+          const response = await verifyGuardianStatus({
+            accessToken,
+            baseUrl,
+            sessionToken: token,
+          });
+
+          // Reset consecutive errors on any successful API call
+          consecutiveErrors = 0;
+
+          if (response.status === "verified") {
+            stopPolling();
+            const ref = response.verification_reference || response.guardian_details?.verification_reference;
+            if (!ref) {
+              setError(
+                "Verification completed but no reference received. Please try again.",
+                null,
+                true
+              );
+              return;
+            }
+            setVerificationReference(ref);
+            setIsVerificationComplete(true);
+            clearConsentState();
+            return;
+          }
+
+          if (response.status === "failed" || response.status === "expired") {
+            setError(
+              getVerificationErrorMessage(response.error_code, response.error),
+              response.error_code,
+              response.can_retry
+            );
+            return;
+          }
+
+          // pending / in_progress — poll again
+          if (!paused) {
+            statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
+          }
+        } catch (error) {
+          const err = error as Error & { status?: number };
+
+          if (err.status === 404 || err.status === 410) {
+            setError(
+              "Verification session not found or expired. Please try again.",
+              "SESSION_EXPIRED",
+              true
+            );
+            return;
+          }
+
+          // Transient error — keep polling, fail after consecutive threshold
+          consecutiveErrors++;
+          if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
+            setError(
+              err.message || "Unable to check verification status. Please try again.",
+              null,
+              true
+            );
+            return;
+          }
+
+          statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
+        }
+      };
+
+      // Pause when tab hidden, resume immediately when visible
+      const onVisibilityChange = () => {
+        if (document.hidden) {
+          paused = true;
+          if (statusPollIntervalRef.current) {
+            clearTimeout(statusPollIntervalRef.current);
+            statusPollIntervalRef.current = null;
+          }
+        } else {
+          paused = false;
+          poll();
+        }
+      };
+
+      document.addEventListener("visibilitychange", onVisibilityChange);
+      // Store cleanup so unmount/reset can remove the listener
+      pollingCleanupRef.current = () => {
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+      };
+
+      // First poll after 3s
+      statusPollIntervalRef.current = window.setTimeout(poll, POLL_INTERVAL);
+    },
+    [accessToken, baseUrl, getVerificationErrorMessage]
+  );
+
+
+  const handleBackToGuardianForm = useCallback((clearName = false) => {
+    // Close any open popup
+    verificationPopupRef.current?.close();
+    verificationPopupRef.current = null;
+
+    // Clear all timers
+    if (popupCheckIntervalRef.current) {
+      clearInterval(popupCheckIntervalRef.current);
+      popupCheckIntervalRef.current = null;
+    }
+    if (statusPollIntervalRef.current) {
+      clearTimeout(statusPollIntervalRef.current);
+      statusPollIntervalRef.current = null;
+    }
+    if (autoTransitionTimerRef.current) {
+      clearTimeout(autoTransitionTimerRef.current);
+      autoTransitionTimerRef.current = null;
+    }
+    if (digilockerRedirectTimeoutRef.current) {
+      clearTimeout(digilockerRedirectTimeoutRef.current);
+      digilockerRedirectTimeoutRef.current = null;
+    }
+    // Clean up visibilitychange listener
+    pollingCleanupRef.current?.();
+    pollingCleanupRef.current = null;
+
+    // Reset verification state
+    setShowVerificationScreen(false);
+    setShowGuardianForm(true);
+    setVerificationError(null);
+    setVerificationErrorCode(null);
+    setCanRetryVerification(false);
+    setIsInitiatingVerification(false);
+    setIsPollingStatus(false);
+    isPollingStatusRef.current = false;
+    setIsVerificationComplete(false);
+
+    // For GUARDIAN_UNDER_18: clear name so user enters a different guardian
+    if (clearName) {
+      setGuardianFormData((prev) => ({ ...prev, guardianName: "" }));
+    }
+
+    clearConsentState();
+  }, []);
+
   const availableLanguages = useMemo(() => {
     if (!content) return [language];
 
@@ -2328,9 +3337,77 @@ export const RedactoNoticeConsent = ({
       }
       // Stop and cleanup audio
       stopAudio();
+      // Cleanup verification intervals, popup, and visibilitychange listener
+      if (popupCheckIntervalRef.current) {
+        clearInterval(popupCheckIntervalRef.current);
+      }
+      if (statusPollIntervalRef.current) {
+        clearTimeout(statusPollIntervalRef.current);
+      }
+      pollingCleanupRef.current?.();
+      pollingCleanupRef.current = null;
+      verificationPopupRef.current?.close();
+      if (autoTransitionTimerRef.current) {
+        clearTimeout(autoTransitionTimerRef.current);
+        autoTransitionTimerRef.current = null;
+      }
+      if (digilockerRedirectTimeoutRef.current) {
+        clearTimeout(digilockerRedirectTimeoutRef.current);
+        digilockerRedirectTimeoutRef.current = null;
+      }
     };
   }, [stopAudio]);
 
+  // Restore state from redirect flow (when user returns from DigiLocker)
+  useEffect(() => {
+    const persistedState = getConsentState();
+    if (!persistedState) return;
+
+    // Validate persisted state belongs to this notice and hasn't expired
+    if (persistedState.noticeId && persistedState.noticeId !== noticeId) {
+      clearConsentState();
+      return;
+    }
+    const REDIRECT_STATE_MAX_AGE_MS = 15 * 60 * 1000; // 15 minutes
+    if (persistedState.timestamp) {
+      const stateAge = Date.now() - new Date(persistedState.timestamp).getTime();
+      if (stateAge > REDIRECT_STATE_MAX_AGE_MS) {
+        clearConsentState();
+        return;
+      }
+    }
+
+    // Check if this is a redirect return
+    if (persistedState.flowState === "digilocker-pending" && persistedState.sessionToken) {
+      // Resume verification status polling
+      setShowVerificationScreen(true);
+      setShowGuardianForm(false);
+      setShowAgeVerification(false);
+
+      // Start polling for status
+      startStatusPolling(persistedState.sessionToken);
+    } else if (persistedState.verificationResult === "verified" && persistedState.verificationReference) {
+      // Verification completed during redirect, show success screen with Continue button
+      setVerificationReference(persistedState.verificationReference);
+      setShowVerificationScreen(true);
+      setIsVerificationComplete(true);
+      setShowGuardianForm(false);
+      setShowAgeVerification(false);
+      clearConsentState();
+    } else if (persistedState.verificationResult === "failed" || persistedState.verificationResult === "expired") {
+      // Verification failed during redirect, show error
+      setShowVerificationScreen(true);
+      setShowGuardianForm(false);
+      setShowAgeVerification(false);
+      setVerificationError(
+        persistedState.verificationResult === "expired"
+          ? "Verification session has expired. Please try again."
+          : "Verification failed. Please try again."
+      );
+      clearConsentState();
+    }
+  }, [startStatusPolling, noticeId]);
+
   // =============================================================================
   // RENDER
   // =============================================================================
@@ -2511,6 +3588,28 @@ export const RedactoNoticeConsent = ({
                   logoUrl={content?.logo_url || logo}
                 />
               </div>
+            ) : showVerificationScreen ? (
+              <div style={{ ...styles.content, ...responsiveStyles.content }}>
+                <VerificationScreen
+                  onBack={handleBackToGuardianForm}
+                  onContinue={handleVerificationContinue}
+                  isInitiating={isInitiatingVerification}
+                  isPolling={isPollingStatus}
+                  isVerificationComplete={isVerificationComplete}
+                  isAutoTransitioning={isAutoTransitioning}
+                  error={verificationError}
+                  errorCode={verificationErrorCode}
+                  canRetry={canRetryVerification}
+                  styles={styles}
+                  responsiveStyles={responsiveStyles}
+                  settings={settings}
+                  componentHeadingStyle={componentHeadingStyle}
+                  componentTextStyle={componentTextStyle}
+                  acceptButtonStyle={acceptButtonStyle}
+                  declineButtonStyle={declineButtonStyle}
+                  logoUrl={content?.logo_url || logo}
+                />
+              </div>
             ) : (
               <div style={{ ...styles.content, ...responsiveStyles.content }}>
                 {errorMessage && (