Merge pull request #68 from yordis/chore-app-dir-org

chore: move app code into src dir

.github/workflows/test.yml

@@ -30,10 +30,10 @@ jobs:
         with:
           version: 8
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - uses: pnpm/action-setup@v2
         name: Install pnpm

apps/login/__test__/PasswordComplexity.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, waitFor, within } from "@testing-library/react";
-import PasswordComplexity from "../ui/PasswordComplexity";
+import PasswordComplexity from "@/ui/PasswordComplexity";
 // TODO: Why does this not compile?
 // import { ResourceOwnerType } from '@zitadel/server';
 
@@ -30,14 +30,14 @@ describe("<PasswordComplexity/>", () => {
               requiresSymbol: false,
               resourceOwnerType: 0, // ResourceOwnerType.RESOURCE_OWNER_TYPE_UNSPECIFIED,
             }}
-          />
+          />,
         );
       });
       if (expectSVGTitle === false) {
         it(`should not render the feedback element`, async () => {
           await waitFor(() => {
             expect(
-              screen.queryByText(feedbackElementLabel)
+              screen.queryByText(feedbackElementLabel),
             ).not.toBeInTheDocument();
           });
         });
@@ -46,12 +46,12 @@ describe("<PasswordComplexity/>", () => {
           await waitFor(async () => {
             const svg = within(
               screen.getByText(feedbackElementLabel)
-                .parentElement as HTMLElement
+                .parentElement as HTMLElement,
             ).findByRole("img");
             expect(await svg).toHaveTextContent(expectSVGTitle);
           });
         });
       }
-    }
+    },
   );
 });

apps/login/cypress/integration/login.cy.ts

@@ -111,7 +111,7 @@ describe("login", () => {
         cy.get('button[type="submit"]').click();
         cy.location("pathname", { timeout: 10_000 }).should(
           "eq",
-          "/passkey/add"
+          "/passkey/add",
         );
       });
     });
@@ -160,7 +160,7 @@ describe("login", () => {
       cy.visit("/loginname?loginName=john%40zitadel.com&submit=true");
       cy.location("pathname", { timeout: 10_000 }).should(
         "eq",
-        "/passkey/login"
+        "/passkey/login",
       );
     });
   });

apps/login/package.json

@@ -54,6 +54,7 @@
     "tinycolor2": "1.4.2"
   },
   "devDependencies": {
+    "@zitadel/prettier-config": "workspace:*",
     "@bufbuild/buf": "^1.14.0",
     "@jest/types": "^29.5.0",
     "@testing-library/jest-dom": "^5.16.5",

apps/login/prettier.config.mjs

@@ -0,0 +1 @@
+export { default } from "@zitadel/prettier-config";

apps/login/readme.md

@@ -1,11 +1,11 @@
 # ZITADEL Login UI
 
-This is going to be our next UI for the hosted login. It's based on Next.js 13 and its introduced `app/` directory.
+This is going to be our next UI for the hosted login. It's based on Next.js 13 and its introduced `app/` directory.
 
 The Login UI should provide the following functionality:
 
-- **Login API:** Uses the new ZITADEL Login API
+- **Login API:** Uses the new ZITADEL Login API
-- **Server Components:** Making server-first components
+- **Server Components:** Making server-first components
 
 ## Running Locally
 

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

@@ -1,10 +1,10 @@
 import { Session } from "@zitadel/server";
-import { getBrandingSettings, listSessions, server } from "#/lib/zitadel";
+import { getBrandingSettings, listSessions, server } from "@/lib/zitadel";
-import { getAllSessionCookieIds } from "#/utils/cookies";
+import { getAllSessionCookieIds } from "@/utils/cookies";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
-import SessionsList from "#/ui/SessionsList";
+import SessionsList from "@/ui/SessionsList";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
 
 async function loadSessions(): Promise<Session[]> {
   const ids = await getAllSessionCookieIds();
@@ -12,7 +12,7 @@ async function loadSessions(): Promise<Session[]> {
   if (ids && ids.length) {
     const response = await listSessions(
       server,
-      ids.filter((id: string | undefined) => !!id)
+      ids.filter((id: string | undefined) => !!id),
     );
     return response?.sessions ?? [];
   } else {

apps/login/src/app/(login)/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Boundary } from "#/ui/Boundary";
+import { Boundary } from "@/ui/Boundary";
-import { Button } from "#/ui/Button";
+import { Button } from "@/ui/Button";
 import React from "react";
 
 export default function Error({ error, reset }: any) {

apps/login/src/app/(login)/idp/[provider]/failure/page.tsx

@@ -1,8 +1,8 @@
-import { ProviderSlug } from "#/lib/demos";
+import { ProviderSlug } from "@/lib/demos";
-import { getBrandingSettings, server } from "#/lib/zitadel";
+import { getBrandingSettings, server } from "@/lib/zitadel";
-import Alert, { AlertType } from "#/ui/Alert";
+import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import IdpSignin from "#/ui/IdpSignin";
+import IdpSignin from "@/ui/IdpSignin";
 import {
   AddHumanUserRequest,
   IDPInformation,

apps/login/src/app/(login)/idp/[provider]/success/page.tsx

@@ -1,8 +1,8 @@
-import { ProviderSlug } from "#/lib/demos";
+import { ProviderSlug } from "@/lib/demos";
-import { getBrandingSettings, server } from "#/lib/zitadel";
+import { getBrandingSettings, server } from "@/lib/zitadel";
-import Alert, { AlertType } from "#/ui/Alert";
+import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import IdpSignin from "#/ui/IdpSignin";
+import IdpSignin from "@/ui/IdpSignin";
 import {
   AddHumanUserRequest,
   IDPInformation,
@@ -63,18 +63,18 @@ const PROVIDER_MAPPING: {
 
 function retrieveIDPIntent(
   id: string,
-  token: string
+  token: string,
 ): Promise<RetrieveIdentityProviderIntentResponse> {
   const userService = user.getUser(server);
   return userService.retrieveIdentityProviderIntent(
     { idpIntentId: id, idpIntentToken: token },
-    {}
+    {},
   );
 }
 
 function createUser(
   provider: ProviderSlug,
-  info: IDPInformation
+  info: IDPInformation,
 ): Promise<string> {
   const userData = PROVIDER_MAPPING[provider](info);
   const userService = user.getUser(server);

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

@@ -2,9 +2,9 @@ import {
   getBrandingSettings,
   getLegalAndSupportSettings,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import { SignInWithIDP } from "#/ui/SignInWithIDP";
+import { SignInWithIDP } from "@/ui/SignInWithIDP";
 import {
   GetActiveIdentityProvidersResponse,
   IdentityProvider,
@@ -14,13 +14,13 @@ import {
 
 function getIdentityProviders(
   server: ZitadelServer,
-  orgId?: string
+  orgId?: string,
 ): Promise<IdentityProvider[] | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
     .getActiveIdentityProviders(
       orgId ? { ctx: { orgId } } : { ctx: { instance: true } },
-      {}
+      {},
     )
     .then((resp: GetActiveIdentityProvidersResponse) => {
       return resp.identityProviders;

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

@@ -3,10 +3,10 @@ import {
   getLegalAndSupportSettings,
   getLoginSettings,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import { SignInWithIDP } from "#/ui/SignInWithIDP";
+import { SignInWithIDP } from "@/ui/SignInWithIDP";
-import UsernameForm from "#/ui/UsernameForm";
+import UsernameForm from "@/ui/UsernameForm";
 import {
   GetActiveIdentityProvidersResponse,
   IdentityProvider,
@@ -16,13 +16,13 @@ import {
 
 function getIdentityProviders(
   server: ZitadelServer,
-  orgId?: string
+  orgId?: string,
 ): Promise<IdentityProvider[] | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
     .getActiveIdentityProviders(
       orgId ? { ctx: { orgId } } : { ctx: { instance: true } },
-      {}
+      {},
     )
     .then((resp: GetActiveIdentityProvidersResponse) => {
       return resp.identityProviders;

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

@@ -3,15 +3,15 @@ import {
   getSession,
   listAuthenticationMethodTypes,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import ChooseSecondFactor from "#/ui/ChooseSecondFactor";
+import ChooseSecondFactor from "@/ui/ChooseSecondFactor";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
 import {
   getMostRecentCookieWithLoginname,
   getSessionCookieById,
-} from "#/utils/cookies";
+} from "@/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -27,16 +27,16 @@ export default async function Page({
 
   async function loadSessionByLoginname(
     loginName?: string,
-    organization?: string
+    organization?: string,
   ) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session && response.session.factors?.user?.id) {
         return listAuthenticationMethodTypes(
-          response.session.factors.user.id
+          response.session.factors.user.id,
         ).then((methods) => {
           return {
             factors: response.session?.factors,
@@ -52,7 +52,7 @@ export default async function Page({
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session && response.session.factors?.user?.id) {
         return listAuthenticationMethodTypes(
-          response.session.factors.user.id
+          response.session.factors.user.id,
         ).then((methods) => {
           return {
             factors: response.session?.factors,

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

@@ -5,15 +5,15 @@ import {
   getUserByID,
   listAuthenticationMethodTypes,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import ChooseSecondFactorToSetup from "#/ui/ChooseSecondFactorToSetup";
+import ChooseSecondFactorToSetup from "@/ui/ChooseSecondFactorToSetup";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
 import {
   getMostRecentCookieWithLoginname,
   getSessionCookieById,
-} from "#/utils/cookies";
+} from "@/utils/cookies";
 import { user } from "@zitadel/server";
 
 export default async function Page({
@@ -30,11 +30,11 @@ export default async function Page({
 
   async function loadSessionByLoginname(
     loginName?: string,
-    organization?: string
+    organization?: string,
   ) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session && response.session.factors?.user?.id) {

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

@@ -3,12 +3,12 @@ import {
   getLoginSettings,
   getSession,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import LoginOTP from "#/ui/LoginOTP";
+import LoginOTP from "@/ui/LoginOTP";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -29,7 +29,7 @@ export default async function Page({
   async function loadSession(loginName?: string, organization?: string) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
 
     return getSession(server, recent.id, recent.token).then((response) => {

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

@@ -5,14 +5,14 @@ import {
   getSession,
   registerTOTP,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import { Button, ButtonVariants } from "#/ui/Button";
+import { Button, ButtonVariants } from "@/ui/Button";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import { Spinner } from "#/ui/Spinner";
+import { Spinner } from "@/ui/Spinner";
-import TOTPRegister from "#/ui/TOTPRegister";
+import TOTPRegister from "@/ui/TOTPRegister";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 import { RegisterTOTPResponse } from "@zitadel/server";
 import Link from "next/link";
 import { ClientError } from "nice-grpc";
@@ -60,7 +60,7 @@ export default async function Page({
   async function loadSession(loginName?: string, organization?: string) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
 
     return getSession(server, recent.id, recent.token).then((response) => {
@@ -149,8 +149,8 @@ export default async function Page({
               {method === "email"
                 ? "Code via email was successfully added."
                 : method === "sms"
-                ? "Code via SMS was successfully added."
+                  ? "Code via SMS was successfully added."
-                : ""}
+                  : ""}
             </p>
 
             <div className="mt-8 flex w-full flex-row items-center">

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

@@ -1,9 +1,9 @@
-import { getBrandingSettings, getSession, server } from "#/lib/zitadel";
+import { getBrandingSettings, getSession, server } from "@/lib/zitadel";
-import Alert, { AlertType } from "#/ui/Alert";
+import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterPasskey from "#/ui/RegisterPasskey";
+import RegisterPasskey from "@/ui/RegisterPasskey";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -18,7 +18,7 @@ export default async function Page({
   async function loadSession(loginName?: string) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session) {

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

@@ -1,12 +1,12 @@
-import { getBrandingSettings, getSession, server } from "#/lib/zitadel";
+import { getBrandingSettings, getSession, server } from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import LoginPasskey from "#/ui/LoginPasskey";
+import LoginPasskey from "@/ui/LoginPasskey";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
 import {
   getMostRecentCookieWithLoginname,
   getSessionCookieById,
-} from "#/utils/cookies";
+} from "@/utils/cookies";
 
 const title = "Authenticate with a passkey";
 const description =
@@ -26,11 +26,11 @@ export default async function Page({
 
   async function loadSessionByLoginname(
     loginName?: string,
-    organization?: string
+    organization?: string,
   ) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session) {

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

@@ -3,12 +3,12 @@ import {
   getLoginSettings,
   getSession,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import PasswordForm from "#/ui/PasswordForm";
+import PasswordForm from "@/ui/PasswordForm";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -22,7 +22,7 @@ export default async function Page({
   async function loadSession(loginName?: string, organization?: string) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
 
     return getSession(server, recent.id, recent.token).then((response) => {

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

@@ -3,10 +3,10 @@ import {
   getLegalAndSupportSettings,
   getPasswordComplexitySettings,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterFormWithoutPassword from "#/ui/RegisterFormWithoutPassword";
+import RegisterFormWithoutPassword from "@/ui/RegisterFormWithoutPassword";
-import SetPasswordForm from "#/ui/SetPasswordForm";
+import SetPasswordForm from "@/ui/SetPasswordForm";
 
 export default async function Page({
   searchParams,
@@ -21,7 +21,7 @@ export default async function Page({
   const legal = await getLegalAndSupportSettings(server, organization);
   const passwordComplexitySettings = await getPasswordComplexitySettings(
     server,
-    organization
+    organization,
   );
 
   const branding = await getBrandingSettings(server, organization);

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

@@ -3,10 +3,10 @@ import {
   getBrandingSettings,
   getSession,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 import { redirect } from "next/navigation";
 
 async function loadSession(loginName: string, authRequestId?: string) {

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

@@ -3,15 +3,15 @@ import {
   getLoginSettings,
   getSession,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import LoginPasskey from "#/ui/LoginPasskey";
+import LoginPasskey from "@/ui/LoginPasskey";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
 import {
   getMostRecentCookieWithLoginname,
   getSessionCookieById,
-} from "#/utils/cookies";
+} from "@/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -30,11 +30,11 @@ export default async function Page({
 
   async function loadSessionByLoginname(
     loginName?: string,
-    organization?: string
+    organization?: string,
   ) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session) {

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

@@ -1,10 +1,10 @@
-import { getBrandingSettings, getSession, server } from "#/lib/zitadel";
+import { getBrandingSettings, getSession, server } from "@/lib/zitadel";
-import Alert, { AlertType } from "#/ui/Alert";
+import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterPasskey from "#/ui/RegisterPasskey";
+import RegisterPasskey from "@/ui/RegisterPasskey";
-import RegisterU2F from "#/ui/RegisterU2F";
+import RegisterU2F from "@/ui/RegisterU2F";
-import UserAvatar from "#/ui/UserAvatar";
+import UserAvatar from "@/ui/UserAvatar";
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 
 export default async function Page({
   searchParams,
@@ -18,7 +18,7 @@ export default async function Page({
   async function loadSession(loginName?: string) {
     const recent = await getMostRecentCookieWithLoginname(
       loginName,
-      organization
+      organization,
     );
     return getSession(server, recent.id, recent.token).then((response) => {
       if (response?.session) {

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

@@ -1,6 +1,6 @@
-import { getBrandingSettings, server } from "#/lib/zitadel";
+import { getBrandingSettings, server } from "@/lib/zitadel";
-import DynamicTheme from "#/ui/DynamicTheme";
+import DynamicTheme from "@/ui/DynamicTheme";
-import VerifyEmailForm from "#/ui/VerifyEmailForm";
+import VerifyEmailForm from "@/ui/VerifyEmailForm";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 export default async function Page({ searchParams }: { searchParams: any }) {

apps/login/src/app/api/idp/start/route.ts

@@ -1,4 +1,4 @@
-import { server, startIdentityProviderFlow } from "#/lib/zitadel";
+import { server, startIdentityProviderFlow } from "@/lib/zitadel";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {

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

@@ -1,5 +1,5 @@
-import { listAuthenticationMethodTypes, listUsers } from "#/lib/zitadel";
+import { listAuthenticationMethodTypes, listUsers } from "@/lib/zitadel";
-import { createSessionForUserIdAndUpdateCookie } from "#/utils/session";
+import { createSessionForUserIdAndUpdateCookie } from "@/utils/session";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
@@ -17,7 +17,7 @@ export async function POST(request: NextRequest) {
           userId,
           undefined,
           undefined,
-          authRequestId
+          authRequestId,
         )
           .then((session) => {
             if (session.factors?.user?.id) {
@@ -43,7 +43,7 @@ export async function POST(request: NextRequest) {
       } else {
         return NextResponse.json(
           { message: "Could not find user" },
-          { status: 404 }
+          { status: 404 },
         );
       }
     });

apps/login/src/app/api/otp/set/route.ts

@@ -3,8 +3,8 @@ import {
   getMostRecentSessionCookie,
   getSessionCookieById,
   getSessionCookieByLoginName,
-} from "#/utils/cookies";
+} from "@/utils/cookies";
-import { setSessionAndUpdateCookie } from "#/utils/session";
+import { setSessionAndUpdateCookie } from "@/utils/session";
 import { Checks } from "@zitadel/server";
 import { NextRequest, NextResponse, userAgent } from "next/server";
 
@@ -20,12 +20,14 @@ export async function POST(request: NextRequest) {
           return Promise.reject(error);
         })
       : loginName
-      ? getSessionCookieByLoginName(loginName, organization).catch((error) => {
+        ? getSessionCookieByLoginName(loginName, organization).catch(
-          return Promise.reject(error);
+            (error) => {
-        })
+              return Promise.reject(error);
-      : getMostRecentSessionCookie().catch((error) => {
+            },
-          return Promise.reject(error);
+          )
-        });
+        : getMostRecentSessionCookie().catch((error) => {
+            return Promise.reject(error);
+          });
 
     return recentPromise
       .then((recent) => {
@@ -49,7 +51,7 @@ export async function POST(request: NextRequest) {
           recent,
           checks,
           undefined,
-          authRequestId
+          authRequestId,
         ).then((session) => {
           return NextResponse.json({
             sessionId: session.id,
@@ -64,7 +66,7 @@ export async function POST(request: NextRequest) {
   } else {
     return NextResponse.json(
       { details: "Request body is missing" },
-      { status: 400 }
+      { status: 400 },
     );
   }
 }

apps/login/src/app/api/passkeys/route.ts

@@ -3,8 +3,8 @@ import {
   getSession,
   registerPasskey,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import { getSessionCookieById } from "#/utils/cookies";
+import { getSessionCookieById } from "@/utils/cookies";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
@@ -17,7 +17,7 @@ export async function POST(request: NextRequest) {
     const session = await getSession(
       server,
       sessionCookie.id,
-      sessionCookie.token
+      sessionCookie.token,
     );
 
     const domain: string = request.nextUrl.hostname;
@@ -40,7 +40,7 @@ export async function POST(request: NextRequest) {
     } else {
       return NextResponse.json(
         { details: "could not get session" },
-        { status: 500 }
+        { status: 500 },
       );
     }
   } else {

apps/login/src/app/api/passkeys/verify/route.ts

@@ -1,5 +1,5 @@
-import { getSession, server, verifyPasskeyRegistration } from "#/lib/zitadel";
+import { getSession, server, verifyPasskeyRegistration } from "@/lib/zitadel";
-import { getSessionCookieById } from "#/utils/cookies";
+import { getSessionCookieById } from "@/utils/cookies";
 import { NextRequest, NextResponse, userAgent } from "next/server";
 
 export async function POST(request: NextRequest) {
@@ -18,7 +18,7 @@ export async function POST(request: NextRequest) {
     const session = await getSession(
       server,
       sessionCookie.id,
-      sessionCookie.token
+      sessionCookie.token,
     );
 
     const userId = session?.session?.factors?.user?.id;
@@ -29,7 +29,7 @@ export async function POST(request: NextRequest) {
         passkeyId,
         passkeyName,
         publicKeyCredential,
-        userId
+        userId,
       )
         .then((resp) => {
           return NextResponse.json(resp);
@@ -40,7 +40,7 @@ export async function POST(request: NextRequest) {
     } else {
       return NextResponse.json(
         { details: "could not get session" },
-        { status: 500 }
+        { status: 500 },
       );
     }
   } else {

apps/login/src/app/api/registeruser/route.ts

@@ -1,8 +1,8 @@
-import { addHumanUser, server } from "#/lib/zitadel";
+import { addHumanUser, server } from "@/lib/zitadel";
 import {
   createSessionAndUpdateCookie,
   createSessionForUserIdAndUpdateCookie,
-} from "#/utils/session";
+} from "@/utils/session";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
@@ -29,7 +29,7 @@ export async function POST(request: NextRequest) {
           user.userId,
           password,
           undefined,
-          authRequestId
+          authRequestId,
         ).then((session) => {
           return NextResponse.json({
             userId: user.userId,

apps/login/src/app/api/resendverifyemail/route.ts

@@ -1,4 +1,4 @@
-import { setEmail, server } from "#/lib/zitadel";
+import { setEmail, server } from "@/lib/zitadel";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {

apps/login/src/app/api/session/route.ts

@@ -4,19 +4,19 @@ import {
   getSession,
   getUserByID,
   listAuthenticationMethodTypes,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
 import {
   SessionCookie,
   getMostRecentSessionCookie,
   getSessionCookieById,
   getSessionCookieByLoginName,
   removeSessionFromCookie,
-} from "#/utils/cookies";
+} from "@/utils/cookies";
 import {
   createSessionAndUpdateCookie,
   createSessionForIdpAndUpdateCookie,
   setSessionAndUpdateCookie,
-} from "#/utils/session";
+} from "@/utils/session";
 import { Challenges, Checks, RequestChallenges } from "@zitadel/server";
 import { NextRequest, NextResponse } from "next/server";
 
@@ -37,7 +37,7 @@ export async function POST(request: NextRequest) {
         userId,
         idpIntent,
         organization,
-        authRequestId
+        authRequestId,
       ).then((session) => {
         return NextResponse.json(session);
       });
@@ -47,7 +47,7 @@ export async function POST(request: NextRequest) {
         password,
         undefined,
         organization,
-        authRequestId
+        authRequestId,
       ).then((session) => {
         return NextResponse.json(session);
       });
@@ -55,7 +55,7 @@ export async function POST(request: NextRequest) {
   } else {
     return NextResponse.json(
       { details: "Session could not be created" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
@@ -83,12 +83,14 @@ export async function PUT(request: NextRequest) {
           return Promise.reject(error);
         })
       : loginName
-      ? getSessionCookieByLoginName(loginName, organization).catch((error) => {
+        ? getSessionCookieByLoginName(loginName, organization).catch(
-          return Promise.reject(error);
+            (error) => {
-        })
+              return Promise.reject(error);
-      : getMostRecentSessionCookie().catch((error) => {
+            },
-          return Promise.reject(error);
+          )
-        });
+        : getMostRecentSessionCookie().catch((error) => {
+            return Promise.reject(error);
+          });
 
     const domain: string = request.nextUrl.hostname;
 
@@ -105,11 +107,11 @@ export async function PUT(request: NextRequest) {
           const sessionResponse = await getSession(
             server,
             recent.id,
-            recent.token
+            recent.token,
           );
           if (sessionResponse && sessionResponse.session?.factors?.user?.id) {
             const userResponse = await getUserByID(
-              sessionResponse.session.factors.user.id
+              sessionResponse.session.factors.user.id,
             );
             if (
               challenges.otpEmail === "" &&
@@ -131,13 +133,13 @@ export async function PUT(request: NextRequest) {
           recent,
           checks,
           challenges,
-          authRequestId
+          authRequestId,
         ).then(async (session) => {
           // if password, check if user has MFA methods
           let authMethods;
           if (checks && checks.password && session.factors?.user?.id) {
             const response = await listAuthenticationMethodTypes(
-              session.factors?.user?.id
+              session.factors?.user?.id,
             );
             if (response.authMethodTypes && response.authMethodTypes.length) {
               authMethods = response.authMethodTypes;
@@ -159,7 +161,7 @@ export async function PUT(request: NextRequest) {
   } else {
     return NextResponse.json(
       { details: "Request body is missing" },
-      { status: 400 }
+      { status: 400 },
     );
   }
 }
@@ -183,14 +185,14 @@ export async function DELETE(request: NextRequest) {
           .catch((error) => {
             return NextResponse.json(
               { details: "could not set cookie" },
-              { status: 500 }
+              { status: 500 },
             );
           });
       })
       .catch((error) => {
         return NextResponse.json(
           { details: "could not delete session" },
-          { status: 500 }
+          { status: 500 },
         );
       });
   } else {

apps/login/src/app/api/u2f/route.ts

@@ -4,8 +4,8 @@ import {
   registerPasskey,
   registerU2F,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import { getSessionCookieById } from "#/utils/cookies";
+import { getSessionCookieById } from "@/utils/cookies";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
@@ -18,7 +18,7 @@ export async function POST(request: NextRequest) {
     const session = await getSession(
       server,
       sessionCookie.id,
-      sessionCookie.token
+      sessionCookie.token,
     );
 
     const domain: string = request.nextUrl.hostname;
@@ -37,7 +37,7 @@ export async function POST(request: NextRequest) {
     } else {
       return NextResponse.json(
         { details: "could not get session" },
-        { status: 500 }
+        { status: 500 },
       );
     }
   } else {

apps/login/src/app/api/u2f/verify/route.ts

@@ -1,5 +1,5 @@
-import { getSession, server, verifyU2FRegistration } from "#/lib/zitadel";
+import { getSession, server, verifyU2FRegistration } from "@/lib/zitadel";
-import { getSessionCookieById } from "#/utils/cookies";
+import { getSessionCookieById } from "@/utils/cookies";
 import { VerifyU2FRegistrationRequest } from "@zitadel/server";
 import { NextRequest, NextResponse, userAgent } from "next/server";
 
@@ -19,7 +19,7 @@ export async function POST(request: NextRequest) {
     const session = await getSession(
       server,
       sessionCookie.id,
-      sessionCookie.token
+      sessionCookie.token,
     );
 
     const userId = session?.session?.factors?.user?.id;
@@ -41,7 +41,7 @@ export async function POST(request: NextRequest) {
     } else {
       return NextResponse.json(
         { details: "could not get session" },
-        { status: 500 }
+        { status: 500 },
       );
     }
   } else {

apps/login/src/app/api/verifyemail/route.ts

@@ -1,4 +1,4 @@
-import { server, verifyEmail } from "#/lib/zitadel";
+import { server, verifyEmail } from "@/lib/zitadel";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {

apps/login/src/app/layout.tsx

@@ -1,15 +1,15 @@
-import "#/styles/globals.scss";
+import "@/styles/globals.scss";
-import { AddressBar } from "#/ui/AddressBar";
+import { AddressBar } from "@/ui/AddressBar";
-import { GlobalNav } from "#/ui/GlobalNav";
+import { GlobalNav } from "@/ui/GlobalNav";
 import { Lato } from "next/font/google";
-import { LayoutProviders } from "#/ui/LayoutProviders";
+import { LayoutProviders } from "@/ui/LayoutProviders";
 import { Analytics } from "@vercel/analytics/react";
-import ThemeWrapper from "#/ui/ThemeWrapper";
+import ThemeWrapper from "@/ui/ThemeWrapper";
-import { getBrandingSettings } from "#/lib/zitadel";
+import { getBrandingSettings } from "@/lib/zitadel";
 import { server } from "../lib/zitadel";
 import { BrandingSettings } from "@zitadel/server";
-import ThemeProvider from "#/ui/ThemeProvider";
+import ThemeProvider from "@/ui/ThemeProvider";
-import Theme from "#/ui/Theme";
+import Theme from "@/ui/Theme";
 
 const lato = Lato({
   weight: ["400", "700", "900"],

apps/login/src/app/login/route.ts

@@ -4,15 +4,15 @@ import {
   getOrgByDomain,
   listSessions,
   server,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
-import { SessionCookie, getAllSessions } from "#/utils/cookies";
+import { SessionCookie, getAllSessions } from "@/utils/cookies";
 import { Session, AuthRequest, Prompt } from "@zitadel/server";
 import { NextRequest, NextResponse } from "next/server";
 
 async function loadSessions(ids: string[]): Promise<Session[]> {
   const response = await listSessions(
     server,
-    ids.filter((id: string | undefined) => !!id)
+    ids.filter((id: string | undefined) => !!id),
   );
 
   return response?.sessions ?? [];
@@ -23,7 +23,7 @@ const ORG_DOMAIN_SCOPE_REGEX = /urn:zitadel:iam:org:domain:primary:(.+)/; // TOD
 
 function findSession(
   sessions: Session[],
-  authRequest: AuthRequest
+  authRequest: AuthRequest,
 ): Session | undefined {
   if (authRequest.hintUserId) {
     console.log(`find session for hintUserId: ${authRequest.hintUserId}`);
@@ -32,7 +32,7 @@ function findSession(
   if (authRequest.loginHint) {
     console.log(`find session for loginHint: ${authRequest.loginHint}`);
     return sessions.find(
-      (s) => s.factors?.user?.loginName === authRequest.loginHint
+      (s) => s.factors?.user?.loginName === authRequest.loginHint,
     );
   }
   if (sessions.length) {
@@ -62,7 +62,7 @@ export async function GET(request: NextRequest) {
 
   if (authRequestId && sessionId) {
     console.log(
-      `Login with session: ${sessionId} and authRequest: ${authRequestId}`
+      `Login with session: ${sessionId} and authRequest: ${authRequestId}`,
     );
 
     let selectedSession = sessions.find((s) => s.id === sessionId);
@@ -70,7 +70,7 @@ export async function GET(request: NextRequest) {
     if (selectedSession && selectedSession.id) {
       console.log(`Found session ${selectedSession.id}`);
       const cookie = sessionCookies.find(
-        (cookie) => cookie.id === selectedSession?.id
+        (cookie) => cookie.id === selectedSession?.id,
       );
 
       if (cookie && cookie.id && cookie.token) {
@@ -98,7 +98,7 @@ export async function GET(request: NextRequest) {
 
     if (authRequest?.scope) {
       const orgScope = authRequest.scope.find((s: string) =>
-        ORG_SCOPE_REGEX.test(s)
+        ORG_SCOPE_REGEX.test(s),
       );
 
       if (orgScope) {
@@ -106,7 +106,7 @@ export async function GET(request: NextRequest) {
         organization = matched?.[1] ?? "";
       } else {
         const orgDomainScope = authRequest.scope.find((s: string) =>
-          ORG_DOMAIN_SCOPE_REGEX.test(s)
+          ORG_DOMAIN_SCOPE_REGEX.test(s),
         );
 
         if (orgDomainScope) {
@@ -169,7 +169,7 @@ export async function GET(request: NextRequest) {
 
         if (selectedSession && selectedSession.id) {
           const cookie = sessionCookies.find(
-            (cookie) => cookie.id === selectedSession?.id
+            (cookie) => cookie.id === selectedSession?.id,
           );
 
           if (cookie && cookie.id && cookie.token) {
@@ -185,13 +185,13 @@ export async function GET(request: NextRequest) {
           } else {
             return NextResponse.json(
               { error: "No active session found" },
-              { status: 400 } // TODO: check for correct status code
+              { 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
+            { status: 400 }, // TODO: check for correct status code
           );
         }
       } else {
@@ -200,7 +200,7 @@ export async function GET(request: NextRequest) {
 
         if (selectedSession && selectedSession.id) {
           const cookie = sessionCookies.find(
-            (cookie) => cookie.id === selectedSession?.id
+            (cookie) => cookie.id === selectedSession?.id,
           );
 
           if (cookie && cookie.id && cookie.token) {
@@ -247,7 +247,7 @@ export async function GET(request: NextRequest) {
   } else {
     return NextResponse.json(
       { error: "No authRequestId provided" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

apps/login/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { demos } from "#/lib/demos";
+import { demos } from "@/lib/demos";
 import Link from "next/link";
 
 export default function Page() {

apps/login/src/lib/server-actions.ts

@@ -1,12 +1,12 @@
 "use server";
 
-import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+import { getMostRecentCookieWithLoginname } from "@/utils/cookies";
 import { getSession, server, verifyTOTPRegistration } from "./zitadel";
 
 export async function verifyTOTP(
   code: string,
   loginName?: string,
-  organization?: string
+  organization?: string,
 ) {
   return getMostRecentCookieWithLoginname(loginName, organization)
     .then((recent) => {

apps/login/src/lib/zitadel.ts

@@ -72,20 +72,20 @@ if (!getServers().length) {
 
 export async function getBrandingSettings(
   server: ZitadelServer,
-  organization?: string
+  organization?: string,
 ): Promise<BrandingSettings | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
     .getBrandingSettings(
       { ctx: organization ? { orgId: organization } : { instance: true } },
-      {}
+      {},
     )
     .then((resp: GetBrandingSettingsResponse) => resp.settings);
 }
 
 export async function getLoginSettings(
   server: ZitadelServer,
-  orgId?: string
+  orgId?: string,
 ): Promise<LoginSettings | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
@@ -94,27 +94,27 @@ export async function getLoginSettings(
 }
 
 export async function verifyMyAuthFactorOTP(
-  code: string
+  code: string,
 ): Promise<VerifyMyAuthFactorOTPResponse> {
   const authService = auth.getAuth(server);
   return authService.verifyMyAuthFactorOTP({ code }, {});
 }
 
 export async function addOTPEmail(
-  userId: string
+  userId: string,
 ): Promise<AddOTPEmailResponse | undefined> {
   const userService = user.getUser(server);
   return userService.addOTPEmail(
     {
       userId,
     },
-    {}
+    {},
   );
 }
 
 export async function addOTPSMS(
   userId: string,
-  token?: string
+  token?: string,
 ): Promise<AddOTPSMSResponse | undefined> {
   let userService;
   if (token) {
@@ -134,7 +134,7 @@ export async function addOTPSMS(
 
 export async function registerTOTP(
   userId: string,
-  token?: string
+  token?: string,
 ): Promise<RegisterTOTPResponse | undefined> {
   let userService;
   if (token) {
@@ -153,7 +153,7 @@ export async function registerTOTP(
 }
 
 export async function getGeneralSettings(
-  server: ZitadelServer
+  server: ZitadelServer,
 ): Promise<string[] | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
@@ -163,13 +163,13 @@ export async function getGeneralSettings(
 
 export async function getLegalAndSupportSettings(
   server: ZitadelServer,
-  organization?: string
+  organization?: string,
 ): Promise<LegalAndSupportSettings | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
     .getLegalAndSupportSettings(
       { ctx: organization ? { orgId: organization } : { instance: true } },
-      {}
+      {},
     )
     .then((resp: GetLegalAndSupportSettingsResponse) => {
       return resp.settings;
@@ -178,7 +178,7 @@ export async function getLegalAndSupportSettings(
 
 export async function getPasswordComplexitySettings(
   server: ZitadelServer,
-  organization?: string
+  organization?: string,
 ): Promise<PasswordComplexitySettings | undefined> {
   const settingsService = settings.getSettings(server);
 
@@ -187,7 +187,7 @@ export async function getPasswordComplexitySettings(
       organization
         ? { ctx: { orgId: organization } }
         : { ctx: { instance: true } },
-      {}
+      {},
     )
     .then((resp: GetPasswordComplexitySettingsResponse) => resp.settings);
 }
@@ -195,7 +195,7 @@ export async function getPasswordComplexitySettings(
 export async function createSessionFromChecks(
   server: ZitadelServer,
   checks: Checks,
-  challenges: RequestChallenges | undefined
+  challenges: RequestChallenges | undefined,
 ): Promise<CreateSessionResponse | undefined> {
   const sessionService = session.getSession(server);
   return sessionService.createSession(
@@ -207,7 +207,7 @@ export async function createSessionFromChecks(
         nanos: 0,
       },
     },
-    {}
+    {},
   );
 }
 
@@ -217,7 +217,7 @@ export async function createSessionForUserIdAndIdpIntent(
   idpIntent: {
     idpIntentId?: string | undefined;
     idpIntentToken?: string | undefined;
-  }
+  },
 ): Promise<CreateSessionResponse | undefined> {
   const sessionService = session.getSession(server);
 
@@ -229,7 +229,7 @@ export async function createSessionForUserIdAndIdpIntent(
       //   nanos: 0,
       // },
     },
-    {}
+    {},
   );
 }
 
@@ -238,7 +238,7 @@ export async function setSession(
   sessionId: string,
   sessionToken: string,
   challenges: RequestChallenges | undefined,
-  checks: Checks
+  checks: Checks,
 ): Promise<SetSessionResponse | undefined> {
   const sessionService = session.getSession(server);
 
@@ -260,7 +260,7 @@ export async function setSession(
 export async function getSession(
   server: ZitadelServer,
   sessionId: string,
-  sessionToken: string
+  sessionToken: string,
 ): Promise<GetSessionResponse | undefined> {
   const sessionService = session.getSession(server);
   return sessionService.getSession({ sessionId, sessionToken }, {});
@@ -269,7 +269,7 @@ export async function getSession(
 export async function deleteSession(
   server: ZitadelServer,
   sessionId: string,
-  sessionToken: string
+  sessionToken: string,
 ): Promise<DeleteSessionResponse | undefined> {
   const sessionService = session.getSession(server);
   return sessionService.deleteSession({ sessionId, sessionToken }, {});
@@ -277,7 +277,7 @@ export async function deleteSession(
 
 export async function listSessions(
   server: ZitadelServer,
-  ids: string[]
+  ids: string[],
 ): Promise<ListSessionsResponse | undefined> {
   const sessionService = session.getSession(server);
   const query = { offset: 0, limit: 100, asc: true };
@@ -295,7 +295,7 @@ export type AddHumanUserData = {
 
 export async function addHumanUser(
   server: ZitadelServer,
-  { email, firstName, lastName, password, organization }: AddHumanUserData
+  { email, firstName, lastName, password, organization }: AddHumanUserData,
 ): Promise<AddHumanUserResponse> {
   const userService = user.getUser(server);
 
@@ -316,14 +316,14 @@ export async function addHumanUser(
           password: { password },
         }
       : payload,
-    {}
+    {},
   );
 }
 
 export async function verifyTOTPRegistration(
   code: string,
   userId: string,
-  token?: string
+  token?: string,
 ): Promise<VerifyTOTPRegistrationResponse> {
   let userService;
   if (token) {
@@ -342,7 +342,7 @@ export async function verifyTOTPRegistration(
 }
 
 export async function getUserByID(
-  userId: string
+  userId: string,
 ): Promise<GetUserByIDResponse> {
   const userService = user.getUser(server);
 
@@ -351,7 +351,7 @@ export async function getUserByID(
 
 export async function listUsers(
   userName: string,
-  organizationId: string
+  organizationId: string,
 ): Promise<ListUsersResponse> {
   const userService = user.getUser(server);
 
@@ -380,12 +380,12 @@ export async function listUsers(
             },
           ],
     },
-    {}
+    {},
   );
 }
 
 export async function getOrgByDomain(
-  domain: string
+  domain: string,
 ): Promise<GetOrgByDomainGlobalResponse> {
   const mgmtService = management.getManagement(server);
   return mgmtService.getOrgByDomainGlobal({ domain }, {});
@@ -393,7 +393,7 @@ export async function getOrgByDomain(
 
 export async function startIdentityProviderFlow(
   server: ZitadelServer,
-  { idpId, urls }: StartIdentityProviderIntentRequest
+  { idpId, urls }: StartIdentityProviderIntentRequest,
 ): Promise<StartIdentityProviderIntentResponse> {
   const userService = user.getUser(server);
 
@@ -405,7 +405,7 @@ export async function startIdentityProviderFlow(
 
 export async function retrieveIdentityProviderInformation(
   server: ZitadelServer,
-  { idpIntentId, idpIntentToken }: RetrieveIdentityProviderIntentRequest
+  { idpIntentId, idpIntentToken }: RetrieveIdentityProviderIntentRequest,
 ): Promise<RetrieveIdentityProviderIntentResponse> {
   const userService = user.getUser(server);
 
@@ -417,7 +417,7 @@ export async function retrieveIdentityProviderInformation(
 
 export async function getAuthRequest(
   server: ZitadelServer,
-  { authRequestId }: GetAuthRequestRequest
+  { authRequestId }: GetAuthRequestRequest,
 ): Promise<GetAuthRequestResponse> {
   const oidcService = oidc.getOidc(server);
 
@@ -428,7 +428,7 @@ export async function getAuthRequest(
 
 export async function createCallback(
   server: ZitadelServer,
-  req: CreateCallbackRequest
+  req: CreateCallbackRequest,
 ): Promise<CreateCallbackResponse> {
   const oidcService = oidc.getOidc(server);
 
@@ -438,7 +438,7 @@ export async function createCallback(
 export async function verifyEmail(
   server: ZitadelServer,
   userId: string,
-  verificationCode: string
+  verificationCode: string,
 ): Promise<VerifyEmailResponse> {
   const userservice = user.getUser(server);
   return userservice.verifyEmail(
@@ -446,7 +446,7 @@ export async function verifyEmail(
       userId,
       verificationCode,
     },
-    {}
+    {},
   );
 }
 
@@ -458,14 +458,14 @@ export async function verifyEmail(
  */
 export async function setEmail(
   server: ZitadelServer,
-  userId: string
+  userId: string,
 ): Promise<any> {
   const userservice = user.getUser(server);
   return userservice.setEmail(
     {
       userId,
     },
-    {}
+    {},
   );
 }
 
@@ -477,7 +477,7 @@ export async function setEmail(
  */
 export async function createPasskeyRegistrationLink(
   userId: string,
-  token?: string
+  token?: string,
 ): Promise<any> {
   let userService;
   if (token) {
@@ -508,7 +508,7 @@ export async function createPasskeyRegistrationLink(
  */
 export async function registerU2F(
   userId: string,
-  domain: string
+  domain: string,
 ): Promise<RegisterU2FResponse> {
   const userservice = user.getUser(server);
 
@@ -526,7 +526,7 @@ export async function registerU2F(
  * @returns the newly set email
  */
 export async function verifyU2FRegistration(
-  request: VerifyU2FRegistrationRequest
+  request: VerifyU2FRegistrationRequest,
 ): Promise<any> {
   const userservice = user.getUser(server);
 
@@ -548,7 +548,7 @@ export async function verifyPasskeyRegistration(
         [key: string]: any;
       }
     | undefined,
-  userId: string
+  userId: string,
 ): Promise<VerifyPasskeyRegistrationResponse> {
   const userservice = user.getUser(server);
   return userservice.verifyPasskeyRegistration(
@@ -558,7 +558,7 @@ export async function verifyPasskeyRegistration(
       publicKeyCredential,
       userId,
     },
-    {}
+    {},
   );
 }
 
@@ -571,7 +571,7 @@ export async function verifyPasskeyRegistration(
 export async function registerPasskey(
   userId: string,
   code: { id: string; code: string },
-  domain: string
+  domain: string,
 ): Promise<any> {
   const userservice = user.getUser(server);
   return userservice.registerPasskey({
@@ -589,7 +589,7 @@ export async function registerPasskey(
  * @returns the newly set email
  */
 export async function listAuthenticationMethodTypes(
-  userId: string
+  userId: string,
 ): Promise<ListAuthenticationMethodTypesResponse> {
   const userservice = user.getUser(server);
   return userservice.listAuthenticationMethodTypes({

apps/login/src/ui/Alert.tsx

@@ -29,7 +29,7 @@ export default function Alert({ children, type = AlertType.ALERT }: Props) {
         {
           [yellow]: type === AlertType.ALERT,
           [neutral]: type === AlertType.INFO,
-        }
+        },
       )}
     >
       {type === AlertType.ALERT && (

apps/login/src/ui/AuthMethods.tsx

@@ -9,7 +9,7 @@ const cardClasses = (alreadyAdded: boolean) =>
     "relative bg-background-light-400 dark:bg-background-dark-400 group block space-y-1.5 rounded-md px-5 py-3  border border-divider-light dark:border-divider-dark transition-all ",
     alreadyAdded
       ? "opacity-50 cursor-default"
-      : "hover:shadow-lg hover:dark:bg-white/10"
+      : "hover:shadow-lg hover:dark:bg-white/10",
   );
 
 const LinkWrapper = ({
@@ -36,7 +36,7 @@ export const TOTP = (alreadyAdded: boolean, link: string) => {
       <div
         className={clsx(
           "font-medium flex items-center",
-          alreadyAdded ? "opacity-50" : ""
+          alreadyAdded ? "opacity-50" : "",
         )}
       >
         <svg
@@ -97,7 +97,7 @@ export const U2F = (alreadyAdded: boolean, link: string) => {
       <div
         className={clsx(
           "font-medium flex items-center",
-          alreadyAdded ? "" : ""
+          alreadyAdded ? "" : "",
         )}
       >
         <svg
@@ -131,7 +131,7 @@ export const EMAIL = (alreadyAdded: boolean, link: string) => {
       <div
         className={clsx(
           "font-medium flex items-center",
-          alreadyAdded ? "" : ""
+          alreadyAdded ? "" : "",
         )}
       >
         <svg
@@ -166,7 +166,7 @@ export const SMS = (alreadyAdded: boolean, link: string) => {
       <div
         className={clsx(
           "font-medium flex items-center",
-          alreadyAdded ? "" : ""
+          alreadyAdded ? "" : "",
         )}
       >
         <svg

apps/login/src/ui/Avatar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ColorShade, getColorHash } from "#/utils/colors";
+import { ColorShade, getColorHash } from "@/utils/colors";
 import { useTheme } from "next-themes";
 
 interface AvatarProps {
@@ -69,10 +69,10 @@ export function Avatar({
         size === "large"
           ? "h-20 w-20 font-normal"
           : size === "base"
-          ? "w-[38px] h-[38px] font-bold"
+            ? "w-[38px] h-[38px] font-bold"
-          : size === "small"
+            : size === "small"
-          ? "w-[32px] h-[32px] font-bold text-[13px]"
+              ? "w-[32px] h-[32px] font-bold text-[13px]"
-          : ""
+              : ""
       }`}
       style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}
     >

apps/login/src/ui/Boundary.tsx

@@ -61,7 +61,7 @@ export const Boundary = ({
           {
             "left-3 lg:left-5": size === "small",
             "left-4 lg:left-9": size === "default",
-          }
+          },
         )}
       >
         {labels.map((label) => {

apps/login/src/ui/Button.tsx

@@ -35,7 +35,7 @@ export type ButtonProps = DetailedHTMLProps<
 export const getButtonClasses = (
   size: ButtonSizes,
   variant: ButtonVariants,
-  color: ButtonColors
+  color: ButtonColors,
 ) =>
   clsx({
     "box-border font-normal leading-36px text-14px inline-flex items-center rounded-md focus:outline-none transition-colors transition-shadow duration-300":
@@ -65,7 +65,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       color = ButtonColors.Primary,
       ...props
     },
-    ref
+    ref,
   ) => (
     <button
       type="button"
@@ -75,5 +75,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     >
       {children}
     </button>
-  )
+  ),
 );

apps/login/src/ui/Checkbox.tsx

@@ -17,7 +17,7 @@ export type CheckboxProps = DetailedHTMLProps<
 };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (
+  function Checkbox(
     {
       className = "",
       checked = false,
@@ -26,8 +26,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       children,
       ...props
     },
-    ref
+    ref,
-  ) => {
+  ) {
     const [enabled, setEnabled] = useState<boolean>(checked);
 
     useEffect(() => {
@@ -53,7 +53,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               "focus:border-gray-500 focus:dark:border-white focus:ring-opacity-40 focus:dark:ring-opacity-40 focus:ring-offset-0 focus:ring-2 dark:focus:ring-offset-0 dark:focus:ring-2 focus:ring-gray-500 focus:dark:ring-white",
               "h-4 w-4 rounded-sm ring-0 outline-0 checked:ring-0 checked:dark:ring-0 active:border-none active:ring-0",
               "disabled:bg-gray-500 disabled:text-gray-500 disabled:border-gray-200 disabled:cursor-not-allowed",
-              className
+              className,
             )}
             {...props}
           />
@@ -61,5 +61,5 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         {children}
       </div>
     );
-  }
+  },
 );

apps/login/src/ui/ChooseSecondFactorToSetup.tsx

@@ -50,12 +50,12 @@ export default function ChooseSecondFactorToSetup({
         return factor === 1
           ? TOTP(userMethods.includes(4), "/otp/time-based/set?" + params)
           : factor === 2
-          ? U2F(userMethods.includes(5), "/u2f/set?" + params)
+            ? U2F(userMethods.includes(5), "/u2f/set?" + params)
-          : factor === 3 && emailVerified
+            : factor === 3 && emailVerified
-          ? EMAIL(userMethods.includes(7), "/otp/email/set?" + params)
+              ? EMAIL(userMethods.includes(7), "/otp/email/set?" + params)
-          : factor === 4 && phoneVerified
+              : factor === 4 && phoneVerified
-          ? SMS(userMethods.includes(6), "/otp/sms/set?" + params)
+                ? SMS(userMethods.includes(6), "/otp/sms/set?" + params)
-          : null;
+                : null;
       })}
     </div>
   );

apps/login/src/ui/DynamicTheme.tsx

@@ -2,7 +2,7 @@
 
 import { BrandingSettings } from "@zitadel/server";
 import React from "react";
-import { Logo } from "#/ui/Logo";
+import { Logo } from "@/ui/Logo";
 import ThemeWrapper from "./ThemeWrapper";
 import { LayoutProviders } from "./LayoutProviders";
 

apps/login/src/ui/GlobalNav.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { demos, type Item } from "#/lib/demos";
+import { demos, type Item } from "@/lib/demos";
-import { ZitadelLogo } from "#/ui/ZitadelLogo";
+import { ZitadelLogo } from "@/ui/ZitadelLogo";
 import Link from "next/link";
 import { useSelectedLayoutSegment, usePathname } from "next/navigation";
 import clsx from "clsx";
@@ -56,7 +56,7 @@ export function GlobalNav() {
             "fixed inset-x-0 bottom-0 top-14 mt-px bg-white/80 dark:bg-black/80 backdrop-blur-lg":
               isOpen,
             hidden: !isOpen,
-          }
+          },
         )}
       >
         <nav
@@ -111,7 +111,7 @@ function GlobalNavItem({
           "hover:opacity-100 hover:dark:opacity-100": !isActive,
           "text-text-light-500 dark:text-text-dark-500 opacity-100 dark:opacity-100 font-semibold":
             isActive,
-        }
+        },
       )}
     >
       {item.name}

apps/login/src/ui/IdpSignin.tsx

@@ -53,7 +53,7 @@ export default function IdpSignin(props: Props) {
               new URLSearchParams({
                 sessionId: session.sessionId,
                 authRequest: props.authRequestId,
-              })
+              }),
           );
         } else {
           return router.push(
@@ -66,8 +66,8 @@ export default function IdpSignin(props: Props) {
                     }
                   : {
                       loginName: session.factors.user.loginName,
-                    }
+                    },
-              )
+              ),
           );
         }
       })

apps/login/src/ui/Input.tsx

@@ -52,7 +52,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       onBlur,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <label className="flex flex-col text-12px text-input-light-label dark:text-input-dark-label">
@@ -88,5 +88,5 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         )}
       </label>
     );
-  }
+  },
 );

apps/login/src/ui/LoginOTP.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { Button, ButtonVariants } from "./Button";
 import Alert, { AlertType } from "./Alert";
 import { Spinner } from "./Spinner";
@@ -142,7 +142,7 @@ export default function LoginOTP({
 
       setError(response.details.details ?? "An internal error occurred");
       return Promise.reject(
-        response.details.details ?? "An internal error occurred"
+        response.details.details ?? "An internal error occurred",
       );
     }
     return res.json();
@@ -170,7 +170,7 @@ export default function LoginOTP({
               }
             : {
                 loginName: response.factors.user.loginName,
-              }
+              },
         );
 
         if (organization) {

apps/login/src/ui/LoginPasskey.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { Button, ButtonVariants } from "./Button";
 import Alert from "./Alert";
 import { Spinner } from "./Spinner";
@@ -65,7 +65,7 @@ export default function LoginPasskey({
   }, []);
 
   async function updateSessionForChallenge(
-    userVerificationRequirement: number = login ? 1 : 3
+    userVerificationRequirement: number = login ? 1 : 3,
   ) {
     setLoading(true);
     const res = await fetch("/api/session", {
@@ -128,16 +128,16 @@ export default function LoginPasskey({
   }
 
   async function submitLoginAndContinue(
-    publicKey: any
+    publicKey: any,
   ): Promise<boolean | void> {
     publicKey.challenge = coerceToArrayBuffer(
       publicKey.challenge,
-      "publicKey.challenge"
+      "publicKey.challenge",
     );
     publicKey.allowCredentials.map((listItem: any) => {
       listItem.id = coerceToArrayBuffer(
         listItem.id,
-        "publicKey.allowCredentials.id"
+        "publicKey.allowCredentials.id",
       );
     });
 
@@ -148,15 +148,15 @@ export default function LoginPasskey({
       .then((assertedCredential: any) => {
         if (assertedCredential) {
           const authData = new Uint8Array(
-            assertedCredential.response.authenticatorData
+            assertedCredential.response.authenticatorData,
           );
           const clientDataJSON = new Uint8Array(
-            assertedCredential.response.clientDataJSON
+            assertedCredential.response.clientDataJSON,
           );
           const rawId = new Uint8Array(assertedCredential.rawId);
           const sig = new Uint8Array(assertedCredential.response.signature);
           const userHandle = new Uint8Array(
-            assertedCredential.response.userHandle
+            assertedCredential.response.userHandle,
           );
           const data = {
             id: assertedCredential.id,
@@ -166,7 +166,7 @@ export default function LoginPasskey({
               authenticatorData: coerceToBase64Url(authData, "authData"),
               clientDataJSON: coerceToBase64Url(
                 clientDataJSON,
-                "clientDataJSON"
+                "clientDataJSON",
               ),
               signature: coerceToBase64Url(sig, "sig"),
               userHandle: coerceToBase64Url(userHandle, "userHandle"),
@@ -179,7 +179,7 @@ export default function LoginPasskey({
                   new URLSearchParams({
                     sessionId: resp.sessionId,
                     authRequest: authRequestId,
-                  })
+                  }),
               );
             } else {
               return router.push(
@@ -192,8 +192,8 @@ export default function LoginPasskey({
                         }
                       : {
                           loginName: resp.factors.user.loginName,
-                        }
+                        },
-                  )
+                  ),
               );
             }
           });
@@ -243,7 +243,7 @@ export default function LoginPasskey({
               }
 
               return router.push(
-                "/password?" + new URLSearchParams(params) // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
+                "/password?" + new URLSearchParams(params), // alt is set because password is requested as alternative auth method, so passwordless prompt can be escaped
               );
             }}
           >

apps/login/src/ui/MobileNavToggle.tsx

@@ -25,7 +25,7 @@ export function useMobileNavToggle() {
   const context = React.useContext(MobileNavContext);
   if (context === undefined) {
     throw new Error(
-      "useMobileNavToggle must be used within a MobileNavContextProvider"
+      "useMobileNavToggle must be used within a MobileNavContextProvider",
     );
   }
   return context;

apps/login/src/ui/PasswordComplexity.tsx

@@ -3,7 +3,7 @@ import {
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "#/utils/validators";
+} from "@/utils/validators";
 import { PasswordComplexitySettings } from "@zitadel/server";
 
 type Props = {
@@ -40,7 +40,7 @@ const cross = (
     stroke="currentColor"
     role="img"
   >
-    <title>Doesn't match</title>
+    <title>Doesn&apos;t match</title>
     <path
       strokeLinecap="round"
       strokeLinejoin="round"

apps/login/src/ui/PasswordForm.tsx

@@ -83,7 +83,7 @@ export default function PasswordForm({
 
       // exclude password
       const availableSecondFactors = resp.authMethods?.filter(
-        (m: AuthenticationMethodType) => m !== 1
+        (m: AuthenticationMethodType) => m !== 1,
       );
       if (availableSecondFactors.length == 1) {
         const params = new URLSearchParams({
@@ -178,7 +178,7 @@ export default function PasswordForm({
               }
             : {
                 loginName: resp.factors.user.loginName,
-              }
+              },
         );
 
         if (organization) {

apps/login/src/ui/RegisterFormWithoutPassword.tsx

@@ -66,7 +66,7 @@ export default function RegisterFormWithoutPassword({
 
   async function submitAndContinue(
     value: Inputs,
-    withPassword: boolean = false
+    withPassword: boolean = false,
   ) {
     const registerParams: any = value;
 
@@ -178,7 +178,7 @@ export default function RegisterFormWithoutPassword({
           variant={ButtonVariants.Primary}
           disabled={loading || !formState.isValid || !tosAndPolicyAccepted}
           onClick={handleSubmit((values) =>
-            submitAndContinue(values, selected === methods[0] ? false : true)
+            submitAndContinue(values, selected === methods[0] ? false : true),
           )}
         >
           {loading && <Spinner className="h-5 w-5 mr-2" />}

apps/login/src/ui/RegisterPasskey.tsx

@@ -7,7 +7,7 @@ import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
 import Alert from "./Alert";
 import { AuthRequest, RegisterPasskeyResponse } from "@zitadel/server";
-import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 type Inputs = {};
 
 type Props = {
@@ -60,7 +60,7 @@ export default function RegisterPasskey({
     passkeyId: string,
     passkeyName: string,
     publicKeyCredential: any,
-    sessionId: string
+    sessionId: string,
   ) {
     setLoading(true);
     const res = await fetch("/api/passkeys/verify", {
@@ -97,12 +97,12 @@ export default function RegisterPasskey({
         resp.publicKeyCredentialCreationOptions.publicKey.challenge =
           coerceToArrayBuffer(
             resp.publicKeyCredentialCreationOptions.publicKey.challenge,
-            "challenge"
+            "challenge",
           );
         resp.publicKeyCredentialCreationOptions.publicKey.user.id =
           coerceToArrayBuffer(
             resp.publicKeyCredentialCreationOptions.publicKey.user.id,
-            "userid"
+            "userid",
           );
         if (
           resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials
@@ -111,10 +111,10 @@ export default function RegisterPasskey({
             (cred: any) => {
               cred.id = coerceToArrayBuffer(
                 cred.id as string,
-                "excludeCredentials.id"
+                "excludeCredentials.id",
               );
               return cred;
-            }
+            },
           );
         }
 
@@ -139,11 +139,11 @@ export default function RegisterPasskey({
                 response: {
                   attestationObject: coerceToBase64Url(
                     attestationObject,
-                    "attestationObject"
+                    "attestationObject",
                   ),
                   clientDataJSON: coerceToBase64Url(
                     clientDataJSON,
-                    "clientDataJSON"
+                    "clientDataJSON",
                   ),
                 },
               };

apps/login/src/ui/RegisterU2F.tsx

@@ -7,7 +7,7 @@ import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
 import Alert from "./Alert";
 import { RegisterU2FResponse } from "@zitadel/server";
-import { coerceToArrayBuffer, coerceToBase64Url } from "#/utils/base64";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 type Inputs = {};
 
 type Props = {
@@ -58,7 +58,7 @@ export default function RegisterU2F({
     u2fId: string,
     passkeyName: string,
     publicKeyCredential: any,
-    sessionId: string
+    sessionId: string,
   ) {
     setLoading(true);
     const res = await fetch("/api/u2f/verify", {
@@ -95,12 +95,12 @@ export default function RegisterU2F({
         resp.publicKeyCredentialCreationOptions.publicKey.challenge =
           coerceToArrayBuffer(
             resp.publicKeyCredentialCreationOptions.publicKey.challenge,
-            "challenge"
+            "challenge",
           );
         resp.publicKeyCredentialCreationOptions.publicKey.user.id =
           coerceToArrayBuffer(
             resp.publicKeyCredentialCreationOptions.publicKey.user.id,
-            "userid"
+            "userid",
           );
         if (
           resp.publicKeyCredentialCreationOptions.publicKey.excludeCredentials
@@ -109,10 +109,10 @@ export default function RegisterU2F({
             (cred: any) => {
               cred.id = coerceToArrayBuffer(
                 cred.id as string,
-                "excludeCredentials.id"
+                "excludeCredentials.id",
               );
               return cred;
-            }
+            },
           );
         }
 
@@ -137,11 +137,11 @@ export default function RegisterU2F({
                 response: {
                   attestationObject: coerceToBase64Url(
                     attestationObject,
-                    "attestationObject"
+                    "attestationObject",
                   ),
                   clientDataJSON: coerceToBase64Url(
                     clientDataJSON,
-                    "clientDataJSON"
+                    "clientDataJSON",
                   ),
                 },
               };

apps/login/src/ui/SessionItem.tsx

@@ -63,7 +63,7 @@ export default function SessionItem({
                   }
                 : {
                     loginName: session.factors?.user?.loginName as string,
-                  }
+                  },
             )
           : `/loginname?` +
             new URLSearchParams(
@@ -76,7 +76,7 @@ export default function SessionItem({
                 : {
                     loginName: session.factors?.user?.loginName as string,
                     submit: "true",
-                  }
+                  },
             )
       }
       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"

apps/login/src/ui/SetPasswordForm.tsx

@@ -11,7 +11,7 @@ import {
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "#/utils/validators";
+} from "@/utils/validators";
 import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
 import Alert from "./Alert";

apps/login/src/ui/SignInWithIDP.tsx

@@ -8,7 +8,7 @@ import {
   SignInWithGithub,
 } from "@zitadel/react";
 import { useRouter } from "next/navigation";
-import { ProviderSlug } from "#/lib/demos";
+import { ProviderSlug } from "@/lib/demos";
 import Alert from "./Alert";
 
 export interface SignInWithIDPProps {
@@ -84,7 +84,7 @@ export function SignInWithIDP({
                     startFlow(idp.id, ProviderSlug.GITHUB).then(
                       ({ authUrl }) => {
                         router.push(authUrl);
-                      }
+                      },
                     )
                   }
                 ></SignInWithGithub>
@@ -113,7 +113,7 @@ export function SignInWithIDP({
                     startFlow(idp.id, ProviderSlug.GOOGLE).then(
                       ({ authUrl }) => {
                         router.push(authUrl);
-                      }
+                      },
                     )
                   }
                 ></SignInWithGoogle>

apps/login/src/ui/TOTPRegister.tsx

@@ -9,7 +9,7 @@ import { Spinner } from "./Spinner";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { verifyTOTP } from "#/lib/server-actions";
+import { verifyTOTP } from "@/lib/server-actions";
 import { login } from "@zitadel/server";
 
 type Inputs = {

apps/login/src/ui/Tab.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Item } from "#/ui/TabGroup";
+import type { Item } from "@/ui/TabGroup";
 import clsx from "clsx";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";

apps/login/src/ui/TabGroup.tsx

@@ -1,4 +1,4 @@
-import { Tab } from "#/ui/Tab";
+import { Tab } from "@/ui/Tab";
 
 export type Item = {
   text: string;

apps/login/src/ui/ThemeWrapper.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { BrandingSettings } from "@zitadel/server";
-import { setTheme } from "#/utils/colors";
+import { setTheme } from "@/utils/colors";
 import { useEffect } from "react";
 
 type Props = {

apps/login/src/ui/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from "#/ui/Avatar";
+import { Avatar } from "@/ui/Avatar";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 

apps/login/src/ui/UsernameForm.tsx

@@ -75,7 +75,7 @@ export default function UsernameForm({
 
   function setLoginNameAndGetAuthMethods(
     values: Inputs,
-    organization?: string
+    organization?: string,
   ) {
     return submitLoginName(values, organization).then((response) => {
       if (response.authMethodTypes.length == 1) {
@@ -99,7 +99,7 @@ export default function UsernameForm({
             }
 
             return router.push(
-              "/password?" + new URLSearchParams(paramsPassword)
+              "/password?" + new URLSearchParams(paramsPassword),
             );
           case 2: // AuthenticationMethodType.AUTHENTICATION_METHOD_TYPE_PASSKEY
             const paramsPasskey: any = { loginName: values.loginName };
@@ -111,7 +111,7 @@ export default function UsernameForm({
             }
 
             return router.push(
-              "/passkey/login?" + new URLSearchParams(paramsPasskey)
+              "/passkey/login?" + new URLSearchParams(paramsPasskey),
             );
           default:
             const paramsPasskeyDefault: any = { loginName: values.loginName };
@@ -128,7 +128,7 @@ export default function UsernameForm({
             }
 
             return router.push(
-              "/password?" + new URLSearchParams(paramsPasskeyDefault)
+              "/password?" + new URLSearchParams(paramsPasskeyDefault),
             );
         }
       } else if (
@@ -136,7 +136,7 @@ export default function UsernameForm({
         response.authMethodTypes.length === 0
       ) {
         setError(
-          "User has no available authentication methods. Contact your administrator to setup authentication for the requested user."
+          "User has no available authentication methods. Contact your administrator to setup authentication for the requested user.",
         );
       } else {
         // prefer passkey in favor of other methods
@@ -155,7 +155,7 @@ export default function UsernameForm({
           }
 
           return router.push(
-            "/passkey/login?" + new URLSearchParams(passkeyParams)
+            "/passkey/login?" + new URLSearchParams(passkeyParams),
           );
         } else {
           // user has no passkey setup and login settings allow passkeys
@@ -174,7 +174,7 @@ export default function UsernameForm({
           }
 
           return router.push(
-            "/password?" + new URLSearchParams(paramsPasswordDefault)
+            "/password?" + new URLSearchParams(paramsPasswordDefault),
           );
         }
       }
@@ -215,7 +215,7 @@ export default function UsernameForm({
           variant={ButtonVariants.Primary}
           disabled={loading || !formState.isValid}
           onClick={handleSubmit((e) =>
-            setLoginNameAndGetAuthMethods(e, organization)
+            setLoginNameAndGetAuthMethods(e, organization),
           )}
         >
           {loading && <Spinner className="h-5 w-5 mr-2" />}

apps/login/src/ui/VerifyEmailForm.tsx

@@ -6,7 +6,7 @@ import { TextInput } from "./Input";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import { Spinner } from "./Spinner";
-import Alert from "#/ui/Alert";
+import Alert from "@/ui/Alert";
 
 type Inputs = {
   code: string;

apps/login/src/utils/colors.ts

@@ -108,16 +108,16 @@ function setColorShades(
   map: Color[],
   type: string,
   theme: string,
-  document: any
+  document: any,
 ) {
   map.forEach((color) => {
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-${color.name}`,
-      color.hex
+      color.hex,
     );
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-contrast-${color.name}`,
-      color.contrastColor
+      color.contrastColor,
     );
   });
 }
@@ -126,20 +126,20 @@ function setColorAlpha(
   map: Color[],
   type: string,
   theme: string,
-  document: any
+  document: any,
 ) {
   map.forEach((color) => {
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-${color.name}`,
-      color.hex
+      color.hex,
     );
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-contrast-${color.name}`,
-      color.contrastColor
+      color.contrastColor,
     );
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-secondary-${color.name}`,
-      `${color.hex}c7`
+      `${color.hex}c7`,
     );
   });
 }
@@ -188,19 +188,19 @@ export function computeMap(branding: BrandingColors, dark: boolean): ColorMap {
     background: computeColors(
       dark
         ? branding.darkTheme.backgroundColor
-        : branding.lightTheme.backgroundColor
+        : branding.lightTheme.backgroundColor,
     ),
     primary: computeColors(
-      dark ? branding.darkTheme.primaryColor : branding.lightTheme.primaryColor
+      dark ? branding.darkTheme.primaryColor : branding.lightTheme.primaryColor,
     ),
     warn: computeColors(
-      dark ? branding.darkTheme.warnColor : branding.lightTheme.warnColor
+      dark ? branding.darkTheme.warnColor : branding.lightTheme.warnColor,
     ),
     text: computeColors(
-      dark ? branding.darkTheme.fontColor : branding.lightTheme.fontColor
+      dark ? branding.darkTheme.fontColor : branding.lightTheme.fontColor,
     ),
     link: computeColors(
-      dark ? branding.darkTheme.fontColor : branding.lightTheme.fontColor
+      dark ? branding.darkTheme.fontColor : branding.lightTheme.fontColor,
     ),
   };
 }

apps/login/src/utils/cookies.ts

@@ -26,7 +26,7 @@ function setSessionHttpOnlyCookie(sessions: SessionCookie[]) {
 
 export async function addSessionToCookie(
   session: SessionCookie,
-  cleanup: boolean = false
+  cleanup: boolean = false,
 ): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -36,7 +36,7 @@ export async function addSessionToCookie(
     : [];
 
   const index = currentSessions.findIndex(
-    (s) => s.loginName === session.loginName
+    (s) => s.loginName === session.loginName,
   );
 
   if (index > -1) {
@@ -48,7 +48,7 @@ export async function addSessionToCookie(
   if (cleanup) {
     const now = new Date();
     const filteredSessions = currentSessions.filter((session) =>
-      session.expirationDate ? new Date(session.expirationDate) > now : true
+      session.expirationDate ? new Date(session.expirationDate) > now : true,
     );
     return setSessionHttpOnlyCookie(filteredSessions);
   } else {
@@ -59,7 +59,7 @@ export async function addSessionToCookie(
 export async function updateSessionCookie(
   id: string,
   session: SessionCookie,
-  cleanup: boolean = false
+  cleanup: boolean = false,
 ): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -75,7 +75,7 @@ export async function updateSessionCookie(
     if (cleanup) {
       const now = new Date();
       const filteredSessions = sessions.filter((session) =>
-        session.expirationDate ? new Date(session.expirationDate) > now : true
+        session.expirationDate ? new Date(session.expirationDate) > now : true,
       );
       return setSessionHttpOnlyCookie(filteredSessions);
     } else {
@@ -88,7 +88,7 @@ export async function updateSessionCookie(
 
 export async function removeSessionFromCookie(
   session: SessionCookie,
-  cleanup: boolean = false
+  cleanup: boolean = false,
 ): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -101,7 +101,7 @@ export async function removeSessionFromCookie(
   if (cleanup) {
     const now = new Date();
     const filteredSessions = reducedSessions.filter((session) =>
-      session.expirationDate ? new Date(session.expirationDate) > now : true
+      session.expirationDate ? new Date(session.expirationDate) > now : true,
     );
     return setSessionHttpOnlyCookie(filteredSessions);
   } else {
@@ -131,7 +131,7 @@ export async function getMostRecentSessionCookie(): Promise<any> {
 
 export async function getSessionCookieById(
   id: string,
-  organization?: string
+  organization?: string,
 ): Promise<SessionCookie> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -142,7 +142,7 @@ export async function getSessionCookieById(
     const found = sessions.find((s) =>
       organization
         ? s.organization === organization && s.id === id
-        : s.id === id
+        : s.id === id,
     );
     if (found) {
       return found;
@@ -156,7 +156,7 @@ export async function getSessionCookieById(
 
 export async function getSessionCookieByLoginName(
   loginName: string,
-  organization?: string
+  organization?: string,
 ): Promise<SessionCookie> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -166,7 +166,7 @@ export async function getSessionCookieByLoginName(
     const found = sessions.find((s) =>
       organization
         ? s.organization === organization && s.loginName === loginName
-        : s.loginName === loginName
+        : s.loginName === loginName,
     );
     if (found) {
       return found;
@@ -184,7 +184,7 @@ export async function getSessionCookieByLoginName(
  * @returns Session Cookies
  */
 export async function getAllSessionCookieIds(
-  cleanup: boolean = false
+  cleanup: boolean = false,
 ): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -196,7 +196,9 @@ export async function getAllSessionCookieIds(
       const now = new Date();
       return sessions
         .filter((session) =>
-          session.expirationDate ? new Date(session.expirationDate) > now : true
+          session.expirationDate
+            ? new Date(session.expirationDate) > now
+            : true,
         )
         .map((session) => session.id);
     } else {
@@ -213,7 +215,7 @@ export async function getAllSessionCookieIds(
  * @returns Session Cookies
  */
 export async function getAllSessions(
-  cleanup: boolean = false
+  cleanup: boolean = false,
 ): Promise<SessionCookie[]> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
@@ -224,7 +226,7 @@ export async function getAllSessions(
     if (cleanup) {
       const now = new Date();
       return sessions.filter((session) =>
-        session.expirationDate ? new Date(session.expirationDate) > now : true
+        session.expirationDate ? new Date(session.expirationDate) > now : true,
       );
     } else {
       return sessions;
@@ -241,7 +243,7 @@ export async function getAllSessions(
  */
 export async function getMostRecentCookieWithLoginname(
   loginName?: string,
-  organization?: string
+  organization?: string,
 ): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");

apps/login/src/utils/session.ts

@@ -6,7 +6,7 @@ import {
   getSession,
   server,
   setSession,
-} from "#/lib/zitadel";
+} from "@/lib/zitadel";
 import {
   SessionCookie,
   addSessionToCookie,
@@ -24,7 +24,7 @@ export async function createSessionAndUpdateCookie(
   password: string | undefined,
   challenges: RequestChallenges | undefined,
   organization?: string,
-  authRequestId?: string
+  authRequestId?: string,
 ): Promise<Session> {
   const createdSession = await createSessionFromChecks(
     server,
@@ -35,14 +35,14 @@ export async function createSessionAndUpdateCookie(
           // totp: { code: totpCode },
         }
       : { user: { loginName } },
-    challenges
+    challenges,
   );
 
   if (createdSession) {
     return getSession(
       server,
       createdSession.sessionId,
-      createdSession.sessionToken
+      createdSession.sessionToken,
     ).then((response) => {
       if (response?.session && response.session?.factors?.user?.loginName) {
         const sessionCookie: SessionCookie = {
@@ -79,7 +79,7 @@ export async function createSessionForUserIdAndUpdateCookie(
   userId: string,
   password: string | undefined,
   challenges: RequestChallenges | undefined,
-  authRequestId: string | undefined
+  authRequestId: string | undefined,
 ): Promise<Session> {
   const createdSession = await createSessionFromChecks(
     server,
@@ -90,14 +90,14 @@ export async function createSessionForUserIdAndUpdateCookie(
           // totp: { code: totpCode },
         }
       : { user: { userId } },
-    challenges
+    challenges,
   );
 
   if (createdSession) {
     return getSession(
       server,
       createdSession.sessionId,
-      createdSession.sessionToken
+      createdSession.sessionToken,
     ).then((response) => {
       if (response?.session && response.session?.factors?.user?.loginName) {
         const sessionCookie: SessionCookie = {
@@ -137,19 +137,19 @@ export async function createSessionForIdpAndUpdateCookie(
     idpIntentToken?: string | undefined;
   },
   organization: string | undefined,
-  authRequestId: string | undefined
+  authRequestId: string | undefined,
 ): Promise<Session> {
   const createdSession = await createSessionForUserIdAndIdpIntent(
     server,
     userId,
-    idpIntent
+    idpIntent,
   );
 
   if (createdSession) {
     return getSession(
       server,
       createdSession.sessionId,
-      createdSession.sessionToken
+      createdSession.sessionToken,
     ).then((response) => {
       if (response?.session && response.session?.factors?.user?.loginName) {
         const sessionCookie: SessionCookie = {
@@ -190,14 +190,14 @@ export async function setSessionAndUpdateCookie(
   recentCookie: SessionCookie,
   checks: Checks,
   challenges: RequestChallenges | undefined,
-  authRequestId: string | undefined
+  authRequestId: string | undefined,
 ): Promise<SessionWithChallenges> {
   return setSession(
     server,
     recentCookie.id,
     recentCookie.token,
     challenges,
-    checks
+    checks,
   ).then((updatedSession) => {
     if (updatedSession) {
       const sessionCookie: SessionCookie = {
@@ -238,7 +238,7 @@ export async function setSessionAndUpdateCookie(
           } else {
             throw "could not get session or session does not have loginName";
           }
-        }
+        },
       );
     } else {
       throw "Session not be set";

apps/login/tailwind.config.js

@@ -26,12 +26,10 @@ types.forEach((type) => {
   themes.forEach((theme) => {
     shades.forEach((shade) => {
       colors[type][theme][shade] = `var(--theme-${theme}-${type}-${shade})`;
-      colors[type][theme][
+      colors[type][theme][`contrast-${shade}`] =
-        `contrast-${shade}`
+        `var(--theme-${theme}-${type}-contrast-${shade})`;
-      ] = `var(--theme-${theme}-${type}-contrast-${shade})`;
+      colors[type][theme][`secondary-${shade}`] =
-      colors[type][theme][
+        `var(--theme-${theme}-${type}-secondary-${shade})`;
-        `secondary-${shade}`
-      ] = `var(--theme-${theme}-${type}-secondary-${shade})`;
     });
   });
 });

apps/login/tsconfig.json

@@ -5,7 +5,7 @@
     "rootDir": ".",
     "baseUrl": ".",
     "paths": {
-      "#/*": ["./*"]
+      "@/*": ["./src/*"]
     },
     "plugins": [
       {

package.json

@@ -20,7 +20,7 @@
     "@changesets/cli": "^2.22.0",
     "eslint": "^7.32.0",
     "eslint-config-zitadel": "workspace:*",
-    "prettier": "^2.5.1",
+    "prettier": "^3.2.5",
     "turbo": "^1.10.8"
   },
   "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589"