loginname as default page, overview page

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

@@ -0,0 +1,54 @@
+import { demos } from "@/lib/demos";
+import Link from "next/link";
+
+export default function Page() {
+  return (
+    <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 mb-10">
+      <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
+        <div className="space-y-8">
+          <h1 className="text-xl font-medium">Pages</h1>
+
+          <div className="space-y-10">
+            {demos.map((section) => {
+              return (
+                <div key={section.name} className="space-y-5">
+                  <div className="text-xs font-semibold uppercase tracking-wider text-gray-500">
+                    {section.name}
+                  </div>
+                  <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
+                    {section.items.map((item) => {
+                      return (
+                        <Link
+                          href={`/${item.slug}`}
+                          key={item.name}
+                          className="bg-background-light-400 dark:bg-background-dark-400 group block space-y-1.5 rounded-md px-5 py-3 hover:shadow-lg hover:dark:bg-white/10 border border-divider-light dark:border-divider-dark transition-all "
+                        >
+                          <div className="font-medium">{item.name}</div>
+
+                          {item.description ? (
+                            <div className="line-clamp-3 text-sm text-text-light-secondary-500 dark:text-text-dark-secondary-500">
+                              {item.description}
+                            </div>
+                          ) : null}
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <div className="flex flex-col">
+            <div className="mb-5 text-xs font-semibold uppercase tracking-wider text-gray-500">
+              Deploy your own on Vercel
+            </div>
+            <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzitadel%2Ftypescript&root-directory=apps/login&env=ZITADEL_API_URL,ZITADEL_SERVICE_USER_ID,ZITADEL_SERVICE_USER_TOKEN&envDescription=Setup%20a%20service%20account%20with%20IAM_OWNER%20membership%20on%20your%20instance%20and%20provide%20its%20id%20and%20personal%20access%20token.&project-name=zitadel-login&repository-name=zitadel-login">
+              <img src="https://vercel.com/button" alt="Deploy with Vercel" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/login/src/app/page.tsx

@@ -1,54 +1,6 @@
-import { demos } from "@/lib/demos";
+import { redirect } from "next/navigation";
-import Link from "next/link";
 
 export default function Page() {
-  return (
+  // automatically redirect to loginname
-    <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 mb-10">
+  redirect("/loginname");
-      <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
-        <div className="space-y-8">
-          <h1 className="text-xl font-medium">Pages</h1>
-
-          <div className="space-y-10">
-            {demos.map((section) => {
-              return (
-                <div key={section.name} className="space-y-5">
-                  <div className="text-xs font-semibold uppercase tracking-wider text-gray-500">
-                    {section.name}
-                  </div>
-                  <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
-                    {section.items.map((item) => {
-                      return (
-                        <Link
-                          href={`/${item.slug}`}
-                          key={item.name}
-                          className="bg-background-light-400 dark:bg-background-dark-400 group block space-y-1.5 rounded-md px-5 py-3 hover:shadow-lg hover:dark:bg-white/10 border border-divider-light dark:border-divider-dark transition-all "
-                        >
-                          <div className="font-medium">{item.name}</div>
-
-                          {item.description ? (
-                            <div className="line-clamp-3 text-sm text-text-light-secondary-500 dark:text-text-dark-secondary-500">
-                              {item.description}
-                            </div>
-                          ) : null}
-                        </Link>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-
-          <div className="flex flex-col">
-            <div className="mb-5 text-xs font-semibold uppercase tracking-wider text-gray-500">
-              Deploy your own on Vercel
-            </div>
-            <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzitadel%2Ftypescript&root-directory=apps/login&env=ZITADEL_API_URL,ZITADEL_SERVICE_USER_ID,ZITADEL_SERVICE_USER_TOKEN&envDescription=Setup%20a%20service%20account%20with%20IAM_OWNER%20membership%20on%20your%20instance%20and%20provide%20its%20id%20and%20personal%20access%20token.&project-name=zitadel-login&repository-name=zitadel-login">
-              <img src="https://vercel.com/button" alt="Deploy with Vercel" />
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
 }

apps/login/src/ui/LayoutProviders.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { ZitadelReactProvider } from "@zitadel/react";
 import { useTheme } from "next-themes";
 

apps/login/src/ui/SessionItem.tsx

@@ -55,32 +55,38 @@ export default function SessionItem({
   return (
     <Link
       href={
-        validUser
+        validUser && authRequestId
           ? `/login?` +
-            new URLSearchParams(
+            new URLSearchParams({
-              authRequestId
+              // loginName: session.factors?.user?.loginName as string,
-                ? {
+              sessionId: session.id,
-                    // loginName: session.factors?.user?.loginName as string,
+              authRequest: authRequestId,
-                    sessionId: session.id,
+            })
-                    authRequest: authRequestId,
+          : !validUser
-                  }
+            ? `/loginname?` +
-                : {
+              new URLSearchParams(
-                    loginName: session.factors?.user?.loginName as string,
+                authRequestId
-                  },
+                  ? {
-            )
+                      loginName: session.factors?.user?.loginName as string,
-          : `/loginname?` +
+                      submit: "true",
-            new URLSearchParams(
+                      authRequestId,
-              authRequestId
+                    }
-                ? {
+                  : {
-                    loginName: session.factors?.user?.loginName as string,
+                      loginName: session.factors?.user?.loginName as string,
-                    submit: "true",
+                      submit: "true",
-                    authRequestId,
+                    },
-                  }
+              )
-                : {
+            : "/signedin?" +
-                    loginName: session.factors?.user?.loginName as string,
+              new URLSearchParams(
-                    submit: "true",
+                authRequestId
-                  },
+                  ? {
-            )
+                      loginName: session.factors?.user?.loginName as string,
+                      authRequestId,
+                    }
+                  : {
+                      loginName: session.factors?.user?.loginName as string,
+                    },
+              )
       }
       className="group flex flex-row items-center bg-background-light-400 dark:bg-background-dark-400  border border-divider-light hover:shadow-lg dark:hover:bg-white/10 py-2 px-4 rounded-md transition-all"
     >