From e488bd9ea6b813785c0492bece9eb3ea10270369 Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Mon, 12 Aug 2024 12:19:24 +0200
Subject: [PATCH 01/10] fix: use branding colors across packages

---
 .../src/components/SignInWithAzureAD.tsx      | 23 ++++---------------
 .../src/components/SignInWithGithub.tsx       | 13 +++--------
 .../src/components/SignInWithGitlab.tsx       | 20 ++++------------
 .../src/components/SignInWithGoogle.tsx       | 20 ++++------------
 4 files changed, 15 insertions(+), 61 deletions(-)

diff --git a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
index d9f7859bcfd..f30bd58e540 100644
--- a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
+++ b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
@@ -3,38 +3,23 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export const SignInWithAzureAD = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(
+export const SignInWithAzureAD = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
     <button
       type="button"
       ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
       {...props}
     >
       <div className="ztdl-h-12 ztdl-p-[10px] ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="21"
-          height="21"
-          viewBox="0 0 21 21"
-          className="w-full h-full"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" className="w-full h-full">
           <path fill="#f25022" d="M1 1H10V10H1z"></path>
           <path fill="#00a4ef" d="M1 11H10V20H1z"></path>
           <path fill="#7fba00" d="M11 1H20V10H11z"></path>
           <path fill="#ffb900" d="M11 11H20V20H11z"></path>
         </svg>
       </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ztdl-ml-4">
-          {name ? name : "Sign in with AzureAD"}
-        </span>
-      )}
+      {children ? children : <span className="ztdl-ml-4">{name ? name : "Sign in with AzureAD"}</span>}
     </button>
   ),
 );
diff --git a/packages/zitadel-react/src/components/SignInWithGithub.tsx b/packages/zitadel-react/src/components/SignInWithGithub.tsx
index d04f9b5fc0c..28a19829235 100644
--- a/packages/zitadel-react/src/components/SignInWithGithub.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGithub.tsx
@@ -3,15 +3,12 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export const SignInWithGithub = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(
+export const SignInWithGithub = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
     <button
       type="button"
       ref={ref}
-      className={`ztdl-h-[50px] ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      className={`ztdl-h-[50px] ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
       {...props}
     >
       <div className="ztdl-h-8 ztdl-w-8 ztdl-mx-2 flex items-center justify-center">
@@ -46,11 +43,7 @@ export const SignInWithGithub = forwardRef<
           ></path>
         </svg>
       </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ztdl-ml-4">{name ? name : "Sign in with GitHub"}</span>
-      )}
+      {children ? children : <span className="ztdl-ml-4">{name ? name : "Sign in with GitHub"}</span>}
     </button>
   ),
 );
diff --git a/packages/zitadel-react/src/components/SignInWithGitlab.tsx b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
index 62b4d04c343..6ec0941f871 100644
--- a/packages/zitadel-react/src/components/SignInWithGitlab.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
@@ -1,24 +1,16 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export const SignInWithGitlab = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(
+export const SignInWithGitlab = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
     <button
       type="button"
       ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
       {...props}
     >
       <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={25}
-          height={24}
-          fill="none"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none">
           <path
             fill="#e24329"
             d="m24.507 9.5-.034-.09L21.082.562a.896.896 0 0 0-1.694.091l-2.29 7.01H7.825L5.535.653a.898.898 0 0 0-1.694-.09L.451 9.411.416 9.5a6.297 6.297 0 0 0 2.09 7.278l.012.01.03.022 5.16 3.867 2.56 1.935 1.554 1.176a1.051 1.051 0 0 0 1.268 0l1.555-1.176 2.56-1.935 5.197-3.89.014-.01A6.297 6.297 0 0 0 24.507 9.5z"
@@ -37,11 +29,7 @@ export const SignInWithGitlab = forwardRef<
           />
         </svg>
       </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ztdl-ml-4">{name ? name : "Sign in with GitLab"}</span>
-      )}
+      {children ? children : <span className="ztdl-ml-4">{name ? name : "Sign in with GitLab"}</span>}
     </button>
   ),
 );
diff --git a/packages/zitadel-react/src/components/SignInWithGoogle.tsx b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
index e3dc0c85965..d3d9d0f8b7d 100644
--- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
@@ -1,24 +1,16 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export const SignInWithGoogle = forwardRef<
-  HTMLButtonElement,
-  SignInWithIdentityProviderProps
->(
+export const SignInWithGoogle = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
     <button
       type="button"
       ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
+      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
       {...props}
     >
       <div className="ztdl-h-12 ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          xmlSpace="preserve"
-          id="Capa_1"
-          viewBox="0 0 150 150"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" id="Capa_1" viewBox="0 0 150 150">
           <style>
             {
               ".st0{fill:#1a73e8}.st1{fill:#ea4335}.st2{fill:#4285f4}.st3{fill:#fbbc04}.st4{fill:#34a853}.st5{fill:#4caf50}.st6{fill:#1e88e5}.st7{fill:#e53935}.st8{fill:#c62828}.st9{fill:#fbc02d}.st10{fill:#1565c0}.st11{fill:#2e7d32}.st16{clip-path:url(#SVGID_2_)}.st17{fill:#188038}.st18,.st19{opacity:.2;fill:#fff;enable-background:new}.st19{opacity:.3;fill:#0d652d}.st20{clip-path:url(#SVGID_4_)}.st21{opacity:.3;fill:url(#_45_shadow_1_);enable-background:new}.st22{clip-path:url(#SVGID_6_)}.st23{fill:#fa7b17}.st24,.st25,.st26{opacity:.3;fill:#174ea6;enable-background:new}.st25,.st26{fill:#a50e0e}.st26{fill:#e37400}.st27{fill:url(#Finish_mask_1_)}.st28{fill:#fff}.st29{fill:#0c9d58}.st30,.st31{opacity:.2;fill:#004d40;enable-background:new}.st31{fill:#3e2723}.st32{fill:#ffc107}.st33{fill:#1a237e;enable-background:new}.st33,.st34{opacity:.2}.st35{fill:#1a237e}.st36{fill:url(#SVGID_7_)}.st37{fill:#fbbc05}.st38{clip-path:url(#SVGID_9_);fill:#e53935}.st39{clip-path:url(#SVGID_11_);fill:#fbc02d}.st40{clip-path:url(#SVGID_13_);fill:#e53935}.st41{clip-path:url(#SVGID_15_);fill:#fbc02d}"
@@ -50,11 +42,7 @@ export const SignInWithGoogle = forwardRef<
           />
         </svg>
       </div>
-      {children ? (
-        children
-      ) : (
-        <span className="ztdl-ml-4">{name ? name : "Sign in with Google"}</span>
-      )}
+      {children ? children : <span className="ztdl-ml-4">{name ? name : "Sign in with Google"}</span>}
     </button>
   ),
 );

From 222f141e992cbb2a9261962405398983cc68eb0a Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Tue, 13 Aug 2024 10:14:42 +0200
Subject: [PATCH 02/10] fix: use login app namespace for component theming

---
 .../zitadel-react/src/components/SignInWithAzureAD.tsx    | 8 ++------
 .../zitadel-react/src/components/SignInWithGithub.tsx     | 8 ++------
 .../zitadel-react/src/components/SignInWithGitlab.tsx     | 8 ++------
 .../zitadel-react/src/components/SignInWithGoogle.tsx     | 8 ++------
 packages/zitadel-react/src/components/classes.ts          | 2 ++
 5 files changed, 10 insertions(+), 24 deletions(-)
 create mode 100644 packages/zitadel-react/src/components/classes.ts

diff --git a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
index f30bd58e540..38acc645912 100644
--- a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
+++ b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
@@ -2,15 +2,11 @@
 
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithAzureAD = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-12 ztdl-p-[10px] ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" className="w-full h-full">
           <path fill="#f25022" d="M1 1H10V10H1z"></path>
diff --git a/packages/zitadel-react/src/components/SignInWithGithub.tsx b/packages/zitadel-react/src/components/SignInWithGithub.tsx
index 28a19829235..435459def55 100644
--- a/packages/zitadel-react/src/components/SignInWithGithub.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGithub.tsx
@@ -2,15 +2,11 @@
 
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithGithub = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-h-[50px] ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-8 ztdl-w-8 ztdl-mx-2 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/zitadel-react/src/components/SignInWithGitlab.tsx b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
index 6ec0941f871..ffb1d09c49c 100644
--- a/packages/zitadel-react/src/components/SignInWithGitlab.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
@@ -1,14 +1,10 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithGitlab = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none">
           <path
diff --git a/packages/zitadel-react/src/components/SignInWithGoogle.tsx b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
index d3d9d0f8b7d..af2dc40d26d 100644
--- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
@@ -1,14 +1,10 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithGoogle = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-12 ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" id="Capa_1" viewBox="0 0 150 150">
           <style>
diff --git a/packages/zitadel-react/src/components/classes.ts b/packages/zitadel-react/src/components/classes.ts
new file mode 100644
index 00000000000..11216a561c4
--- /dev/null
+++ b/packages/zitadel-react/src/components/classes.ts
@@ -0,0 +1,2 @@
+export const IdpButtonClasses =
+  "transition-all ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";

From 5a28c49967848ae62ea6afd5d9ed2a2caa68c860 Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 09:48:40 +0200
Subject: [PATCH 03/10] public host, instance host

---
 apps/login/src/middleware.ts      | 6 +++---
 apps/login/src/ui/SessionItem.tsx | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/login/src/middleware.ts b/apps/login/src/middleware.ts
index 982d5f5b150..c6a95a88a93 100644
--- a/apps/login/src/middleware.ts
+++ b/apps/login/src/middleware.ts
@@ -18,11 +18,11 @@ export function middleware(request: NextRequest) {
   requestHeaders.set("x-zitadel-login-client", SERVICE_USER_ID);
 
   // this is a workaround for the next.js server not forwarding the host header
-  requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
-  // requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
+  // requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
+  requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
 
   // this is a workaround for the next.js server not forwarding the host header
-  // requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
+  requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
 
   const responseHeaders = new Headers();
   responseHeaders.set("Access-Control-Allow-Origin", "*");
diff --git a/apps/login/src/ui/SessionItem.tsx b/apps/login/src/ui/SessionItem.tsx
index 8f68916d099..f036fd01392 100644
--- a/apps/login/src/ui/SessionItem.tsx
+++ b/apps/login/src/ui/SessionItem.tsx
@@ -121,11 +121,12 @@ export default function SessionItem({
 
         <XCircleIcon
           className="hidden group-hover:block h-5 w-5 transition-all opacity-50 hover:opacity-100"
-          onClick={() =>
+          onClick={(event) => {
+            event.preventDefault();
             clearSession(session.id).then(() => {
               reload();
-            })
-          }
+            });
+          }}
         />
       </div>
     </Link>

From 72de5be0847226a3efa20d4aadcb9296c8d3cb2f Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 10:33:46 +0200
Subject: [PATCH 04/10] passkey register skip fix

---
 apps/login/src/middleware.ts          |  2 +-
 apps/login/src/ui/RegisterPasskey.tsx | 33 +++++++++++++++++++--------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/login/src/middleware.ts b/apps/login/src/middleware.ts
index c6a95a88a93..0a6c3281a76 100644
--- a/apps/login/src/middleware.ts
+++ b/apps/login/src/middleware.ts
@@ -18,7 +18,7 @@ export function middleware(request: NextRequest) {
   requestHeaders.set("x-zitadel-login-client", SERVICE_USER_ID);
 
   // this is a workaround for the next.js server not forwarding the host header
-  // requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
+  requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
   requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
 
   // this is a workaround for the next.js server not forwarding the host header
diff --git a/apps/login/src/ui/RegisterPasskey.tsx b/apps/login/src/ui/RegisterPasskey.tsx
index 4ad72b583ba..c3b62b557df 100644
--- a/apps/login/src/ui/RegisterPasskey.tsx
+++ b/apps/login/src/ui/RegisterPasskey.tsx
@@ -194,19 +194,32 @@ export default function RegisterPasskey({
             type="button"
             variant={ButtonVariants.Secondary}
             onClick={() => {
-              const params = new URLSearchParams();
               if (authRequestId) {
-                params.set("authRequest", authRequestId);
-              }
-              if (sessionId) {
-                params.set("sessionId", sessionId);
-              }
+                const params = new URLSearchParams({
+                  authRequest: authRequestId,
+                });
 
-              if (organization) {
-                params.set("organization", organization);
-              }
+                if (sessionId) {
+                  params.set("sessionId", sessionId);
+                }
 
-              router.push("/login?" + params);
+                if (organization) {
+                  params.set("organization", organization);
+                }
+
+                router.push("/login?" + params);
+              } else {
+                const params = new URLSearchParams();
+
+                if (sessionId) {
+                  params.append("sessionId", sessionId);
+                }
+                if (organization) {
+                  params.append("organization", organization);
+                }
+
+                router.push("/signedin?" + params);
+              }
             }}
           >
             skip

From eeadb365f5e183ff9ca7def55f6d37704220056b Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 14:09:19 +0200
Subject: [PATCH 05/10] cleanup

---
 apps/login/src/middleware.ts    | 4 ++--
 apps/login/src/utils/session.ts | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/login/src/middleware.ts b/apps/login/src/middleware.ts
index 0a6c3281a76..982d5f5b150 100644
--- a/apps/login/src/middleware.ts
+++ b/apps/login/src/middleware.ts
@@ -19,10 +19,10 @@ export function middleware(request: NextRequest) {
 
   // this is a workaround for the next.js server not forwarding the host header
   requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
-  requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
+  // requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
 
   // this is a workaround for the next.js server not forwarding the host header
-  requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
+  // requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
 
   const responseHeaders = new Headers();
   responseHeaders.set("Access-Control-Allow-Origin", "*");
diff --git a/apps/login/src/utils/session.ts b/apps/login/src/utils/session.ts
index 7a2a6853a46..c9b1db12f29 100644
--- a/apps/login/src/utils/session.ts
+++ b/apps/login/src/utils/session.ts
@@ -38,7 +38,6 @@ export async function createSessionAndUpdateCookie(
       ? {
           user: { search: { case: "loginName", value: loginName } },
           password: { password },
-          // totp: { code: totpCode },
         }
       : { user: { search: { case: "loginName", value: loginName } } },
     challenges,
@@ -50,7 +49,7 @@ export async function createSessionAndUpdateCookie(
       createdSession.sessionToken,
     ).then((response) => {
       if (response?.session && response.session?.factors?.user?.loginName) {
-        const sessionCookie: any = {
+        const sessionCookie: CustomCookieData = {
           id: createdSession.sessionId,
           token: createdSession.sessionToken,
           creationDate: `${response.session.creationDate?.toDate().getTime() ?? ""}`,
@@ -103,7 +102,7 @@ export async function createSessionForUserIdAndUpdateCookie(
       createdSession.sessionToken,
     ).then((response) => {
       if (response?.session && response.session?.factors?.user?.loginName) {
-        const sessionCookie: any = {
+        const sessionCookie: CustomCookieData = {
           id: createdSession.sessionId,
           token: createdSession.sessionToken,
           creationDate: `${response.session.creationDate?.toDate().getTime() ?? ""}`,
@@ -153,7 +152,7 @@ export async function createSessionForIdpAndUpdateCookie(
       createdSession.sessionToken,
     ).then((response) => {
       if (response?.session && response.session?.factors?.user?.loginName) {
-        const sessionCookie: any = {
+        const sessionCookie: CustomCookieData = {
           id: createdSession.sessionId,
           token: createdSession.sessionToken,
           creationDate: `${response.session.creationDate?.toDate().getTime() ?? ""}`,

From df30c6b9a7f8f3c8e0d89d8244e5a0c9bb6a8b52 Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 14:35:43 +0200
Subject: [PATCH 06/10] fix: passkey options

---
 apps/login/src/ui/RegisterPasskey.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/login/src/ui/RegisterPasskey.tsx b/apps/login/src/ui/RegisterPasskey.tsx
index c3b62b557df..6b231dcb23a 100644
--- a/apps/login/src/ui/RegisterPasskey.tsx
+++ b/apps/login/src/ui/RegisterPasskey.tsx
@@ -92,9 +92,11 @@ export default function RegisterPasskey({
     return submitRegister().then((resp: RegisterPasskeyResponse) => {
       const passkeyId = resp.passkeyId;
       const options: CredentialCreationOptions =
-        (resp.publicKeyCredentialCreationOptions?.toJson() as CredentialCreationOptions) ??
+        (resp.publicKeyCredentialCreationOptions as CredentialCreationOptions) ??
         {};
 
+      console.log(options);
+
       if (options?.publicKey) {
         options.publicKey.challenge = coerceToArrayBuffer(
           options.publicKey.challenge,

From 9b568b4e13bc9a5a5b4227b2c4edcff2e1baae26 Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 15:27:59 +0200
Subject: [PATCH 07/10] passkey, middleware

---
 .../src/app/api/passkeys/verify/route.ts      |  5 ++--
 apps/login/src/lib/zitadel.ts                 | 24 ++++---------------
 apps/login/src/middleware.ts                  |  8 +++----
 apps/login/src/ui/RegisterPasskey.tsx         |  3 +--
 4 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/apps/login/src/app/api/passkeys/verify/route.ts b/apps/login/src/app/api/passkeys/verify/route.ts
index 064ba6e77a3..b1f38945e09 100644
--- a/apps/login/src/app/api/passkeys/verify/route.ts
+++ b/apps/login/src/app/api/passkeys/verify/route.ts
@@ -18,14 +18,13 @@ export async function POST(request: NextRequest) {
     const session = await getSession(sessionCookie.id, sessionCookie.token);
 
     const userId = session?.session?.factors?.user?.id;
-
     if (userId) {
-      return verifyPasskeyRegistration(
+      return verifyPasskeyRegistration({
         passkeyId,
         passkeyName,
         publicKeyCredential,
         userId,
-      )
+      })
         .then((resp) => {
           return NextResponse.json(resp);
         })
diff --git a/apps/login/src/lib/zitadel.ts b/apps/login/src/lib/zitadel.ts
index 2e26fada2be..85d1f117c9d 100644
--- a/apps/login/src/lib/zitadel.ts
+++ b/apps/login/src/lib/zitadel.ts
@@ -7,11 +7,11 @@ import {
 } from "@zitadel/client/v2";
 import { createManagementServiceClient } from "@zitadel/client/v1";
 import { createServerTransport } from "@zitadel/node";
-import { GetActiveIdentityProvidersRequest } from "@zitadel/proto/zitadel/settings/v2/settings_service_pb";
 import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { RequestChallenges } from "@zitadel/proto/zitadel/session/v2/challenge_pb";
 import {
   RetrieveIdentityProviderIntentRequest,
+  VerifyPasskeyRegistrationRequest,
   VerifyU2FRegistrationRequest,
 } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 
@@ -19,7 +19,7 @@ import { CreateCallbackRequest } from "@zitadel/proto/zitadel/oidc/v2/oidc_servi
 import { TextQueryMethod } from "@zitadel/proto/zitadel/object/v2/object_pb";
 import type { RedirectURLs } from "@zitadel/proto/zitadel/user/v2/idp_pb";
 import { ProviderSlug } from "./demos";
-import { PlainMessage } from "@zitadel/client";
+import { PartialMessage, PlainMessage } from "@zitadel/client";
 
 const SESSION_LIFETIME_S = 3000;
 
@@ -433,24 +433,10 @@ export async function getActiveIdentityProviders(orgId?: string) {
  * @returns the newly set email
  */
 export async function verifyPasskeyRegistration(
-  passkeyId: string,
-  passkeyName: string,
-  publicKeyCredential:
-    | {
-        [key: string]: any;
-      }
-    | undefined,
-  userId: string,
+  request: PartialMessage<VerifyPasskeyRegistrationRequest>,
 ) {
-  return userService.verifyPasskeyRegistration(
-    {
-      passkeyId,
-      passkeyName,
-      publicKeyCredential,
-      userId,
-    },
-    {},
-  );
+  request.publicKeyCredential = (request.publicKeyCredential as any).toJson();
+  return userService.verifyPasskeyRegistration(request, {});
 }
 
 /**
diff --git a/apps/login/src/middleware.ts b/apps/login/src/middleware.ts
index 982d5f5b150..7216abe39fe 100644
--- a/apps/login/src/middleware.ts
+++ b/apps/login/src/middleware.ts
@@ -10,7 +10,7 @@ export const config = {
   ],
 };
 
-const INSTANCE = process.env.ZITADEL_API_URL;
+const INSTANCE = process.env.ZITADEL_API_URL?.replace("https://", "");
 const SERVICE_USER_ID = process.env.ZITADEL_SERVICE_USER_ID as string;
 
 export function middleware(request: NextRequest) {
@@ -18,11 +18,11 @@ export function middleware(request: NextRequest) {
   requestHeaders.set("x-zitadel-login-client", SERVICE_USER_ID);
 
   // this is a workaround for the next.js server not forwarding the host header
-  requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
-  // requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
+  // requestHeaders.set("x-zitadel-forwarded", `host="${request.nextUrl.host}"`);
+  requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
 
   // this is a workaround for the next.js server not forwarding the host header
-  // requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
+  requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
 
   const responseHeaders = new Headers();
   responseHeaders.set("Access-Control-Allow-Origin", "*");
diff --git a/apps/login/src/ui/RegisterPasskey.tsx b/apps/login/src/ui/RegisterPasskey.tsx
index 6b231dcb23a..6b2bdb1fb66 100644
--- a/apps/login/src/ui/RegisterPasskey.tsx
+++ b/apps/login/src/ui/RegisterPasskey.tsx
@@ -95,8 +95,6 @@ export default function RegisterPasskey({
         (resp.publicKeyCredentialCreationOptions as CredentialCreationOptions) ??
         {};
 
-      console.log(options);
-
       if (options?.publicKey) {
         options.publicKey.challenge = coerceToArrayBuffer(
           options.publicKey.challenge,
@@ -145,6 +143,7 @@ export default function RegisterPasskey({
                   ),
                 },
               };
+
               return submitVerify(passkeyId, "", data, sessionId).then(() => {
                 const params = new URLSearchParams();
 

From a094d59dd7ff0ba8d1be214fe6e610d5c458b516 Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 15:30:55 +0200
Subject: [PATCH 08/10] middleware

---
 apps/login/src/middleware.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/login/src/middleware.ts b/apps/login/src/middleware.ts
index 7216abe39fe..965150efbcd 100644
--- a/apps/login/src/middleware.ts
+++ b/apps/login/src/middleware.ts
@@ -10,7 +10,7 @@ export const config = {
   ],
 };
 
-const INSTANCE = process.env.ZITADEL_API_URL?.replace("https://", "");
+const INSTANCE = process.env.ZITADEL_API_URL;
 const SERVICE_USER_ID = process.env.ZITADEL_SERVICE_USER_ID as string;
 
 export function middleware(request: NextRequest) {
@@ -22,7 +22,10 @@ export function middleware(request: NextRequest) {
   requestHeaders.set("x-zitadel-public-host", `${request.nextUrl.host}`);
 
   // this is a workaround for the next.js server not forwarding the host header
-  requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
+  requestHeaders.set(
+    "x-zitadel-instance-host",
+    `${INSTANCE}`.replace("https://", ""),
+  );
 
   const responseHeaders = new Headers();
   responseHeaders.set("Access-Control-Allow-Origin", "*");

From a2e9e44641398aaa68dddba50d20e57d54ae723b Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 15:51:51 +0200
Subject: [PATCH 09/10] u2f registration request

---
 apps/login/src/app/api/passkeys/verify/route.ts | 6 ++++++
 apps/login/src/app/api/u2f/verify/route.ts      | 5 ++++-
 apps/login/src/lib/zitadel.ts                   | 3 ++-
 apps/login/src/ui/RegisterU2F.tsx               | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/login/src/app/api/passkeys/verify/route.ts b/apps/login/src/app/api/passkeys/verify/route.ts
index b1f38945e09..ea25a9ba5f0 100644
--- a/apps/login/src/app/api/passkeys/verify/route.ts
+++ b/apps/login/src/app/api/passkeys/verify/route.ts
@@ -18,6 +18,12 @@ export async function POST(request: NextRequest) {
     const session = await getSession(sessionCookie.id, sessionCookie.token);
 
     const userId = session?.session?.factors?.user?.id;
+    console.log("payload", {
+      passkeyId,
+      passkeyName,
+      publicKeyCredential,
+      userId,
+    });
     if (userId) {
       return verifyPasskeyRegistration({
         passkeyId,
diff --git a/apps/login/src/app/api/u2f/verify/route.ts b/apps/login/src/app/api/u2f/verify/route.ts
index a842c8065c8..87f0a94d158 100644
--- a/apps/login/src/app/api/u2f/verify/route.ts
+++ b/apps/login/src/app/api/u2f/verify/route.ts
@@ -22,12 +22,15 @@ export async function POST(request: NextRequest) {
     const userId = session?.session?.factors?.user?.id;
 
     if (userId) {
-      const req: PlainMessage<VerifyU2FRegistrationRequest> = {
+      let req: PlainMessage<VerifyU2FRegistrationRequest> = {
         publicKeyCredential,
         u2fId,
         userId,
         tokenName: passkeyName,
       };
+
+      req = VerifyU2FRegistrationRequest.fromJson(request as any);
+
       return verifyU2FRegistration(req)
         .then((resp) => {
           return NextResponse.json(resp);
diff --git a/apps/login/src/lib/zitadel.ts b/apps/login/src/lib/zitadel.ts
index 85d1f117c9d..d65df1cfb8a 100644
--- a/apps/login/src/lib/zitadel.ts
+++ b/apps/login/src/lib/zitadel.ts
@@ -435,7 +435,8 @@ export async function getActiveIdentityProviders(orgId?: string) {
 export async function verifyPasskeyRegistration(
   request: PartialMessage<VerifyPasskeyRegistrationRequest>,
 ) {
-  request.publicKeyCredential = (request.publicKeyCredential as any).toJson();
+  // TODO: find a better way to handle this
+  request = VerifyPasskeyRegistrationRequest.fromJson(request as any);
   return userService.verifyPasskeyRegistration(request, {});
 }
 
diff --git a/apps/login/src/ui/RegisterU2F.tsx b/apps/login/src/ui/RegisterU2F.tsx
index eebbbe87b29..01081cd5eed 100644
--- a/apps/login/src/ui/RegisterU2F.tsx
+++ b/apps/login/src/ui/RegisterU2F.tsx
@@ -90,7 +90,7 @@ export default function RegisterU2F({
     return submitRegister().then((resp: RegisterU2FResponse) => {
       const u2fId = resp.u2fId;
       const options: CredentialCreationOptions =
-        (resp.publicKeyCredentialCreationOptions?.toJson() as CredentialCreationOptions) ??
+        (resp.publicKeyCredentialCreationOptions as CredentialCreationOptions) ??
         {};
 
       if (options.publicKey) {

From 65ecd36901f67fba558c31915dfe453eecdf40fb Mon Sep 17 00:00:00 2001
From: peintnermax <max@caos.ch>
Date: Wed, 14 Aug 2024 16:20:29 +0200
Subject: [PATCH 10/10] passkey login challenges json

---
 apps/login/src/ui/LoginPasskey.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/login/src/ui/LoginPasskey.tsx b/apps/login/src/ui/LoginPasskey.tsx
index fce8ecd8ecb..c29d9846d97 100644
--- a/apps/login/src/ui/LoginPasskey.tsx
+++ b/apps/login/src/ui/LoginPasskey.tsx
@@ -8,6 +8,7 @@ import Alert from "./Alert";
 import { Spinner } from "./Spinner";
 import BackButton from "./BackButton";
 import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { RequestChallenges } from "@zitadel/proto/zitadel/session/v2/challenge_pb";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -78,7 +79,7 @@ export default function LoginPasskey({
         loginName,
         sessionId,
         organization,
-        challenges: {
+        challenges: RequestChallenges.fromJson({
           webAuthN: {
             domain: "",
             // USER_VERIFICATION_REQUIREMENT_UNSPECIFIED = 0;
@@ -87,7 +88,7 @@ export default function LoginPasskey({
             // USER_VERIFICATION_REQUIREMENT_DISCOURAGED = 3; - mfa
             userVerificationRequirement: userVerificationRequirement,
           },
-        },
+        }),
         authRequestId,
       }),
     });