login prompt, callback handler

apps/login/app/(login)/accounts/page.tsx

@@ -36,7 +36,16 @@ export default async function Page({
 
       <div className="flex flex-col w-full space-y-2">
         <SessionsList sessions={sessions} authRequestId={authRequestId} />
-        <Link href="/loginname">
+        <Link
+          href={
+            authRequestId
+              ? `/loginname?` +
+                new URLSearchParams({
+                  authRequestId,
+                })
+              : "/loginname"
+          }
+        >
           <div className="flex flex-row items-center py-3 px-4 hover:bg-black/10 dark:hover:bg-white/10 rounded-md transition-all">
             <div className="w-8 h-8 mr-4 flex flex-row justify-center items-center rounded-full bg-black/5 dark:bg-white/5">
               <UserPlusIcon className="h-5 w-5" />

apps/login/app/(login)/layout.tsx

@@ -5,8 +5,10 @@ import { Logo } from "#/ui/Logo";
 
 export default async function Layout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: any;
 }) {
   const branding = await getBrandingSettings(server);
   let partial: Partial<BrandingSettings> | undefined;

apps/login/app/(login)/login/route.ts

@@ -5,7 +5,7 @@ import {
   server,
 } from "#/lib/zitadel";
 import { SessionCookie, getAllSessions } from "#/utils/cookies";
-import { Session, AuthRequest, Prompt } from "@zitadel/server";
+import { Session, AuthRequest, Prompt, login } from "@zitadel/server";
 import { NextRequest, NextResponse } from "next/server";
 
 async function loadSessions(ids: string[]): Promise<Session[]> {
@@ -16,6 +16,8 @@ async function loadSessions(ids: string[]): Promise<Session[]> {
   return response?.sessions ?? [];
 }
 
+const ORG_SCOPE_REGEX = /urn:zitadel:iam:org:id:([0-9]+)/;
+
 function findSession(
   sessions: Session[],
   authRequest: AuthRequest
@@ -30,47 +32,144 @@ function findSession(
       (s) => s.factors?.user?.loginName === authRequest.loginHint
     );
   }
+  if (sessions.length) {
+    return sessions[0];
+  }
   return undefined;
 }
-
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
   const authRequestId = searchParams.get("authRequest");
+  const sessionId = searchParams.get("sessionId");
+
+  const sessionCookies: SessionCookie[] = await getAllSessions();
+  const ids = sessionCookies.map((s) => s.id);
+  let sessions: Session[] = [];
+  if (ids && ids.length) {
+    sessions = await loadSessions(ids);
+  }
+
+  if (authRequestId && sessionId) {
+    console.log(
+      `Login with session: ${sessionId} and authRequest: ${authRequestId}`
+    );
+
+    let selectedSession = sessions.find((s) => s.id === sessionId);
+
+    if (selectedSession && selectedSession.id) {
+      console.log(`Found session ${selectedSession.id}`);
+      const cookie = sessionCookies.find(
+        (cookie) => cookie.id === selectedSession?.id
+      );
+
+      if (cookie && cookie.id && cookie.token) {
+        console.log(`Found sessioncookie ${cookie.id}`);
+
+        const session = {
+          sessionId: cookie?.id,
+          sessionToken: cookie?.token,
+        };
+
+        const { callbackUrl } = await createCallback(server, {
+          authRequestId,
+          session,
+        });
+        return NextResponse.redirect(callbackUrl);
+      }
+    }
+  }
 
   if (authRequestId) {
+    console.log(`Login with authRequest: ${authRequestId}`);
     const { authRequest } = await getAuthRequest(server, { authRequestId });
-    const sessionCookies: SessionCookie[] = await getAllSessions();
-    const ids = sessionCookies.map((s) => s.id);
+    let organization;
 
-    let sessions: Session[] = [];
-    if (ids && ids.length) {
-      sessions = await loadSessions(ids);
-    } else {
-      console.info("No session cookie found.");
-      sessions = [];
+    if (
+      authRequest?.scope &&
+      authRequest.scope.find((s) => ORG_SCOPE_REGEX.test(s))
+    ) {
+      const orgId = authRequest.scope.find((s) => ORG_SCOPE_REGEX.test(s));
+
+      if (orgId) {
+        const matched = ORG_SCOPE_REGEX.exec(orgId);
+        organization = matched?.[1] ?? "";
+      }
+    }
+
+    if (authRequest && authRequest.prompt.includes(Prompt.PROMPT_CREATE)) {
+      const registerUrl = new URL("/register", request.url);
+      if (authRequest?.id) {
+        registerUrl.searchParams.set("authRequestId", authRequest?.id);
+      }
+      if (organization) {
+        registerUrl.searchParams.set("organization", organization);
+      }
+
+      return NextResponse.redirect(registerUrl);
     }
 
     // use existing session and hydrate it for oidc
     if (authRequest && sessions.length) {
       // if some accounts are available for selection and select_account is set
-      if (
-        authRequest &&
-        authRequest.prompt.includes(Prompt.PROMPT_SELECT_ACCOUNT)
-      ) {
+      if (authRequest.prompt.includes(Prompt.PROMPT_SELECT_ACCOUNT)) {
         const accountsUrl = new URL("/accounts", request.url);
         if (authRequest?.id) {
           accountsUrl.searchParams.set("authRequestId", authRequest?.id);
         }
+        if (organization) {
+          accountsUrl.searchParams.set("organization", organization);
+        }
 
         return NextResponse.redirect(accountsUrl);
+      } else if (authRequest.prompt.includes(Prompt.PROMPT_LOGIN)) {
+        // if prompt is login
+        const loginNameUrl = new URL("/loginname", request.url);
+        if (authRequest?.id) {
+          loginNameUrl.searchParams.set("authRequestId", authRequest?.id);
+        }
+        if (authRequest.loginHint) {
+          loginNameUrl.searchParams.set("loginName", authRequest.loginHint);
+        }
+        if (organization) {
+          loginNameUrl.searchParams.set("organization", organization);
+        }
+        return NextResponse.redirect(loginNameUrl);
+      } else if (authRequest.prompt.includes(Prompt.PROMPT_NONE)) {
+        // NONE prompt - silent authentication
+
+        let selectedSession = findSession(sessions, authRequest);
+
+        if (selectedSession && selectedSession.id) {
+          const cookie = sessionCookies.find(
+            (cookie) => cookie.id === selectedSession?.id
+          );
+
+          if (cookie && cookie.id && cookie.token) {
+            const session = {
+              sessionId: cookie?.id,
+              sessionToken: cookie?.token,
+            };
+            const { callbackUrl } = await createCallback(server, {
+              authRequestId,
+              session,
+            });
+            return NextResponse.redirect(callbackUrl);
+          } else {
+            return NextResponse.json(
+              { error: "No active session found" },
+              { status: 400 } // TODO: check for correct status code
+            );
+          }
+        } else {
+          return NextResponse.json(
+            { error: "No active session found" },
+            { status: 400 } // TODO: check for correct status code
+          );
+        }
       } else {
         // check for loginHint, userId hint sessions
         let selectedSession = findSession(sessions, authRequest);
 
-        // if (!selectedSession) {
-        //   selectedSession = sessions[0]; // TODO: remove
-        // }
-
         if (selectedSession && selectedSession.id) {
           const cookie = sessionCookies.find(
             (cookie) => cookie.id === selectedSession?.id
@@ -88,35 +187,40 @@ export async function GET(request: NextRequest) {
             return NextResponse.redirect(callbackUrl);
           } else {
             const accountsUrl = new URL("/accounts", request.url);
-            if (authRequest?.id) {
-              accountsUrl.searchParams.set("authRequestId", authRequest?.id);
+            accountsUrl.searchParams.set("authRequestId", authRequestId);
+            if (organization) {
+              accountsUrl.searchParams.set("organization", organization);
             }
-
             return NextResponse.redirect(accountsUrl);
           }
         } else {
           const accountsUrl = new URL("/accounts", request.url);
-          if (authRequest?.id) {
-            accountsUrl.searchParams.set("authRequestId", authRequest?.id);
+          accountsUrl.searchParams.set("authRequestId", authRequestId);
+          if (organization) {
+            accountsUrl.searchParams.set("organization", organization);
           }
-
           return NextResponse.redirect(accountsUrl);
-          // return NextResponse.error();
         }
       }
     } else {
       const loginNameUrl = new URL("/loginname", request.url);
-      if (authRequest?.id) {
-        loginNameUrl.searchParams.set("authRequestId", authRequest?.id);
-        if (authRequest.loginHint) {
-          loginNameUrl.searchParams.set("loginName", authRequest.loginHint);
-          loginNameUrl.searchParams.set("submit", "true"); // autosubmit
-        }
+
+      loginNameUrl.searchParams.set("authRequestId", authRequestId);
+      if (authRequest?.loginHint) {
+        loginNameUrl.searchParams.set("loginName", authRequest.loginHint);
+        loginNameUrl.searchParams.set("submit", "true"); // autosubmit
+      }
+
+      if (organization) {
+        loginNameUrl.searchParams.set("organization", organization);
       }
 
       return NextResponse.redirect(loginNameUrl);
     }
   } else {
-    return NextResponse.error();
+    return NextResponse.json(
+      { error: "No authRequestId provided" },
+      { status: 500 }
+    );
   }
 }

apps/login/app/(login)/loginname/page.tsx

@@ -8,9 +8,10 @@ export default async function Page({
 }) {
   const loginName = searchParams?.loginName;
   const authRequestId = searchParams?.authRequestId;
+  const organization = searchParams?.organization;
   const submit: boolean = searchParams?.submit === "true";
 
-  const loginSettings = await getLoginSettings(server);
+  const loginSettings = await getLoginSettings(server, organization);
 
   return (
     <div className="flex flex-col items-center space-y-4">
@@ -21,6 +22,7 @@ export default async function Page({
         loginSettings={loginSettings}
         loginName={loginName}
         authRequestId={authRequestId}
+        organization={organization}
         submit={submit}
       />
     </div>

apps/login/app/api/loginname/route.ts

@@ -1,12 +1,15 @@
-import { listAuthenticationMethodTypes } from "#/lib/zitadel";
+import { listAuthenticationMethodTypes, listUsers } from "#/lib/zitadel";
 import { createSessionAndUpdateCookie } from "#/utils/session";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   const body = await request.json();
   if (body) {
-    const { loginName, authRequestId } = body;
-
+    const { loginName, authRequestId, organization } = body;
+    // TODO - search for users with org
+    // return listUsers(loginName).then((users) => {
+    //   if (users.details && users.details.totalResult == 1) {
+    //   }
     return createSessionAndUpdateCookie(
       loginName,
       undefined,
@@ -33,6 +36,7 @@ export async function POST(request: NextRequest) {
       .catch((error) => {
         return NextResponse.json(error, { status: 500 });
       });
+    // });
   } else {
     return NextResponse.error();
   }

apps/login/app/layout.tsx

@@ -9,6 +9,7 @@ import { getBrandingSettings } from "#/lib/zitadel";
 import { server } from "../lib/zitadel";
 import { BrandingSettings } from "@zitadel/server";
 import ThemeProvider from "#/ui/ThemeProvider";
+import Theme from "#/ui/Theme";
 
 const lato = Lato({
   weight: ["400", "700", "900"],
@@ -23,7 +24,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   // later only shown with dev mode enabled
-  const showNav = true;
+  const showNav = process.env.DEBUG === "true";
 
   const branding = await getBrandingSettings(server);
   let partial: Partial<BrandingSettings> | undefined;
@@ -44,11 +45,27 @@ export default async function RootLayout({
         <ThemeWrapper branding={partial}>
           <ThemeProvider>
             <LayoutProviders>
-              <div className="h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600  bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
-                {showNav && <GlobalNav />}
+              <div
+                className={`h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 ${
+                  showNav
+                    ? "bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]"
+                    : ""
+                }`}
+              >
+                {showNav ? (
+                  <GlobalNav />
+                ) : (
+                  <div className="absolute bottom-0 right-0 flex flex-row p-4">
+                    <Theme />
+                  </div>
+                )}
 
-                <div className={`${showNav ? "lg:pl-72" : ""} pb-4`}>
-                  <div className="mx-auto max-w-[440px] space-y-8 pt-20 lg:py-8">
+                <div
+                  className={`${
+                    showNav ? "lg:pl-72" : ""
+                  } pb-4 flex flex-col justify-center h-full`}
+                >
+                  <div className="mx-auto max-w-[440px] space-y-8 pt-20 lg:py-8 w-full">
                     {showNav && (
                       <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
                         <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">