move cookie utils to @zitadel/next package

apps/login/package.json

@@ -40,6 +40,7 @@
     "@zitadel/node": "workspace:*",
     "@zitadel/proto": "workspace:*",
     "@zitadel/react": "workspace:*",
+    "@zitadel/next": "workspace:*",
     "clsx": "1.2.1",
     "copy-to-clipboard": "^3.3.3",
     "moment": "^2.29.4",

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

@@ -1,13 +1,9 @@
-import {
-  getBrandingSettings,
-  getLoginSettings,
-  getSession,
-} from "@/lib/zitadel";
+import { getBrandingSettings } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
 import DynamicTheme from "@/ui/DynamicTheme";
 import LoginOTP from "@/ui/LoginOTP";
 import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
+import { loadMostRecentSession } from "@zitadel/next";
 
 export default async function Page({
   searchParams,
@@ -21,21 +17,10 @@ export default async function Page({
 
   const { method } = params;
 
-  const { session, token } = await loadSession(loginName, organization);
+  const session = await loadMostRecentSession(loginName, organization);
 
   const branding = await getBrandingSettings(organization);
 
-  async function loadSession(loginName?: string, organization?: string) {
-    const recent = await getMostRecentCookieWithLoginname(
-      loginName,
-      organization,
-    );
-
-    return getSession(recent.id, recent.token).then((response) => {
-      return { session: response?.session, token: recent.token };
-    });
-  }
-
   return (
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">

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

@@ -15,6 +15,7 @@ import UserAvatar from "@/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 import Link from "next/link";
 import { RegisterTOTPResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { loadMostRecentSession } from "@zitadel/next";
 
 export default async function Page({
   searchParams,
@@ -28,7 +29,7 @@ export default async function Page({
   const { method } = params;
 
   const branding = await getBrandingSettings(organization);
-  const { session, token } = await loadSession(loginName, organization);
+  const session = await loadMostRecentSession(loginName, organization);
 
   let totpResponse: RegisterTOTPResponse | undefined,
     totpError: Error | undefined;
@@ -56,17 +57,6 @@ export default async function Page({
     throw new Error("No session found");
   }
 
-  async function loadSession(loginName?: string, organization?: string) {
-    const recent = await getMostRecentCookieWithLoginname(
-      loginName,
-      organization,
-    );
-
-    return getSession(recent.id, recent.token).then((response) => {
-      return { session: response?.session, token: recent.token };
-    });
-  }
-
   const paramsToContinue = new URLSearchParams({});
   let urlToContinue = "/accounts";
 

apps/login/src/app/(login)/passkey/add/page.tsx

@@ -4,6 +4,7 @@ import DynamicTheme from "@/ui/DynamicTheme";
 import RegisterPasskey from "@/ui/RegisterPasskey";
 import UserAvatar from "@/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
+import { loadMostRecentSession } from "@zitadel/next";
 
 export default async function Page({
   searchParams,
@@ -13,19 +14,8 @@ export default async function Page({
   const { loginName, promptPasswordless, organization, authRequestId } =
     searchParams;
 
-  const sessionFactors = await loadSession(loginName);
+  const sessionFactors = await loadMostRecentSession(loginName, organization);
 
-  async function loadSession(loginName?: string) {
-    const recent = await getMostRecentCookieWithLoginname(
-      loginName,
-      organization,
-    );
-    return getSession(recent.id, recent.token).then((response) => {
-      if (response?.session) {
-        return response.session;
-      }
-    });
-  }
   const title = !!promptPasswordless
     ? "Authenticate with a passkey"
     : "Use your passkey to confirm it's really you";

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

@@ -8,6 +8,7 @@ import DynamicTheme from "@/ui/DynamicTheme";
 import PasswordForm from "@/ui/PasswordForm";
 import UserAvatar from "@/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
+import { loadMostRecentSession } from "@zitadel/next";
 
 export default async function Page({
   searchParams,
@@ -16,20 +17,8 @@ export default async function Page({
 }) {
   const { loginName, organization, promptPasswordless, authRequestId, alt } =
     searchParams;
-  const sessionFactors = await loadSession(loginName, organization);
 
-  async function loadSession(loginName?: string, organization?: string) {
-    const recent = await getMostRecentCookieWithLoginname(
-      loginName,
-      organization,
-    );
-
-    return getSession(recent.id, recent.token).then((response) => {
-      if (response?.session) {
-        return response.session;
-      }
-    });
-  }
+  const sessionFactors = await loadMostRecentSession(loginName, organization);
 
   const branding = await getBrandingSettings(organization);
   const loginSettings = await getLoginSettings(organization);

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

@@ -5,6 +5,7 @@ import RegisterPasskey from "@/ui/RegisterPasskey";
 import RegisterU2F from "@/ui/RegisterU2F";
 import UserAvatar from "@/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
+import { loadMostRecentSession } from "@zitadel/next";
 
 export default async function Page({
   searchParams,
@@ -13,19 +14,8 @@ export default async function Page({
 }) {
   const { loginName, organization, authRequestId } = searchParams;
 
-  const sessionFactors = await loadSession(loginName);
+  const sessionFactors = await loadMostRecentSession(loginName, organization);
 
-  async function loadSession(loginName?: string) {
-    const recent = await getMostRecentCookieWithLoginname(
-      loginName,
-      organization,
-    );
-    return getSession(recent.id, recent.token).then((response) => {
-      if (response?.session) {
-        return response.session;
-      }
-    });
-  }
   const title = "Use your passkey to confirm it's really you";
   const description =
     "Your device will ask for your fingerprint, face, or screen lock";

apps/login/src/middleware.ts

@@ -18,7 +18,10 @@ 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}`);
+
+  // this is a workaround for the next.js server not forwarding the host header
+  requestHeaders.set("x-zitadel-instance-host", `${INSTANCE}`);
 
   const responseHeaders = new Headers();
   responseHeaders.set("Access-Control-Allow-Origin", "*");

apps/login/turbo.json

@@ -9,28 +9,32 @@
       "dependsOn": [
         "@zitadel/node#build",
         "@zitadel/client#build",
-        "@zitadel/react#build"
+        "@zitadel/react#build",
+        "@zitadel/next#build"
       ]
     },
     "test:integration": {
       "dependsOn": [
         "@zitadel/node#build",
         "@zitadel/client#build",
-        "@zitadel/react#build"
+        "@zitadel/react#build",
+        "@zitadel/next#build"
       ]
     },
     "test:unit": {
       "dependsOn": [
         "@zitadel/node#build",
         "@zitadel/client#build",
-        "@zitadel/react#build"
+        "@zitadel/react#build",
+        "@zitadel/next#build"
       ]
     },
     "test:watch": {
       "dependsOn": [
         "@zitadel/node#build",
         "@zitadel/client#build",
-        "@zitadel/react#build"
+        "@zitadel/react#build",
+        "@zitadel/next#build"
       ]
     }
   }