added more new

src/modules/auth/components/RegisterForm.jsx

@@ -159,6 +159,11 @@ export function RegisterForm({ className, ...props }) {
   const [isResuming, setIsResuming]             = useState(false)
   const [pendingCreds, setPendingCreds]         = useState(null)
 
+  // ── Confirm-before-create (asked before the register request ever fires) ──
+  const [confirmCreateOpen, setConfirmCreateOpen] = useState(false)
+  const [isCreating, setIsCreating]               = useState(false)
+  const [pendingCredsData, setPendingCredsData]   = useState(null)
+
   // ── Warn before the tab is closed/reloaded mid-registration ────────────────
   // Once the user reaches Credentials, submitting can already create a
   // server-side account + send an OTP — losing the tab here (slow internet,
@@ -262,7 +267,24 @@ export function RegisterForm({ className, ...props }) {
     setStep(2)
   }
 
-  const onCredentialsSubmit = (data) => submitRegistration(data)
+  // Validated credentials don't submit yet — stage them and ask for explicit
+  // confirmation first, since this is the step that actually creates the
+  // server-side account and sends an OTP.
+  const onCredentialsSubmit = (data) => {
+    setPendingCredsData(data)
+    setConfirmCreateOpen(true)
+  }
+
+  const handleConfirmCreate = async () => {
+    if (!pendingCredsData) return
+    setIsCreating(true)
+    try {
+      await submitRegistration(pendingCredsData)
+    } finally {
+      setIsCreating(false)
+      setConfirmCreateOpen(false)
+    }
+  }
 
   const handleConfirmResume = async () => {
     if (!pendingCreds) return
@@ -440,7 +462,7 @@ export function RegisterForm({ className, ...props }) {
             </div>
 
             <Button type="submit" className="w-full mt-1">
-              Next: Credentials →
+              Proceed
             </Button>
 
             <p className="text-center text-sm text-muted-foreground">
@@ -581,15 +603,8 @@ export function RegisterForm({ className, ...props }) {
               >
                 ← Back
               </Button>
-              <Button type="submit" className="flex-1" disabled={isRegistering}>
+              <Button type="submit" className="flex-1" disabled={isRegistering || isCreating}>
-                {isRegistering ? (
+                Create account →
-                  <span className="flex items-center gap-2">
-                    <LoaderCircle className="size-4 animate-spin" />
-                    Creating...
-                  </span>
-                ) : (
-                  'Create account →'
-                )}
               </Button>
             </div>
 
@@ -624,6 +639,34 @@ export function RegisterForm({ className, ...props }) {
         </AlertDialogContent>
       </AlertDialog>
 
+      <AlertDialog open={confirmCreateOpen} onOpenChange={(open) => !isCreating && setConfirmCreateOpen(open)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Create this account?</AlertDialogTitle>
+            <AlertDialogDescription>
+              We'll create your account with{' '}
+              <span className="font-medium text-foreground">{pendingCredsData?.email}</span>{' '}
+              and email a 6-digit verification code to that address.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button variant="outline" disabled={isCreating} onClick={() => setConfirmCreateOpen(false)}>
+              Cancel
+            </Button>
+            <AlertDialogAction onClick={handleConfirmCreate} disabled={isCreating}>
+              {isCreating ? (
+                <span className="flex items-center gap-2">
+                  <LoaderCircle className="size-4 animate-spin" />
+                  Creating...
+                </span>
+              ) : (
+                'Proceed'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       <AlertDialog open={resumeDialogOpen} onOpenChange={(open) => !isResuming && setResumeDialogOpen(open)}>
         <AlertDialogContent>
           <AlertDialogHeader>