feat: restore OIDC sign-in, guest only in dev/CI, extend Playwright tests

Co-authored-by: hairmare <116588+hairmare@users.noreply.github.com>
Agent-Logs-Url: https://github.com/radiorabe/rabe-backstage/sessions/6026c0b9-1370-4843-a064-7cea57c81c0f

Author: Copilot

app-config.yaml

@@ -67,12 +67,20 @@ techdocs:
 
 auth:
   # see https://backstage.io/docs/auth/ to learn about auth providers
-  environment: production
+  environment: development
   ### Providing an auth.session.secret will enable session support in the auth-backend
   session:
     secret: ${SESSION_SECRET}
   providers:
     oidc:
+      development:
+        prompt: auto
+        metadataUrl: ${AUTH_KEYCLOAK_METADATA_URL}
+        clientId: ${AUTH_KEYCLOAK_CLIENT_ID}
+        clientSecret: ${AUTH_KEYCLOAK_CLIENT_SECRET}
+        signIn:
+          resolvers:
+            - resolver: emailMatchingUserEntityProfileEmail
       production:
         prompt: auto
         metadataUrl: ${AUTH_KEYCLOAK_METADATA_URL}
@@ -82,6 +90,9 @@ auth:
           resolvers:
             - resolver: emailMatchingUserEntityProfileEmail
     github:
+      development:
+        clientId: ${AUTH_GITHUB_CLIENT_ID}
+        clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}
       production:
         clientId: ${AUTH_GITHUB_CLIENT_ID}
         clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}

packages/app/e2e-tests/app.test.ts

@@ -13,30 +13,84 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { test, expect } from '@playwright/test';
+import { test, expect, type Page } from '@playwright/test';
+
+// Extra time for Backstage to poll popup.closed and update React state.
+const AUTH_ERROR_TIMEOUT_MS = 15_000;
+// Tolerance for the ~214-pixel layout shift caused by the error text
+// inserting into the card and nudging the Sign In button by ~1 px.
+const AUTH_ERROR_MAX_DIFF_PIXELS = 300;
+
+/** Sign in as a Guest (accepts the backend-unavailable fallback dialog). */
+async function signInAsGuest(page: Page) {
+  page.on('dialog', dialog => dialog.accept());
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Enter' }).click();
+}
 
 test('App should render the sign-in screen', async ({ page }) => {
   await page.goto('/');
 
   await expect(page).toHaveTitle(/RaBe Backstage/);
 
-  const enterButton = page.getByRole('button', { name: 'Enter' });
-  await expect(enterButton).toBeVisible();
+  // OIDC sign-in button is always visible.
+  await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible();
+  // Guest sign-in button is visible in dev / CI (auth.environment = development).
+  await expect(page.getByRole('button', { name: 'Enter' })).toBeVisible();
 
   await expect(page).toHaveScreenshot('login-page.png');
 });
 
-test('Guest sign-in should navigate to the main application', async ({ page }) => {
-  // Accept any browser confirm dialogs (e.g. fallback to legacy guest token when the auth backend is unavailable)
-  page.on('dialog', dialog => dialog.accept());
+test('Sign-in should show an auth error when no IdP is available', async ({
+  page,
+  context,
+}) => {
+  // Register handler before navigating so auto sign-in popups are also closed.
+  context.on('page', async popup => {
+    await popup.close();
+  });
 
   await page.goto('/');
 
-  const enterButton = page.getByRole('button', { name: 'Enter' });
-  await expect(enterButton).toBeVisible();
+  const signInButton = page.getByRole('button', { name: 'Sign In' });
+  await expect(signInButton).toBeVisible();
+
+  // Wait for the initial auto sign-in attempt to settle before clicking.
+  await page.waitForLoadState('networkidle');
+
+  await signInButton.click();
+
+  // Backstage polls popup.closed on an interval, so allow extra time.
+  await expect(page.getByText('Login failed, popup was closed')).toBeVisible({
+    timeout: AUTH_ERROR_TIMEOUT_MS,
+  });
+
+  // Wait for the layout to settle after the error text causes a reflow.
+  await expect(signInButton).toBeVisible();
+
+  await expect(page).toHaveScreenshot('login-auth-error.png', {
+    maxDiffPixels: AUTH_ERROR_MAX_DIFF_PIXELS,
+  });
+});
+
+test('Guest sign-in should load the catalog page', async ({ page }) => {
+  await signInAsGuest(page);
+
+  await expect(
+    page.getByRole('heading', { name: 'Radio Bern RaBe Catalog' }),
+  ).toBeVisible();
+
+  await expect(page).toHaveScreenshot('catalog-page.png');
+});
+
+test('Settings page should be accessible after sign-in', async ({ page }) => {
+  await signInAsGuest(page);
+
+  await page.getByRole('link', { name: 'Settings' }).click();
 
-  await enterButton.click();
+  await expect(
+    page.getByRole('heading', { name: 'Settings' }),
+  ).toBeVisible();
 
-  // After sign-in, the catalog heading should be visible
-  await expect(page.getByRole('heading', { name: 'Radio Bern RaBe Catalog' })).toBeVisible();
+  await expect(page).toHaveScreenshot('settings-page.png');
 });

packages/app/e2e-tests/app.test.ts-snapshots/catalog-page-app-linux.png

@@ -19,6 +19,7 @@
     "@backstage-community/plugin-github-pull-requests-board": "^0.15.1",
     "@backstage-community/plugin-todo": "^0.17.1",
     "@backstage/cli": "backstage:^",
+    "@backstage/core-app-api": "backstage:^",
     "@backstage/core-components": "backstage:^",
     "@backstage/core-plugin-api": "backstage:^",
     "@backstage/frontend-defaults": "backstage:^",

packages/app/e2e-tests/app.test.ts-snapshots/login-auth-error-app-linux.png

@@ -1,7 +1,8 @@
 import { createApp } from '@backstage/frontend-defaults';
 import catalogPlugin from '@backstage/plugin-catalog/alpha';
 import { navModule } from './modules/nav';
+import { authModule } from './modules/auth';
 
 export default createApp({
-  features: [catalogPlugin, navModule],
+  features: [catalogPlugin, navModule, authModule],
 });

packages/app/e2e-tests/app.test.ts-snapshots/login-page-app-linux.png

@@ -0,0 +1,80 @@
+/*
+ * Copyright Radio Bern RaBe
+ *
+ * SPDX-FileCopyrightText: 2024 Radio Bern RaBe <https://rabe.ch>
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import {
+  createFrontendModule,
+  ApiBlueprint,
+  configApiRef,
+  discoveryApiRef,
+  oauthRequestApiRef,
+  useApi,
+} from '@backstage/frontend-plugin-api';
+import { SignInPageBlueprint } from '@backstage/plugin-app-react';
+import { SignInPage } from '@backstage/core-components';
+import { OAuth2 } from '@backstage/core-app-api';
+import { oidcAuthApiRef } from './oidcAuthApiRef';
+import type { SignInPageProps } from '@backstage/core-plugin-api';
+
+type SignInProvider =
+  | 'guest'
+  | { id: string; title: string; message: string; apiRef: typeof oidcAuthApiRef };
+
+const oidcApiExtension = ApiBlueprint.make({
+  name: 'oidc',
+  params: defineParams =>
+    defineParams({
+      api: oidcAuthApiRef,
+      deps: {
+        discoveryApi: discoveryApiRef,
+        oauthRequestApi: oauthRequestApiRef,
+        configApi: configApiRef,
+      },
+      factory: ({ discoveryApi, oauthRequestApi, configApi }) =>
+        OAuth2.create({
+          discoveryApi,
+          oauthRequestApi,
+          configApi,
+          provider: {
+            id: 'oidc',
+            title: 'RaBe SSO',
+            icon: () => null,
+          },
+          defaultScopes: ['openid', 'profile', 'email', 'offline_access'],
+        }),
+    }),
+});
+
+const rabeSignInPage = SignInPageBlueprint.make({
+  params: {
+    loader: async () => {
+      const RabeSignInPage = (props: SignInPageProps) => {
+        const configApi = useApi(configApiRef);
+        // Show Guest only in non-production environments (dev, CI).
+        // auth.environment is set to 'development' in app-config.yaml and
+        // overridden to 'production' in app-config.production.yaml.
+        const isDev =
+          configApi.getOptionalString('auth.environment') !== 'production';
+        const providers: SignInProvider[] = [
+          {
+            id: 'oidc-auth-provider',
+            title: 'RaBe SSO',
+            message: 'Sign in with your RaBe Keycloak account',
+            apiRef: oidcAuthApiRef,
+          },
+          ...(isDev ? (['guest'] as const) : []),
+        ];
+        return <SignInPage {...props} providers={providers} />;
+      };
+      return RabeSignInPage;
+    },
+  },
+});
+
+export const authModule = createFrontendModule({
+  pluginId: 'app',
+  extensions: [oidcApiExtension, rabeSignInPage],
+});

packages/app/e2e-tests/app.test.ts-snapshots/settings-page-app-linux.png

@@ -0,0 +1,9 @@
+/*
+ * Copyright Radio Bern RaBe
+ *
+ * SPDX-FileCopyrightText: 2024 Radio Bern RaBe <https://rabe.ch>
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export { authModule } from './authModule';
+export { oidcAuthApiRef } from './oidcAuthApiRef';