feat(demo): Kit Auth Firebase demo with Playwright e2e

.github/workflows/lint.yml

@@ -63,3 +63,35 @@ jobs:
           cache-dependency-path: '**/package-lock.json'
       - run: npm ci
       - run: npm run test:actions
+  e2e:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.57.0-noble
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 24
+          cache: npm
+          cache-dependency-path: '**/package-lock.json'
+      - name: Cache Angular
+        uses: actions/cache@v5
+        with:
+          path: .angular/cache
+          key: ${{ runner.os }}-angular-${{ hashFiles('package-lock.json') }}-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-angular-${{ hashFiles('package-lock.json') }}-
+            ${{ runner.os }}-angular-
+      - run: npm ci
+      - name: Run e2e tests
+        run: npm run e2e
+        env:
+          CI: true
+          HOME: /root
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -44,3 +44,9 @@ Thumbs.db
 # Generated files
 projects/scroll-header/css
 projects/ionic-theme-ios26/css
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -22,10 +22,20 @@ Sponsoring means you directly contribute to new features, improvements, and main
 
 | package name                        | description                                                                                | path                                                                                                       |
 |-------------------------------------|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|
+| @rdlabo/ionic-angular-kit           | Auth guards, Firebase flows, storage, overlay, HTTP interceptor, and other fleet helpers.  | [/projects/kit](https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/kit#readme) |
 | @rdlabo/ionic-angular-photo-editor  | This is a photo editor and viewer for modal page of Ionic Angular project using Capacitor. | [/project/photo-editor](https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/photo-editor#readme)   |
 | @rdlabo/ionic-angular-scroll-header | This is directive for scroll with Header.                                                  | [/project/scroll-header](https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/scroll-header#readme) |
 | @rdlabo/ngx-cdk-scroll-strategies | This is directive for virtual scroll of dynamic item size.                                 | [/project/scroll-strategies](https://github.com/rdlabo-team/ionic-angular-library/tree/main/projects/scroll-strategies#readme) |
 
+### Kit Auth demo
+
+The demo app includes a **Kit** tab with a Firebase Auth harness (`/main/kit/auth`).
+
+1. Fill `projects/demo/src/environments/environment.ts` (`firebase`).
+2. `npm start` — open the Kit tab.
+3. `npm run e2e` — Playwright signs up with a UUID email; `window.__E2E__` skips email confirmation.
+4. `npm run cap` — copy a production build to iOS/Android for device checks (e.g. `kitAuthInput` autofill).
+
 
 ## sponsors
 

angular.json

@@ -34,7 +34,13 @@
           },
           "configurations": {
             "production": {
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "projects/demo/src/environments/environment.ts",
+                  "with": "projects/demo/src/environments/environment.prod.ts"
+                }
+              ]
             },
             "development": {
               "optimization": false,

e2e/auth-signup-signin.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+import { clearAuthState, enableE2eFlag, fillEmailPassword, resetAuth } from './helpers';
+
+const PASSWORD = 'KitAuthE2E!2026';
+const HOME_URL = /\/main\/kit\/auth\/home/;
+
+test.describe('Kit Auth (Firebase + confirm bypass)', () => {
+  test.beforeEach(async ({ page }) => {
+    await enableE2eFlag(page);
+  });
+
+  test('signup with UUID email skips confirm and reaches home', async ({ page }) => {
+    const email = `kit-auth-e2e-${crypto.randomUUID()}@example.com`;
+    await resetAuth(page);
+
+    await page.goto('/main/kit/auth/signup');
+    await fillEmailPassword(page, email, PASSWORD);
+    await page.getByTestId('auth-signup').click();
+
+    await page.waitForURL(HOME_URL, { timeout: 30000 });
+    await expect(page.getByTestId('auth-home')).toBeVisible();
+    await expect(page.getByTestId('auth-state')).toHaveText(/user|anonymous/);
+    await expect(page.getByTestId('auth-email-display')).toContainText(email);
+  });
+
+  test('sign in after signup with the same UUID email', async ({ page }) => {
+    const email = `kit-auth-e2e-${crypto.randomUUID()}@example.com`;
+    await resetAuth(page);
+
+    await page.goto('/main/kit/auth/signup');
+    await fillEmailPassword(page, email, PASSWORD);
+    await page.getByTestId('auth-signup').click();
+    await page.waitForURL(HOME_URL, { timeout: 30000 });
+
+    await clearAuthState(page);
+    await page.goto('/main/kit/auth/signin');
+
+    await fillEmailPassword(page, email, PASSWORD);
+    await page.getByTestId('auth-signin').click();
+
+    await page.waitForURL(HOME_URL, { timeout: 30000 });
+    await expect(page.getByTestId('auth-home')).toBeVisible();
+    await expect(page.getByTestId('auth-email-display')).toContainText(email);
+
+    await page.getByTestId('auth-signout').click();
+    await page.waitForURL(/\/main\/kit\/auth\/signin/, { timeout: 15000 });
+  });
+});

e2e/helpers.ts

@@ -0,0 +1,54 @@
+import type { Page } from '@playwright/test';
+
+/** Must run before any navigation so `environment.e2e` sees `__E2E__` at module load. */
+export async function enableE2eFlag(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    (window as { __E2E__?: boolean }).__E2E__ = true;
+  });
+}
+
+export async function fillEmailPassword(page: Page, email: string, password: string): Promise<void> {
+  const emailInput = page.getByTestId('auth-email').locator('input').or(page.locator('input[type="email"]')).first();
+  await emailInput.waitFor({ state: 'visible', timeout: 15000 });
+  await emailInput.fill(email);
+
+  const passwordInput = page.getByTestId('auth-password').locator('input').or(page.locator('input[type="password"]')).first();
+  await passwordInput.fill(password);
+}
+
+/**
+ * Clear Firebase Auth persistence (IndexedDB) plus web storage.
+ * localStorage alone is not enough — Firebase keeps the session in IndexedDB.
+ */
+export async function clearAuthState(page: Page): Promise<void> {
+  await page.evaluate(async () => {
+    try {
+      localStorage.clear();
+      sessionStorage.clear();
+    } catch {
+      // ignore
+    }
+    try {
+      const dbs = (await indexedDB.databases?.()) ?? [];
+      await Promise.all(
+        dbs.map(({ name }) =>
+          name
+            ? new Promise<void>((resolve) => {
+                const req = indexedDB.deleteDatabase(name);
+                req.onsuccess = req.onerror = req.onblocked = () => resolve();
+              })
+            : Promise.resolve(),
+        ),
+      );
+    } catch {
+      // ignore
+    }
+  });
+}
+
+export async function resetAuth(page: Page): Promise<void> {
+  await enableE2eFlag(page);
+  await page.goto('/main/kit/auth');
+  await clearAuthState(page);
+  await page.goto('/main/kit/auth');
+}

netlify.toml

@@ -0,0 +1,9 @@
+# Demo deploys to https://rdlabo-ionic-angular-library.netlify.app/
+#
+# Firebase web apiKey is a public client identifier (access is enforced by Auth /
+# App Check / Security Rules), not a server secret. Netlify smart detection flags
+# the `AIza…` pattern anyway — omit it so deploy preview / production can build.
+
+[build.environment]
+  SECRETS_SCAN_SMART_DETECTION_OMIT_VALUES = "AIzaSyBuGDgJy26KfViIjusAxVwHhyAbQTYKoAw"
+  SECRETS_SCAN_OMIT_PATHS = "projects/demo/src/environments/**"

package.json

@@ -29,7 +29,9 @@
     "release": "np --no-tests --no-publish",
     "lint": "ng lint",
     "test:watch": "ng test",
-    "test:actions": "vitest run --config .github/actions/vitest.config.mjs"
+    "test:actions": "vitest run --config .github/actions/vitest.config.mjs",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui"
   },
   "private": false,
   "dependencies": {
@@ -71,6 +73,7 @@
     "@eslint/js": "^9.39.4",
     "@ionic/angular-toolkit": "^12.3.0",
     "@ionic/storage-angular": "^4.0.0",
+    "@playwright/test": "^1.57.0",
     "@rdlabo/capacitor-brotherprint": "^8.1.1",
     "angular-eslint": "21.4.0",
     "child_process": "^1.0.2",

playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Auth demo e2e for @rdlabo/ionic-angular-kit.
+ * Injects `window.__E2E__` before app scripts so `environment.e2e` enables confirm bypass.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env['CI'],
+  retries: process.env['CI'] ? 2 : 0,
+  workers: process.env['CI'] ? 1 : undefined,
+  reporter: 'html',
+  timeout: process.env['CI'] ? 60000 : 30000,
+  use: {
+    baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] ?? 'http://localhost:4200',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    // Other demo tabs need prebuilt libs; kit itself resolves via tsconfig paths.
+    command: 'npm run prebuild && npx ng serve demo --configuration=development --port 4200 --host 0.0.0.0',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+    timeout: 300000,
+  },
+});

projects/demo/src/app/app.config.ts

@@ -1,9 +1,34 @@
-import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
+import type { ApplicationConfig } from '@angular/core';
+import { importProvidersFrom, inject, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+import { IonicStorageModule } from '@ionic/storage-angular';
+import { provideKitAuth, provideKitOverlay } from '@rdlabo/ionic-angular-kit';
+import { provideKitFirebase } from '@rdlabo/ionic-angular-kit/auth-firebase';
 
 import { routes } from './app.routes';
-import { provideIonicAngular } from '@ionic/angular/standalone';
+import { DemoAuthService } from './kit/auth/auth.service';
+import { environment } from '../environments/environment';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZonelessChangeDetection(), provideRouter(routes), provideIonicAngular({ useSetInputAPI: true })],
+  providers: [
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+    provideIonicAngular({ useSetInputAPI: true }),
+    importProvidersFrom(IonicStorageModule.forRoot({ name: '__kit_demo_db' })),
+    provideKitFirebase({ firebaseConfig: environment.firebase }),
+    provideKitOverlay({ labels: { close: 'Close', cancel: 'Cancel' } }),
+    provideKitAuth(() => {
+      const auth = inject(DemoAuthService);
+      return {
+        authState: () => auth.isAuth(),
+        redirects: {
+          whenAuthorized: '/main/kit/auth/home',
+          whenConfirming: '/main/kit/auth/confirm',
+          whenNotConfirming: '/main/kit/auth/signin',
+          whenUnauthorized: '/main/kit/auth/signin',
+        },
+      };
+    }),
+  ],
 };