backbuttons

apps/login/src/app/(login)/mfa/page.tsx

@@ -5,6 +5,7 @@ import {
   server,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
+import BackButton from "@/ui/BackButton";
 import ChooseSecondFactor from "@/ui/ChooseSecondFactor";
 import DynamicTheme from "@/ui/DynamicTheme";
 import UserAvatar from "@/ui/UserAvatar";
@@ -96,6 +97,11 @@ export default async function Page({
         ) : (
           <Alert>No second factors available to setup.</Alert>
         )}
+
+        <div className="mt-8 flex w-full flex-row items-center">
+          <BackButton />
+          <span className="flex-grow"></span>
+        </div>
       </div>
     </DynamicTheme>
   );

apps/login/src/app/(login)/mfa/set/page.tsx

@@ -7,6 +7,7 @@ import {
   server,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
+import BackButton from "@/ui/BackButton";
 import ChooseSecondFactorToSetup from "@/ui/ChooseSecondFactorToSetup";
 import DynamicTheme from "@/ui/DynamicTheme";
 import UserAvatar from "@/ui/UserAvatar";
@@ -110,6 +111,11 @@ export default async function Page({
         ) : (
           <Alert>No second factors available to setup.</Alert>
         )}
+
+        <div className="mt-8 flex w-full flex-row items-center">
+          <BackButton />
+          <span className="flex-grow"></span>
+        </div>
       </div>
     </DynamicTheme>
   );

apps/login/src/app/(login)/otp/[method]/set/page.tsx

@@ -7,6 +7,7 @@ import {
   server,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
+import BackButton from "@/ui/BackButton";
 import { Button, ButtonVariants } from "@/ui/Button";
 import DynamicTheme from "@/ui/DynamicTheme";
 import { Spinner } from "@/ui/Spinner";
@@ -154,6 +155,7 @@ export default async function Page({
             </p>
 
             <div className="mt-8 flex w-full flex-row items-center">
+              <BackButton />
               <span className="flex-grow"></span>
               <Link
                 href={

apps/login/src/ui/LoginOTP.tsx

@@ -10,6 +10,7 @@ import { Checks } from "@zitadel/server";
 import { useForm } from "react-hook-form";
 import { TextInput } from "./Input";
 import { Challenges } from "@zitadel/server";
+import BackButton from "./BackButton";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -228,6 +229,7 @@ export default function LoginOTP({
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
+        <BackButton />
         <span className="flex-grow"></span>
         <Button
           type="submit"

apps/login/src/ui/LoginPasskey.tsx

@@ -7,6 +7,7 @@ import { Button, ButtonVariants } from "./Button";
 import Alert from "./Alert";
 import { Spinner } from "./Spinner";
 import { Checks } from "@zitadel/server";
+import BackButton from "./BackButton";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -250,13 +251,7 @@ export default function LoginPasskey({
             use password
           </Button>
         ) : (
-          <Button
-            type="button"
-            variant={ButtonVariants.Secondary}
-            onClick={() => router.back()}
-          >
-            back
-          </Button>
+          <BackButton />
         )}
 
         <span className="flex-grow"></span>

apps/login/src/ui/RegisterFormWithoutPassword.tsx

@@ -12,6 +12,7 @@ import AuthenticationMethodRadio, {
   methods,
 } from "./AuthenticationMethodRadio";
 import Alert from "./Alert";
+import BackButton from "./BackButton";
 
 type Inputs =
   | {
@@ -166,13 +167,7 @@ export default function RegisterFormWithoutPassword({
       )}
 
       <div className="mt-8 flex w-full flex-row items-center justify-between">
-        <Button
-          type="button"
-          variant={ButtonVariants.Secondary}
-          onClick={() => router.back()}
-        >
-          back
-        </Button>
+        <BackButton />
         <Button
           type="submit"
           variant={ButtonVariants.Primary}

apps/login/src/ui/RegisterPasskey.tsx

@@ -8,6 +8,7 @@ import { Spinner } from "./Spinner";
 import Alert from "./Alert";
 import { AuthRequest, RegisterPasskeyResponse } from "@zitadel/server";
 import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import BackButton from "./BackButton";
 type Inputs = {};
 
 type Props = {
@@ -216,13 +217,7 @@ export default function RegisterPasskey({
             skip
           </Button>
         ) : (
-          <Button
-            type="button"
-            variant={ButtonVariants.Secondary}
-            onClick={() => router.back()}
-          >
-            back
-          </Button>
+          <BackButton />
         )}
 
         <span className="flex-grow"></span>

apps/login/src/ui/RegisterU2F.tsx

@@ -8,6 +8,7 @@ import { Spinner } from "./Spinner";
 import Alert from "./Alert";
 import { RegisterU2FResponse } from "@zitadel/server";
 import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import BackButton from "./BackButton";
 type Inputs = {};
 
 type Props = {
@@ -191,13 +192,7 @@ export default function RegisterU2F({
       )}
 
       <div className="mt-8 flex w-full flex-row items-center">
-        <Button
-          type="button"
-          variant={ButtonVariants.Secondary}
-          onClick={() => router.back()}
-        >
-          back
-        </Button>
+        <BackButton />
 
         <span className="flex-grow"></span>
         <Button

apps/login/src/ui/SignInWithIDP.tsx

@@ -10,6 +10,7 @@ import {
 import { useRouter } from "next/navigation";
 import { ProviderSlug } from "@/lib/demos";
 import Alert from "./Alert";
+import BackButton from "./BackButton";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
@@ -141,6 +142,10 @@ export function SignInWithIDP({
           <Alert>{error}</Alert>
         </div>
       )}
+      <div className="mt-8 flex w-full flex-row items-center">
+        <BackButton />
+        <span className="flex-grow"></span>
+      </div>
     </div>
   );
 }