chore: upgrade pnpm, pkgs, and fix format

.github/workflows/test.yml

@@ -30,17 +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
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: false
+          node-version: 20.x
 
       - name: Get pnpm store directory
         id: pnpm-cache

.prettierignore

@@ -0,0 +1,3 @@
+.next/
+dist/
+**/src/proto/

CONTRIBUTING.md

@@ -57,6 +57,7 @@ export $(cat ./apps/login/.env.acceptance | xargs)
 ### Developing Against Your ZITADEL Cloud Instance
 
 Configure your shell by exporting the following environment variables:
+
 ```sh
 export ZITADEL_API_URL=<your cloud instance URL here>
 export ZITADEL_ORG_ID=<your service accounts organization id here>
@@ -93,5 +94,4 @@ In apps/login, these commands also spin up the application and a ZITADEL gRPC AP
 If you want to run the integration tests standalone against an environment of your choice, navigate to ./apps/login, [configure your shell as you like](# Developing Against Your ZITADEL Cloud Instance) and run `pnpm test:integration:run` or `pnpm test:integration:open`.
 Then you need to lifecycle the mock process using the command `pnpm mock` or the more fine grained commands `pnpm mock:build`, `pnpm mock:build:nocache`, `pnpm mock:run` and `pnpm mock:destroy`.
 
-
 That's it! 🎉

README.md

@@ -36,7 +36,7 @@ Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
 
 ### Login
 
-The login is currently in a work in progress state. 
+The login is currently in a work in progress state.
 The goal is to implement a login UI, using the session API of ZITADEL, which also implements the OIDC Standard and is ready to use for everyone.
 
 In the first phase we want to have a MVP login ready with the OIDC Standard and a basic feature set. In a second step the features will be extended.
@@ -45,7 +45,7 @@ This list should show the current implementation state, and also what is missing
 You can already use the current state, and extend it with your needs.
 
 - [x] Local User Registration (with Password)
-- [ ] User Registration and Login with external Provider 
+- [ ] User Registration and Login with external Provider
   - [ ] Google
   - [ ] GitHub
   - [ ] GitHub Enterprise
@@ -67,21 +67,21 @@ You can already use the current state, and extend it with your needs.
 - [ ] Domain Discovery
 - [ ] Branding
 - OIDC Standard
-   - [ ] Authorization Code Flow with PKCE
-   - [ ] AuthRequest `hintUserId`
-   - [ ] AuthRequest `loginHint`
-   - [ ] AuthRequest `prompt`
-     - [x] Login
-     - [x] Select Account
-     - [ ] Consent
-     - [ ] Create
-   - Scopes
-     - [ ] `openid email profile address``
-     - [ ] `offline access`
-     - [ ] `urn:zitadel:iam:org:idp:id:{idp_id}`
-     - [ ] `urn:zitadel:iam:org:project:id:zitadel:aud`
-     - [ ] `urn:zitadel:iam:org:id:{orgid}`
-   - [ ] AuthRequest UI locales
+  - [ ] Authorization Code Flow with PKCE
+  - [ ] AuthRequest `hintUserId`
+  - [ ] AuthRequest `loginHint`
+  - [ ] AuthRequest `prompt`
+    - [x] Login
+    - [x] Select Account
+    - [ ] Consent
+    - [ ] Create
+  - Scopes
+    - [ ] `openid email profile address``
+    - [ ] `offline access`
+    - [ ] `urn:zitadel:iam:org:idp:id:{idp_id}`
+    - [ ] `urn:zitadel:iam:org:project:id:zitadel:aud`
+    - [ ] `urn:zitadel:iam:org:id:{orgid}`
+  - [ ] AuthRequest UI locales
 
 ## Tooling
 

apps/login/.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
   extends: ["next/core-web-vitals"],
   ignorePatterns: ["external/**/*.ts"],
+  rules: {
+    "@next/next/no-html-link-for-pages": "off",
+  },
 };

apps/login/__test__/PasswordComplexity.test.tsx

@@ -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/__test__/jest.config.ts

@@ -11,7 +11,7 @@ export default async (): Promise<Config.InitialOptions> => {
     transform: {
       "^.+\\.tsx?$": ["ts-jest", { tsconfig: "<rootDir>/tsconfig.json" }],
     },
-    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
+    setupFilesAfterEnv: ["@testing-library/jest-dom"],
     moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
       prefix: "<rootDir>/../",
     }),

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

@@ -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/app/(login)/idp/[provider]/success/page.tsx

@@ -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/app/(login)/idp/page.tsx

@@ -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/app/(login)/loginname/page.tsx

@@ -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/app/(login)/passkey/add/page.tsx

@@ -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/app/(login)/passkey/login/page.tsx

@@ -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/app/(login)/password/page.tsx

@@ -17,7 +17,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/app/(login)/register/page.tsx

@@ -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/app/api/loginname/route.ts

@@ -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/app/api/passkeys/route.ts

@@ -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/app/api/passkeys/verify/route.ts

@@ -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/app/api/registeruser/route.ts

@@ -29,7 +29,7 @@ export async function POST(request: NextRequest) {
           user.userId,
           password,
           undefined,
-          authRequestId
+          authRequestId,
         ).then((session) => {
           return NextResponse.json({
             userId: user.userId,