command adr, prettier import config

.prettierrc.json

@@ -1,5 +0,0 @@
-{
-  "printWidth": 125,
-  "trailingComma": "all",
-  "plugins": ["prettier-plugin-organize-imports"]
-}

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

@@ -1,9 +1,9 @@
+import { getAllSessionCookieIds } from "@/lib/cookies";
 import { getBrandingSettings, listSessions } from "@/lib/zitadel";
+import DynamicTheme from "@/ui/DynamicTheme";
+import SessionsList from "@/ui/SessionsList";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
-import SessionsList from "@/ui/SessionsList";
-import DynamicTheme from "@/ui/DynamicTheme";
-import { getAllSessionCookieIds } from "@/lib/cookies";
 
 async function loadSessions() {
   const ids = await getAllSessionCookieIds();

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

@@ -4,7 +4,6 @@ import {
   getBrandingSettings,
   getSession,
   listAuthenticationMethodTypes,
-  sessionService,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
 import BackButton from "@/ui/BackButton";
@@ -28,7 +27,7 @@ export default async function Page({
     loginName?: string,
     organization?: string,
   ) {
-    return loadMostRecentSession(sessionService, {
+    return loadMostRecentSession({
       loginName,
       organization,
     }).then((session) => {

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

@@ -6,7 +6,6 @@ import {
   getSession,
   getUserByID,
   listAuthenticationMethodTypes,
-  sessionService,
 } from "@/lib/zitadel";
 import Alert from "@/ui/Alert";
 import BackButton from "@/ui/BackButton";
@@ -30,7 +29,7 @@ export default async function Page({
     loginName?: string,
     organization?: string,
   ) {
-    return loadMostRecentSession(sessionService, {
+    return loadMostRecentSession({
       loginName,
       organization,
     }).then((session) => {

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

@@ -1,3 +1,4 @@
+import { loadMostRecentSession } from "@/lib/session";
 import {
   addOTPEmail,
   addOTPSMS,
@@ -11,9 +12,8 @@ import { Button, ButtonVariants } from "@/ui/Button";
 import DynamicTheme from "@/ui/DynamicTheme";
 import TOTPRegister from "@/ui/TOTPRegister";
 import UserAvatar from "@/ui/UserAvatar";
-import Link from "next/link";
 import { RegisterTOTPResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { loadMostRecentSession } from "@/lib/session";
+import Link from "next/link";
 
 export default async function Page({
   searchParams,

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

@@ -1,13 +1,13 @@
+import { getMostRecentCookieWithLoginname } from "@/lib/cookies";
 import { createCallback, getBrandingSettings, getSession } from "@/lib/zitadel";
 import DynamicTheme from "@/ui/DynamicTheme";
 import UserAvatar from "@/ui/UserAvatar";
 import { create } from "@zitadel/client";
-import { redirect } from "next/navigation";
 import {
   CreateCallbackRequestSchema,
   SessionSchema,
 } from "@zitadel/proto/zitadel/oidc/v2/oidc_service_pb";
-import { getMostRecentCookieWithLoginname } from "@/lib/cookies";
+import { redirect } from "next/navigation";
 
 async function loadSession(loginName: string, authRequestId?: string) {
   const recent = await getMostRecentCookieWithLoginname({ loginName });

apps/login/src/app/layout.tsx

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

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

@@ -7,6 +7,8 @@ export const dynamic = "force-dynamic";
 export const revalidate = false;
 export const fetchCache = "default-no-store";
 
+import { getAllSessions } from "@/lib/cookies";
+import { idpTypeToSlug } from "@/lib/idp";
 import {
   createCallback,
   getActiveIdentityProviders,
@@ -15,16 +17,13 @@ import {
   listSessions,
   startIdentityProviderFlow,
 } from "@/lib/zitadel";
-import { NextRequest, NextResponse } from "next/server";
+import { create } from "@zitadel/client";
-import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import {
   AuthRequest,
   Prompt,
 } from "@zitadel/proto/zitadel/oidc/v2/authorization_pb";
-import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
-import { idpTypeToSlug } from "@/lib/idp";
+import { NextRequest, NextResponse } from "next/server";
-import { create } from "@zitadel/client";
-import { getAllSessions } from "@/lib/cookies";
 
 async function loadSessions(ids: string[]): Promise<Session[]> {
   const response = await listSessions(

apps/login/src/lib/cookies.ts

@@ -26,13 +26,20 @@ function setSessionHttpOnlyCookie<T>(sessions: SessionCookie<T>[]) {
   });
 }
 
-export async function addSessionToCookie<T>(session: SessionCookie<T>, cleanup: boolean = false): Promise<any> {
+export async function addSessionToCookie<T>(
+  session: SessionCookie<T>,
+  cleanup: boolean = false,
+): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
 
-  let currentSessions: SessionCookie<T>[] = stringifiedCookie?.value ? JSON.parse(stringifiedCookie?.value) : [];
+  let currentSessions: SessionCookie<T>[] = stringifiedCookie?.value
+    ? JSON.parse(stringifiedCookie?.value)
+    : [];
 
-  const index = currentSessions.findIndex((s) => s.loginName === session.loginName);
+  const index = currentSessions.findIndex(
+    (s) => s.loginName === session.loginName,
+  );
 
   if (index > -1) {
     currentSessions[index] = session;
@@ -51,11 +58,17 @@ export async function addSessionToCookie<T>(session: SessionCookie<T>, cleanup:
   }
 }
 
-export async function updateSessionCookie<T>(id: string, session: SessionCookie<T>, cleanup: boolean = false): Promise<any> {
+export async function updateSessionCookie<T>(
+  id: string,
+  session: SessionCookie<T>,
+  cleanup: boolean = false,
+): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
 
-  const sessions: SessionCookie<T>[] = stringifiedCookie?.value ? JSON.parse(stringifiedCookie?.value) : [session];
+  const sessions: SessionCookie<T>[] = stringifiedCookie?.value
+    ? JSON.parse(stringifiedCookie?.value)
+    : [session];
 
   const foundIndex = sessions.findIndex((session) => session.id === id);
 
@@ -75,11 +88,16 @@ export async function updateSessionCookie<T>(id: string, session: SessionCookie<
   }
 }
 
-export async function removeSessionFromCookie<T>(session: SessionCookie<T>, cleanup: boolean = false): Promise<any> {
+export async function removeSessionFromCookie<T>(
+  session: SessionCookie<T>,
+  cleanup: boolean = false,
+): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
 
-  const sessions: SessionCookie<T>[] = stringifiedCookie?.value ? JSON.parse(stringifiedCookie?.value) : [session];
+  const sessions: SessionCookie<T>[] = stringifiedCookie?.value
+    ? JSON.parse(stringifiedCookie?.value)
+    : [session];
 
   const reducedSessions = sessions.filter((s) => s.id !== session.id);
   if (cleanup) {
@@ -101,7 +119,10 @@ export async function getMostRecentSessionCookie<T>(): Promise<any> {
     const sessions: SessionCookie<T>[] = JSON.parse(stringifiedCookie?.value);
 
     const latest = sessions.reduce((prev, current) => {
-      return new Date(prev.changeDate).getTime() > new Date(current.changeDate).getTime() ? prev : current;
+      return new Date(prev.changeDate).getTime() >
+        new Date(current.changeDate).getTime()
+        ? prev
+        : current;
     });
 
     return latest;
@@ -124,7 +145,9 @@ export async function getSessionCookieById<T>({
     const sessions: SessionCookie<T>[] = JSON.parse(stringifiedCookie?.value);
 
     const found = sessions.find((s) =>
-      organization ? s.organization === organization && s.id === sessionId : s.id === sessionId,
+      organization
+        ? s.organization === organization && s.id === sessionId
+        : s.id === sessionId,
     );
     if (found) {
       return found;
@@ -149,7 +172,9 @@ export async function getSessionCookieByLoginName<T>({
   if (stringifiedCookie?.value) {
     const sessions: SessionCookie<T>[] = JSON.parse(stringifiedCookie?.value);
     const found = sessions.find((s) =>
-      organization ? s.organization === organization && s.loginName === loginName : s.loginName === loginName,
+      organization
+        ? s.organization === organization && s.loginName === loginName
+        : s.loginName === loginName,
     );
     if (found) {
       return found;
@@ -166,7 +191,9 @@ export async function getSessionCookieByLoginName<T>({
  * @param cleanup when true, removes all expired sessions, default true
  * @returns Session Cookies
  */
-export async function getAllSessionCookieIds<T>(cleanup: boolean = false): Promise<any> {
+export async function getAllSessionCookieIds<T>(
+  cleanup: boolean = false,
+): Promise<any> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
 
@@ -176,7 +203,11 @@ export async function getAllSessionCookieIds<T>(cleanup: boolean = false): Promi
     if (cleanup) {
       const now = new Date();
       return sessions
-        .filter((session) => (session.expirationDate ? new Date(session.expirationDate) > now : true))
+        .filter((session) =>
+          session.expirationDate
+            ? new Date(session.expirationDate) > now
+            : true,
+        )
         .map((session) => session.id);
     } else {
       return sessions.map((session) => session.id);
@@ -191,7 +222,9 @@ export async function getAllSessionCookieIds<T>(cleanup: boolean = false): Promi
  * @param cleanup when true, removes all expired sessions, default true
  * @returns Session Cookies
  */
-export async function getAllSessions<T>(cleanup: boolean = false): Promise<SessionCookie<T>[]> {
+export async function getAllSessions<T>(
+  cleanup: boolean = false,
+): Promise<SessionCookie<T>[]> {
   const cookiesList = cookies();
   const stringifiedCookie = cookiesList.get("sessions");
 
@@ -200,7 +233,9 @@ export async function getAllSessions<T>(cleanup: boolean = false): Promise<Sessi
 
     if (cleanup) {
       const now = new Date();
-      return sessions.filter((session) => (session.expirationDate ? new Date(session.expirationDate) > now : true));
+      return sessions.filter((session) =>
+        session.expirationDate ? new Date(session.expirationDate) > now : true,
+      );
     } else {
       return sessions;
     }
@@ -240,7 +275,10 @@ export async function getMostRecentCookieWithLoginname<T>({
     const latest =
       filtered && filtered.length
         ? filtered.reduce((prev, current) => {
-            return new Date(prev.changeDate).getTime() > new Date(current.changeDate).getTime() ? prev : current;
+            return new Date(prev.changeDate).getTime() >
+              new Date(current.changeDate).getTime()
+              ? prev
+              : current;
           })
         : undefined;
 

apps/login/src/lib/idp.ts

@@ -1,10 +1,10 @@
+import { create } from "@zitadel/client";
+import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { IDPInformation } from "@zitadel/proto/zitadel/user/v2/idp_pb";
 import {
   AddHumanUserRequest,
   AddHumanUserRequestSchema,
 } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { IDPInformation } from "@zitadel/proto/zitadel/user/v2/idp_pb";
-import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
-import { create } from "@zitadel/client";
 
 // This maps the IdentityProviderType to a slug which is used in the /success and /failure routes
 export function idpTypeToSlug(idpType: IdentityProviderType) {

apps/login/src/lib/server/loginname.ts

@@ -1,6 +1,8 @@
 "use server";
 
 import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { createSessionForUserIdAndUpdateCookie } from "../../utils/session";
 import { idpTypeToSlug } from "../idp";
 import {
   getActiveIdentityProviders,
@@ -9,8 +11,6 @@ import {
   listUsers,
   startIdentityProviderFlow,
 } from "../zitadel";
-import { createSessionForUserIdAndUpdateCookie } from "../../utils/session";
-import { redirect } from "next/navigation";
 
 export type SendLoginnameCommand = {
   loginName: string;

apps/login/src/lib/server/otp.ts

@@ -1,12 +1,12 @@
 "use server";
 
 import { setSessionAndUpdateCookie } from "@/utils/session";
+import { create } from "@zitadel/client";
 import {
   CheckOTPSchema,
   ChecksSchema,
   CheckTOTPSchema,
 } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
-import { create } from "@zitadel/client";
 import {
   getMostRecentSessionCookie,
   getSessionCookieById,

apps/login/src/lib/server/passkeys.ts

@@ -6,11 +6,13 @@ import {
   registerPasskey,
   verifyPasskeyRegistration,
 } from "@/lib/zitadel";
-import { userAgent } from "next/server";
 import { create } from "@zitadel/client";
-import { VerifyPasskeyRegistrationRequestSchema } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import {
+  RegisterPasskeyResponse,
+  VerifyPasskeyRegistrationRequestSchema,
+} from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { headers } from "next/headers";
-import { RegisterPasskeyResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { userAgent } from "next/server";
 import { getSessionCookieById } from "../cookies";
 
 type VerifyPasskeyCommand = {

apps/login/src/lib/server/session.ts

@@ -1,23 +1,14 @@
 "use server";
 
-import {
+import { deleteSession, listAuthenticationMethodTypes } from "@/lib/zitadel";
-  deleteSession,
-  getSession,
-  getUserByID,
-  listAuthenticationMethodTypes,
-} from "@/lib/zitadel";
 import {
   createSessionAndUpdateCookie,
   createSessionForIdpAndUpdateCookie,
   setSessionAndUpdateCookie,
 } from "@/utils/session";
-import { headers } from "next/headers";
+import { RequestChallenges } from "@zitadel/proto/zitadel/session/v2/challenge_pb";
 import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
-import {
+import { headers } from "next/headers";
-  RequestChallenges,
-  RequestChallengesSchema,
-} from "@zitadel/proto/zitadel/session/v2/challenge_pb";
-import { create } from "@zitadel/client";
 import {
   getMostRecentSessionCookie,
   getSessionCookieById,

apps/login/src/lib/server/u2f.ts

@@ -1,10 +1,10 @@
 "use server";
 
 import { getSession, registerU2F, verifyU2FRegistration } from "@/lib/zitadel";
-import { userAgent } from "next/server";
-import { VerifyU2FRegistrationRequestSchema } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { create } from "@zitadel/client";
+import { VerifyU2FRegistrationRequestSchema } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { headers } from "next/headers";
+import { userAgent } from "next/server";
 import { getSessionCookieById } from "../cookies";
 
 type RegisterU2FCommand = {

apps/login/src/lib/session.ts

@@ -1,11 +1,12 @@
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { GetSessionResponse } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { getMostRecentCookieWithLoginname } from "./cookies";
+import { sessionService } from "./zitadel";
 
-export async function loadMostRecentSession(
+export async function loadMostRecentSession(sessionParams: {
-  sessionService: any, // TODO: SessionServiceClient,
+  loginName?: string;
-  sessionParams: { loginName?: string; organization?: string },
+  organization?: string;
-): Promise<Session | undefined> {
+}): Promise<Session | undefined> {
   const recent = await getMostRecentCookieWithLoginname({
     loginName: sessionParams.loginName,
     organization: sessionParams.organization,

apps/login/src/lib/zitadel.ts

@@ -1,22 +1,24 @@
 import {
+  createIdpServiceClient,
   createOIDCServiceClient,
+  createOrganizationServiceClient,
   createSessionServiceClient,
   createSettingsServiceClient,
   createUserServiceClient,
-  createIdpServiceClient,
   makeReqCtx,
-  createOrganizationServiceClient,
 } from "@zitadel/client/v2";
 import { createServerTransport } from "@zitadel/node";
-import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { RequestChallenges } from "@zitadel/proto/zitadel/session/v2/challenge_pb";
+import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { IDPInformation } from "@zitadel/proto/zitadel/user/v2/idp_pb";
 import {
   RetrieveIdentityProviderIntentRequest,
   VerifyPasskeyRegistrationRequest,
   VerifyU2FRegistrationRequest,
 } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { IDPInformation } from "@zitadel/proto/zitadel/user/v2/idp_pb";
 
+import { create } from "@zitadel/client";
+import { TextQueryMethod } from "@zitadel/proto/zitadel/object/v2/object_pb";
 import { CreateCallbackRequest } from "@zitadel/proto/zitadel/oidc/v2/oidc_service_pb";
 import type { RedirectURLsJson } from "@zitadel/proto/zitadel/user/v2/idp_pb";
 import {
@@ -24,8 +26,6 @@ import {
   SearchQuerySchema,
 } from "@zitadel/proto/zitadel/user/v2/query_pb";
 import { PROVIDER_MAPPING } from "./idp";
-import { create } from "@zitadel/client";
-import { TextQueryMethod } from "@zitadel/proto/zitadel/object/v2/object_pb";
 
 const SESSION_LIFETIME_S = 3000;
 

apps/login/src/middleware.ts

@@ -1,5 +1,5 @@
-import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
 
 export const config = {
   matcher: [

apps/login/src/ui/AddressBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import React from "react";
 import { usePathname } from "next/navigation";
+import React from "react";
 
 type Props = {
   domain: string;

apps/login/src/ui/AuthMethods.tsx

@@ -1,8 +1,8 @@
+import { CheckIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import Link from "next/link";
-import { BadgeState, StateBadge } from "./StateBadge";
-import { CheckIcon } from "@heroicons/react/24/solid";
 import { ReactNode } from "react";
+import { BadgeState, StateBadge } from "./StateBadge";
 
 const cardClasses = (alreadyAdded: boolean) =>
   clsx(

apps/login/src/ui/Button.tsx

@@ -1,10 +1,5 @@
 import clsx from "clsx";
-import React, {
+import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  ReactNode,
-  forwardRef,
-} from "react";
 
 export enum ButtonSizes {
   Small = "Small",

apps/login/src/ui/Checkbox.tsx

@@ -1,5 +1,5 @@
 import classNames from "clsx";
-import React, {
+import {
   DetailedHTMLProps,
   forwardRef,
   InputHTMLAttributes,

apps/login/src/ui/ChooseSecondFactor.tsx

@@ -1,11 +1,7 @@
 "use client";
 
-import Link from "next/link";
-import { BadgeState, StateBadge } from "./StateBadge";
-import clsx from "clsx";
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
 
 type Props = {
   loginName?: string;

apps/login/src/ui/ChooseSecondFactorToSetup.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
 import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
 
 type Props = {
   loginName?: string;

apps/login/src/ui/DynamicTheme.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React from "react";
 import { Logo } from "@/ui/Logo";
-import ThemeWrapper from "./ThemeWrapper";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
+import React from "react";
+import ThemeWrapper from "./ThemeWrapper";
 
 export default function DynamicTheme({
   branding,

apps/login/src/ui/GlobalNav.tsx

@@ -2,10 +2,10 @@
 
 import { demos, type Item } from "@/lib/demos";
 import { ZitadelLogo } from "@/ui/ZitadelLogo";
-import Link from "next/link";
-import { useSelectedLayoutSegment, usePathname } from "next/navigation";
-import clsx from "clsx";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname, useSelectedLayoutSegment } from "next/navigation";
 import { useState } from "react";
 import Theme from "./Theme";
 

apps/login/src/ui/IdpSignin.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Spinner } from "./Spinner";
-import Alert from "./Alert";
-import { useRouter } from "next/navigation";
 import { createNewSession } from "@/lib/server/session";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Alert from "./Alert";
+import { Spinner } from "./Spinner";
 
 type Props = {
   userId: string;

apps/login/src/ui/Input.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
-import React, {
+import {
   ChangeEvent,
   DetailedHTMLProps,
   forwardRef,

apps/login/src/ui/LoginOTP.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import { Button, ButtonVariants } from "./Button";
-import Alert, { AlertType } from "./Alert";
-import { Spinner } from "./Spinner";
-import { useForm } from "react-hook-form";
-import { TextInput } from "./Input";
-import BackButton from "./BackButton";
-import { ChecksJson } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { ChallengesJson } from "@zitadel/proto/zitadel/session/v2/challenge_pb";
+import { ChecksJson } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import Alert, { AlertType } from "./Alert";
+import BackButton from "./BackButton";
+import { Button, ButtonVariants } from "./Button";
+import { TextInput } from "./Input";
+import { Spinner } from "./Spinner";
 
 // either loginName or sessionId must be provided
 type Props = {

apps/login/src/ui/LoginPasskey.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
-import { Button, ButtonVariants } from "./Button";
-import Alert from "./Alert";
-import { Spinner } from "./Spinner";
-import BackButton from "./BackButton";
-import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { updateSession } from "@/lib/server/session";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import { create } from "@zitadel/client";
 import {
   RequestChallengesSchema,
   UserVerificationRequirement,
 } from "@zitadel/proto/zitadel/session/v2/challenge_pb";
-import { create } from "@zitadel/client";
+import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import Alert from "./Alert";
+import BackButton from "./BackButton";
+import { Button, ButtonVariants } from "./Button";
+import { Spinner } from "./Spinner";
 
 // either loginName or sessionId must be provided
 type Props = {

apps/login/src/ui/PasswordComplexity.test.tsx

@@ -1,11 +1,11 @@
-import { expect, describe, test, beforeEach, afterEach } from "vitest";
 import {
-  render,
   cleanup,
+  render,
   screen,
   waitFor,
   within,
 } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import PasswordComplexity from "./PasswordComplexity";
 
 const matchesTitle = `Matches`;

apps/login/src/ui/PasswordForm.tsx

@@ -1,23 +1,19 @@
 "use client";
 
-import { useState } from "react";
+import { resetPassword } from "@/lib/server/password";
-import { Button, ButtonVariants } from "./Button";
+import { updateSession } from "@/lib/server/session";
-import { TextInput } from "./Input";
+import { create } from "@zitadel/client";
-import { useForm } from "react-hook-form";
+import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
+import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { useRouter } from "next/navigation";
-import { Spinner } from "./Spinner";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import Alert from "./Alert";
 import BackButton from "./BackButton";
-import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { Button, ButtonVariants } from "./Button";
-import {
+import { TextInput } from "./Input";
-  CheckPassword,
+import { Spinner } from "./Spinner";
-  Checks,
-  ChecksSchema,
-} from "@zitadel/proto/zitadel/session/v2/session_service_pb";
-import { create } from "@zitadel/client";
-import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { updateSession } from "@/lib/server/session";
-import { resetPassword } from "@/lib/server/password";
 
 type Inputs = {
   password: string;

apps/login/src/ui/PrivacyPolicyCheckboxes.tsx

@@ -1,8 +1,8 @@
 "use client";
-import React, { useState } from "react";
-import Link from "next/link";
-import { Checkbox } from "./Checkbox";
 import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
+import Link from "next/link";
+import { useState } from "react";
+import { Checkbox } from "./Checkbox";
 
 type Props = {
   legal: LegalAndSupportSettings;

apps/login/src/ui/RegisterFormWithoutPassword.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import { useState } from "react";
+import { registerUser } from "@/lib/server/register";
-import { Button, ButtonVariants } from "./Button";
+import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
-import { TextInput } from "./Input";
-import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
-import { FieldValues, useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
-import { Spinner } from "./Spinner";
+import { useState } from "react";
+import { FieldValues, useForm } from "react-hook-form";
+import Alert from "./Alert";
 import AuthenticationMethodRadio, {
   methods,
 } from "./AuthenticationMethodRadio";
-import Alert from "./Alert";
 import BackButton from "./BackButton";
-import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
+import { Button, ButtonVariants } from "./Button";
-import { registerUser } from "@/lib/server/register";
+import { TextInput } from "./Input";
+import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
+import { Spinner } from "./Spinner";
 
 type Inputs =
   | {

apps/login/src/ui/RegisterPasskey.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import { useState } from "react";
-import { Button, ButtonVariants } from "./Button";
-import { useForm } from "react-hook-form";
-import { useRouter } from "next/navigation";
-import { Spinner } from "./Spinner";
-import Alert from "./Alert";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
-import BackButton from "./BackButton";
-import { RegisterPasskeyResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { registerPasskeyLink, verifyPasskey } from "@/lib/server/passkeys";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import Alert from "./Alert";
+import BackButton from "./BackButton";
+import { Button, ButtonVariants } from "./Button";
+import { Spinner } from "./Spinner";
 
 type Inputs = {};
 

apps/login/src/ui/RegisterU2F.tsx

@@ -1,15 +1,13 @@
 "use client";
 
-import { useState } from "react";
-import { Button, ButtonVariants } from "./Button";
-import { useForm } from "react-hook-form";
-import { useRouter } from "next/navigation";
-import { Spinner } from "./Spinner";
-import Alert from "./Alert";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
-import BackButton from "./BackButton";
-import { RegisterU2FResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { addU2F, verifyU2F } from "@/lib/server/u2f";
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Alert from "./Alert";
+import BackButton from "./BackButton";
+import { Button, ButtonVariants } from "./Button";
+import { Spinner } from "./Spinner";
 
 type Inputs = {};
 

apps/login/src/ui/SessionItem.tsx

@@ -1,14 +1,13 @@
 "use client";
 
+import { cleanupSession } from "@/lib/server/session";
+import { XCircleIcon } from "@heroicons/react/24/outline";
+import { timestampDate } from "@zitadel/client";
+import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import moment from "moment";
 import Link from "next/link";
 import { useState } from "react";
 import { Avatar } from "./Avatar";
-import moment from "moment";
-import { XCircleIcon } from "@heroicons/react/24/outline";
-import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
-import { timestampDate } from "@zitadel/client";
-import { deleteSession } from "@/lib/zitadel";
-import { cleanupSession } from "@/lib/server/session";
 
 export default function SessionItem({
   session,

apps/login/src/ui/SessionsList.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import SessionItem from "./SessionItem";
-import Alert from "./Alert";
-import { useEffect, useState } from "react";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
+import { useState } from "react";
+import Alert from "./Alert";
+import SessionItem from "./SessionItem";
 
 type Props = {
   sessions: Session[];

apps/login/src/ui/SetPasswordForm.tsx

@@ -1,21 +1,21 @@
 "use client";
 
-import PasswordComplexity from "./PasswordComplexity";
+import { registerUser } from "@/lib/server/register";
-import { useState } from "react";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { FieldValues, useForm } from "react-hook-form";
 import {
   lowerCaseValidator,
   numberValidator,
   symbolValidator,
   upperCaseValidator,
 } from "@/utils/validators";
-import { useRouter } from "next/navigation";
-import { Spinner } from "./Spinner";
-import Alert from "./Alert";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
-import { registerUser } from "@/lib/server/register";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { FieldValues, useForm } from "react-hook-form";
+import Alert from "./Alert";
+import { Button, ButtonVariants } from "./Button";
+import { TextInput } from "./Input";
+import PasswordComplexity from "./PasswordComplexity";
+import { Spinner } from "./Spinner";
 
 type Inputs =
   | {

apps/login/src/ui/SignInWithIDP.tsx

@@ -1,16 +1,18 @@
 "use client";
 
-import { ReactNode, useState } from "react";
-import { useRouter } from "next/navigation";
-import Alert from "./Alert";
-import { IdentityProvider } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { idpTypeToSlug } from "@/lib/idp";
-import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { startIDPFlow } from "@/lib/server/idp";
-import { SignInWithGithub } from "./idps/SignInWithGithub";
+import {
+  IdentityProvider,
+  IdentityProviderType,
+} from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
+import { useRouter } from "next/navigation";
+import { ReactNode, useState } from "react";
+import Alert from "./Alert";
 import { SignInWithAzureAD } from "./idps/SignInWithAzureAD";
-import { SignInWithGoogle } from "./idps/SignInWithGoogle";
+import { SignInWithGithub } from "./idps/SignInWithGithub";
 import { SignInWithGitlab } from "./idps/SignInWithGitlab";
+import { SignInWithGoogle } from "./idps/SignInWithGoogle";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;

apps/login/src/ui/TOTPRegister.tsx

@@ -1,15 +1,15 @@
 "use client";
-import { QRCodeSVG } from "qrcode.react";
+import { verifyTOTP } from "@/lib/server-actions";
-import Alert, { AlertType } from "./Alert";
 import Link from "next/link";
-import CopyToClipboard from "./CopyToClipboard";
+import { useRouter } from "next/navigation";
-import { TextInput } from "./Input";
+import { QRCodeSVG } from "qrcode.react";
-import { Button, ButtonVariants } from "./Button";
-import { Spinner } from "./Spinner";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { useRouter } from "next/navigation";
+import Alert from "./Alert";
-import { verifyTOTP } from "@/lib/server-actions";
+import { Button, ButtonVariants } from "./Button";
+import CopyToClipboard from "./CopyToClipboard";
+import { TextInput } from "./Input";
+import { Spinner } from "./Spinner";
 
 type Inputs = {
   code: string;

apps/login/src/ui/Theme.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import { useTheme } from "next-themes";
 import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 function Theme() {
   const { resolvedTheme, setTheme } = useTheme();

apps/login/src/ui/ThemeWrapper.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { setTheme } from "@/utils/colors";
-import { ReactNode, useEffect } from "react";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
+import { ReactNode, useEffect } from "react";
 
 type Props = {
   branding: BrandingSettings | undefined;

apps/login/src/ui/UsernameForm.tsx

@@ -1,19 +1,19 @@
 "use client";
 
-import { ReactNode, useEffect, useState } from "react";
+import { sendLoginname } from "@/lib/server/loginname";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { useForm } from "react-hook-form";
-import { useRouter } from "next/navigation";
-import { Spinner } from "./Spinner";
-import Alert from "./Alert";
 import {
   LoginSettings,
   PasskeysType,
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
-import BackButton from "./BackButton";
-import { sendLoginname } from "@/lib/server/loginname";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
+import { useRouter } from "next/navigation";
+import { ReactNode, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import Alert from "./Alert";
+import BackButton from "./BackButton";
+import { Button, ButtonVariants } from "./Button";
+import { TextInput } from "./Input";
+import { Spinner } from "./Spinner";
 
 type Inputs = {
   loginName: string;

apps/login/src/ui/VerifyEmailForm.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import { resendVerifyEmail, verifyUserByEmail } from "@/lib/server/email";
+import Alert from "@/ui/Alert";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
 import { Button, ButtonVariants } from "./Button";
 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 { resendVerifyEmail, verifyUserByEmail } from "@/lib/server/email";
 
 type Inputs = {
   code: string;

apps/login/src/ui/ZitadelLogo.tsx

@@ -1,6 +1,4 @@
 import Image from "next/image";
-import { ZitadelLogoDark } from "./ZitadelLogoDark";
-import { ZitadelLogoLight } from "./ZitadelLogoLight";
 type Props = {
   height?: number;
   width?: number;

apps/login/src/utils/colors.ts

@@ -1,5 +1,5 @@
-import tinycolor from "tinycolor2";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
+import tinycolor from "tinycolor2";
 
 export interface Color {
   name: string;

apps/login/src/utils/session.ts

@@ -1,11 +1,13 @@
 "use server";
 
+import { addSessionToCookie, updateSessionCookie } from "@/lib/cookies";
 import {
-  createSessionFromChecks,
   createSessionForUserIdAndIdpIntent,
+  createSessionFromChecks,
   getSession,
   setSession,
 } from "@/lib/zitadel";
+import { create, timestampDate, toDate } from "@zitadel/client";
 import {
   Challenges,
   RequestChallenges,
@@ -15,9 +17,6 @@ import {
   Checks,
   ChecksSchema,
 } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
-import { timestampDate, toDate } from "@zitadel/client";
-import { create } from "@zitadel/client";
-import { addSessionToCookie, updateSessionCookie } from "@/lib/cookies";
 
 type CustomCookieData = {
   id: string;

apps/login/vitest.config.mts

@@ -1,6 +1,6 @@
-import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   plugins: [tsconfigPaths(), react()],

package.json

@@ -28,6 +28,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "8.57.0",
     "eslint-config-zitadel": "workspace:*",
+    "@zitadel/prettier-config": "workspace:^",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^4.0.0",
     "tsup": "^8.2.4",

packages/zitadel-prettier-config/index.js

@@ -7,4 +7,5 @@ export default {
   trailingComma: 'all',
   bracketSpacing: true,
   arrowParens: 'always',
+  plugins: ["prettier-plugin-organize-imports"]
 };

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^4.2.1
         version: 4.3.1(vite@5.4.2)
+      '@zitadel/prettier-config':
+        specifier: workspace:^
+        version: link:packages/zitadel-prettier-config
       eslint:
         specifier: 8.57.0
         version: 8.57.0

prettier.config.cjs

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