feat: github action run the e2e

quochuydev · quochuydev · commit 4792dc50606b · 2025-06-13T13:21:21.000+07:00
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -0,0 +1,67 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: ⬇️ Checkout repository
+        uses: actions/checkout@v4
+
+      - name: ⚙️ Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: 📦 Install dependencies (Yarn)
+        run: yarn install
+
+      - name: 💾 Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            playwright-${{ runner.os }}-
+
+      - name: 🌐 Install Playwright browsers
+        run: cd e2e && yarn add @playwright/test && npx playwright install --with-deps && cd ..
+
+      - name: 🔨 Build Next.js app
+        env:
+          ZITADEL_URL: ${{ secrets.ZITADEL_URL }}
+          ZITADEL_SERVICE_USER_ID: ${{ secrets.ZITADEL_SERVICE_USER_ID }}
+          ZITADEL_SERVICE_USER_TOKEN: ${{ secrets.ZITADEL_SERVICE_USER_TOKEN }}
+        run: |
+          set -e
+          echo "Creating .env file..."
+          echo "ZITADEL_URL=$ZITADEL_URL" >> .env
+          echo "ZITADEL_SERVICE_USER_ID=$ZITADEL_SERVICE_USER_ID" >> .env
+          echo "ZITADEL_SERVICE_USER_TOKEN=$ZITADEL_SERVICE_USER_TOKEN" >> .env
+          yarn build
+          echo "Build completed successfully"
+
+      - name: 🚀 Start app in background on port 3333
+        run: |
+          PORT=3333 yarn start &
+          echo "Deployment completed successfully"
+
+      - name: ⏳ Wait for app to be ready
+        run: npx wait-on http://localhost:3333
+
+      - name: ✅ Run Playwright E2E tests
+        run: cd e2e && yarn test && cd ..
+
+      - name: 📦 Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/app/api/external/link-idp/route.ts b/app/api/external/link-idp/route.ts
diff --git a/components/Loading.tsx b/components/Loading.tsx
@@ -6,7 +6,7 @@ const LoadingState = ({ loading }: { loading?: boolean }) => {
 
   return (
     <div className="w-full h-full opacity-60 bg-white fixed z-50 top-0 left-0">
-      <div className="animate-spin h-[54px] w-[54px] absolute top-0 left-0 right-0 bottom-0 m-auto rounded-full border-8 border-[#DCE0E4] border-t-8 border-t-[#356BF5]" />
+      <div className="animate-spin h-[54px] w-[54px] absolute top-0 left-0 right-0 bottom-0 m-auto rounded-full border-4 border-[#DCE0E4] border-t-4 border-t-[#356BF5]" />
     </div>
   );
 };
diff --git a/configuration.ts b/configuration.ts
@@ -4,6 +4,7 @@ import dotenv from 'dotenv';
 import * as z from 'zod';
 
 type Configuration = {
+  server: string;
   appUrl: string;
   zitadel: {
     url: string;
@@ -19,12 +20,14 @@ if (process.env.DOT_ENV_PATH) {
   const dotenvPath = path.join(process.cwd(), process.env.DOT_ENV_PATH);
   const buffer = fs.readFileSync(dotenvPath);
   const defaultConfig = dotenv.parse(buffer);
+
   Object.entries(defaultConfig).forEach(([key, value]) => {
     if (!process.env[key]) process.env[key] = value;
   });
 }
 
 const configurationSchema = z.object({
+  server: z.string(),
   appUrl: z.string(),
   zitadel: z.object({
     url: z.string(),
@@ -37,7 +40,8 @@ const configurationSchema = z.object({
 });
 
 const configuration: Configuration = {
-  appUrl: process.env.APP_URL as string,
+  server: process.env.SERVER || 'local',
+  appUrl: process.env.APP_URL || 'http://localhost:3333',
   zitadel: {
     url: process.env.ZITADEL_URL as string,
     userId: process.env.ZITADEL_SERVICE_USER_ID as string,
diff --git a/e2e/README.md b/e2e/README.md
@@ -1,3 +1,3 @@
 ```
-yarn test --headed
+(cd e2e && yarn test --headed)
 ```
diff --git a/e2e/package.json b/e2e/package.json
@@ -1,14 +1,14 @@
 {
-  "name": "todomvc-test",
+  "name": "e2e",
   "version": "0.0.1",
   "scripts": {
-    "postinstall": "playwright install-deps && playwright install",
-    "test": "playwright test"
+    "postinstall": "npx playwright install-deps && npx playwright install",
+    "test": "npx playwright test"
   },
   "keywords": [],
   "author": "quochuydev",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.38.0"
+    "@playwright/test": "1.53.0"
   }
 }
diff --git a/e2e/tests/integration.spec.ts b/e2e/tests/integration.spec.ts
@@ -5,8 +5,10 @@ import type { Page } from '@playwright/test';
 
 test.describe.configure({ mode: 'parallel' });
 
+const appUrl = 'http://localhost:3333';
+
 test.beforeEach(async ({ page }: { page: Page }) => {
-  await page.goto('https://zitadel-login-ui-v2.vercel.app/en/login');
+  await page.goto(`${appUrl}/en/login`);
 });
 
 test.describe('Login', () => {
@@ -22,7 +24,7 @@ test.describe('Login', () => {
     const loginButton = page.getByText('Log in');
     await loginButton.click();
 
-    await page.waitForURL('https://zitadel-login-ui-v2.vercel.app/en');
+    await page.waitForURL(`${appUrl}/en`);
 
     expect(true).toBeTruthy();
   });
diff --git a/e2e/yarn.lock b/e2e/yarn.lock
@@ -2,28 +2,28 @@
 # yarn lockfile v1
 
 
-"@playwright/test@^1.38.0":
-  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.44.0.tgz#ac7a764b5ee6a80558bdc0fcbc525fcb81f83465"
-  integrity sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==
+"@playwright/test@1.53.0":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.53.0.tgz#23e0abac142f05b6b315c2da19129178aebb94e4"
+  integrity sha512-15hjKreZDcp7t6TL/7jkAo6Df5STZN09jGiv5dbP9A6vMVncXRqE7/B2SncsyOwrkZRBH2i6/TPOL8BVmm3c7w==
   dependencies:
-    playwright "1.44.0"
+    playwright "1.53.0"
 
 fsevents@2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
-playwright-core@1.44.0:
-  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.44.0.tgz#316c4f0bca0551ffb88b6eb1c97bc0d2d861b0d5"
-  integrity sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==
+playwright-core@1.53.0:
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.53.0.tgz#bf2738cc143116b6130b78e0c644edf2e7e53ff4"
+  integrity sha512-mGLg8m0pm4+mmtB7M89Xw/GSqoNC+twivl8ITteqvAndachozYe2ZA7srU6uleV1vEdAHYqjq+SV8SNxRRFYBw==
 
-playwright@1.44.0:
-  version "1.44.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.44.0.tgz#22894e9b69087f6beb639249323d80fe2b5087ff"
-  integrity sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==
+playwright@1.53.0:
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.53.0.tgz#4eae78aa24e3c714bf71981f80b3310b838692fd"
+  integrity sha512-ghGNnIEYZC4E+YtclRn4/p6oYbdPiASELBIYkBXfaTVKreQUYbMUYQDwS12a8F0/HtIjr/CkGjtwABeFPGcS4Q==
   dependencies:
-    playwright-core "1.44.0"
+    playwright-core "1.53.0"
   optionalDependencies:
     fsevents "2.3.2"
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "prettier": "prettier --write --ignore-unknown .",
     "prettier:check": "prettier --check --ignore-unknown .",
     "start": "next start",
-    "test": "yarn prettier:check && yarn lint"
+    "test": "yarn prettier:check && yarn lint",
+    "test:e2e": "cd e2e && yarn test --headed"
   },
   "lint-staged": {
     "*": "prettier --write --ignore-unknown"
diff --git a/readme.md b/readme.md
@@ -1,5 +1,6 @@
 ### Document
-  https://deepwiki.com/quochuydev/zitadel-login-ui
+
+https://deepwiki.com/quochuydev/zitadel-login-ui
 
 ### Development
 
@@ -12,6 +13,12 @@
 
 ![Create service user](./docs/create-service-user.png)
 
+**Run the app**
+
+```bash
+yarn dev
+```
+
 #### IV.Create service user token: update token to env `ZITADEL_SERVICE_USER_TOKEN`
 
 ![Create service user token](./docs/service-user-token.png)
diff --git a/services/backend/oidc.service.ts b/services/backend/oidc.service.ts
@@ -4,24 +4,22 @@ import { NextResponse } from 'next/server';
 
 export async function handler(request: NextRequest) {
   const zitadelUrl = configuration.zitadel.url;
+  const forwarded = new URL(configuration.appUrl).host;
 
   const url = new URL(
     `${request.nextUrl.pathname}${request.nextUrl.search}`,
     zitadelUrl,
   ).toString();
 
-  const contentType = request.headers.get('content-type');
-  const authorization = request.headers.get('authorization');
-
   const headers = new Headers();
   headers.set('x-zitadel-login-client', configuration.zitadel.userId);
-  // headers.set(
-  //   'x-zitadel-forwarded',
-  //   `host="${new URL(configuration.appUrl).host}"`,
-  // );
-  headers.set('x-zitadel-public-host', new URL(configuration.appUrl).host);
-  headers.set('x-zitadel-instance-host', zitadelUrl.replace('https://', ''));
+  headers.set('x-zitadel-forwarded', `host="${forwarded}"`);
+  headers.set('x-forwarded-proto', 'https');
+
+  const contentType = request.headers.get('content-type');
   contentType && headers.set('content-type', contentType);
+
+  const authorization = request.headers.get('authorization');
   authorization && headers.set('authorization', authorization);
 
   try {
diff --git a/types/api.ts b/types/api.ts
@@ -170,7 +170,7 @@ export type APIStartExternal = {
 };
 
 export type APIExternalLinkIDP = {
-  url: '/api/external/linkIdp';
+  url: '/api/external/link-idp';
   method: 'post';
   data: {
     userId: string;
diff --git a/ui/Login/Login.tsx b/ui/Login/Login.tsx
@@ -21,7 +21,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import { getOrgIdFromAuthRequest } from '#/lib/zitadel';
 
-const LoginPage = (props: {
+const LoginPage: React.FC<{
   appUrl: string;
   authRequest?: AuthRequest;
   application?: Application;
@@ -30,7 +30,7 @@ const LoginPage = (props: {
   orgDisplayName?: string;
   defaultUsername?: string;
   identityProviders?: IdentityProvider[];
-}) => {
+}> = (props) => {
   const { appUrl, authRequest, application, loginSettings, identityProviders } =
     props;
   const [isLoading, setIsLoading] = useState(false);

-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 ```
 -yarn test --headed
 +(cd e2e && yarn test --headed)
 ```
Original file line number	Diff line number	Diff line change
`@@ -1,14 +1,14 @@`
`1`	`1`	`{`
`2`		`- "name": "todomvc-test",`
	`2`	`+ "name": "e2e",`
`3`	`3`	`"version": "0.0.1",`
`4`	`4`	`"scripts": {`
`5`		`- "postinstall": "playwright install-deps && playwright install",`
`6`		`- "test": "playwright test"`
	`5`	`+ "postinstall": "npx playwright install-deps && npx playwright install",`
	`6`	`+ "test": "npx playwright test"`
`7`	`7`	`},`
`8`	`8`	`"keywords": [],`
`9`	`9`	`"author": "quochuydev",`
`10`	`10`	`"license": "ISC",`
`11`	`11`	`"devDependencies": {`
`12`		`- "@playwright/test": "^1.38.0"`
	`12`	`+ "@playwright/test": "1.53.0"`
`13`	`13`	`}`
`14`	`14`	`}`