fetch authmethods on loginname page and redirect

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

@@ -1,19 +0,0 @@
-import { getLoginSettings, server } from "#/lib/zitadel";
-import UsernameForm from "#/ui/UsernameForm";
-
-export default async function Page({
-  params,
-}: {
-  params: { loginname: string };
-}) {
-  const login = await getLoginSettings(server);
-
-  return (
-    <div className="flex flex-col items-center space-y-4">
-      <h1>Welcome back!</h1>
-      <p className="ztdl-p">Enter your login data.</p>
-
-      <UsernameForm />
-    </div>
-  );
-}

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

@@ -1,12 +1,109 @@
+import {
+  createSession,
+  getLoginSettings,
+  listAuthenticationMethodTypes,
+  server,
+} from "#/lib/zitadel";
 import UsernameForm from "#/ui/UsernameForm";
+import { AuthenticationMethodType, Factors } from "@zitadel/server";
 
-export default function Page() {
+type SessionAuthMethods = {
-  return (
+  authMethodTypes: AuthenticationMethodType[];
-    <div className="flex flex-col items-center space-y-4">
+  sessionId: string;
-      <h1>Welcome back!</h1>
+  factors: Factors;
-      <p className="ztdl-p">Enter your login data.</p>
+};
 
-      <UsernameForm />
+async function updateCookie(loginName: string) {
-    </div>
+  const res = await fetch(
+    `${process.env.VERCEL_URL ?? "http://localhost:3000"}/session`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        loginName,
+      }),
+    }
   );
+
+  const response = await res.json();
+
+  if (!res.ok) {
+    console.log("damn");
+    return Promise.reject(response.details);
+  }
+  return response;
+}
+
+async function getSessionAndAuthMethods(
+  loginName: string,
+  domain: string
+): Promise<SessionAuthMethods> {
+  const createdSession = await createSession(
+    server,
+    loginName,
+    domain,
+    undefined,
+    undefined
+  );
+
+  if (createdSession) {
+    return updateCookie(loginName)
+      .then((resp) => {
+        return listAuthenticationMethodTypes(resp.factors.user.id)
+          .then((methods) => {
+            return {
+              authMethodTypes: methods.authMethodTypes,
+              sessionId: createdSession.sessionId,
+              factors: resp?.factors,
+            };
+          })
+          .catch((error) => {
+            throw "Could not get auth methods";
+          });
+      })
+      .catch((error) => {
+        console.log(error);
+        throw "Could not add session to cookie";
+      });
+  } else {
+    throw "Could not create session";
+  }
+}
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: Record<string | number | symbol, string | undefined>;
+}) {
+  const domain: string = process.env.VERCEL_URL ?? "localhost";
+
+  const loginName = searchParams?.loginName;
+  if (loginName) {
+    const login = await getLoginSettings(server);
+    console.log(login);
+    const sessionAndAuthMethods = await getSessionAndAuthMethods(
+      loginName,
+      domain
+    );
+    console.log(sessionAndAuthMethods);
+    return (
+      <div className="flex flex-col items-center space-y-4">
+        <h1>Welcome back!</h1>
+        <p className="ztdl-p">Enter your login data.</p>
+
+        <UsernameForm />
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex flex-col items-center space-y-4">
+        <h1>Welcome back!</h1>
+        <p className="ztdl-p">Enter your login data.</p>
+
+        <UsernameForm />
+      </div>
+    );
+  }
 }

apps/login/ui/UsernameForm.tsx

@@ -6,10 +6,6 @@ import { TextInput } from "./Input";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
-import {
-  ListAuthenticationMethodTypesResponse,
-  AuthenticationMethodType,
-} from "@zitadel/server";
 
 type Inputs = {
   loginName: string;
@@ -20,38 +16,30 @@ export default function UsernameForm() {
     mode: "onBlur",
   });
 
+  const router = useRouter();
+
   const [loading, setLoading] = useState<boolean>(false);
 
-  async function submitUsernameAndGetAuthenticationMethods(
+  function resubmitWithUsername(values: Inputs) {
-    values: Inputs
+    return router.push(
-  ): Promise<ListAuthenticationMethodTypesResponse> {
+      `/loginname?` + new URLSearchParams({ loginName: values.loginName })
-    setLoading(true);
-    const res = await fetch("/methods", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        loginName: values.loginName,
-      }),
-    });
-
-    setLoading(false);
-    if (!res.ok) {
-      throw new Error("Failed to load authentication methods");
-    }
-    return res.json();
-  }
-
-  function submitUsernameAndContinue(value: Inputs): Promise<boolean | void> {
-    return submitUsernameAndGetAuthenticationMethods(value).then(
-      ({ factors, sessionId, authMethodTypes }) => {
-        console.log(factors, sessionId, authMethodTypes);
-        if (authMethodTypes.length === 1) {
-        } else {
-        }
-      }
     );
+    // setLoading(true);
+    // const res = await fetch("/methods", {
+    //   method: "POST",
+    //   headers: {
+    //     "Content-Type": "application/json",
+    //   },
+    //   body: JSON.stringify({
+    //     loginName: values.loginName,
+    //   }),
+    // });
+
+    // setLoading(false);
+    // if (!res.ok) {
+    //   throw new Error("Failed to load authentication methods");
+    // }
+    // return res.json();
   }
 
   const { errors } = formState;
@@ -78,7 +66,7 @@ export default function UsernameForm() {
           className="self-end"
           variant={ButtonVariants.Primary}
           disabled={loading || !formState.isValid}
-          onClick={handleSubmit(submitUsernameAndContinue)}
+          onClick={handleSubmit(resubmitWithUsername)}
         >
           {loading && <Spinner className="h-5 w-5 mr-2" />}
           continue

apps/login/utils/cookies.ts

@@ -19,6 +19,7 @@ function setSessionHttpOnlyCookie(sessions: SessionCookie[]) {
     path: "/",
   });
 }
+
 export async function addSessionToCookie(session: SessionCookie): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -37,7 +38,9 @@ export async function addSessionToCookie(session: SessionCookie): Promise<any> {
     currentSessions = [...currentSessions, session];
   }
 
-  setSessionHttpOnlyCookie(currentSessions);
+  console.log(currentSessions);
+
+  return setSessionHttpOnlyCookie(currentSessions);
 }
 
 export async function updateSessionCookie(

packages/zitadel-server/src/index.ts

@@ -19,7 +19,10 @@ export {
   Challenges_Passkey,
 } from "./proto/server/zitadel/session/v2alpha/challenge";
 
-export { Session } from "./proto/server/zitadel/session/v2alpha/session";
+export {
+  Session,
+  Factors,
+} from "./proto/server/zitadel/session/v2alpha/session";
 export {
   ListSessionsResponse,
   GetSessionResponse,