feat(showcase): add conditional rendering for login page

packages/app/src/App.tsx

@@ -1,11 +1,6 @@
 import { createApp } from '@backstage/app-defaults';
 import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
-import {
-  AlertDisplay,
-  OAuthRequestDialog,
-  ProxiedSignInPage,
-  SignInPage,
-} from '@backstage/core-components';
+import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
 import { ApiExplorerPage, apiDocsPlugin } from '@backstage/plugin-api-docs';
 import {
   CatalogEntityPage,
@@ -19,6 +14,7 @@ import {
   catalogImportPlugin,
 } from '@backstage/plugin-catalog-import';
 import { HomepageCompositionRoot } from '@backstage/plugin-home';
+import { LighthousePage } from '@backstage/plugin-lighthouse';
 import { orgPlugin } from '@backstage/plugin-org';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
@@ -33,26 +29,21 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
 import { UnifiedThemeProvider } from '@backstage/theme';
-import LightIcon from '@mui/icons-material/WbSunny';
-import DarkIcon from '@mui/icons-material/Brightness2';
 import { OcmPage } from '@janus-idp/backstage-plugin-ocm';
+import DarkIcon from '@mui/icons-material/Brightness2';
+import LightIcon from '@mui/icons-material/WbSunny';
 import React from 'react';
 import { Route } from 'react-router-dom';
 import { apis } from './apis';
 import { Root } from './components/Root';
+import { SignInPage } from './components/SignInPage/SignInPage';
 import { entityPage } from './components/catalog/EntityPage';
 import { HomePage } from './components/home/HomePage';
 import { LearningPaths } from './components/learningPaths/LearningPathsPage';
 import { SearchPage } from './components/search/SearchPage';
-import { LighthousePage } from '@backstage/plugin-lighthouse';
-import {
-  configApiRef,
-  githubAuthApiRef,
-  useApi,
-} from '@backstage/core-plugin-api';
-import { customLightTheme } from './themes/lightTheme';
-import { customDarkTheme } from './themes/darkTheme';
 import { useUpdateTheme } from './hooks/useUpdateTheme';
+import { customDarkTheme } from './themes/darkTheme';
+import { customLightTheme } from './themes/lightTheme';
 
 const app = createApp({
   apis,
@@ -106,28 +97,7 @@ const app = createApp({
     },
   ],
   components: {
-    SignInPage: props => {
-      const configApi = useApi(configApiRef);
-      if (configApi.getString('auth.environment') === 'development') {
-        return (
-          <SignInPage
-            {...props}
-            title="Select a sign-in method"
-            align="center"
-            providers={[
-              'guest',
-              {
-                id: 'github-auth-provider',
-                title: 'GitHub',
-                message: 'Sign in using GitHub',
-                apiRef: githubAuthApiRef,
-              },
-            ]}
-          />
-        );
-      }
-      return <ProxiedSignInPage {...props} provider="oauth2Proxy" />;
-    },
+    SignInPage: props => <SignInPage {...props} />,
   },
 });
 

packages/app/src/api/AuthApiRefs.ts

@@ -0,0 +1,29 @@
+import {
+  createApiRef,
+  type ApiRef,
+  type BackstageIdentityApi,
+  type OAuthApi,
+  type OpenIdConnectApi,
+  type ProfileInfoApi,
+  type SessionApi,
+} from '@backstage/core-plugin-api';
+
+export const oidcAuthApiRef: ApiRef<
+  OAuthApi &
+    OpenIdConnectApi &
+    ProfileInfoApi &
+    BackstageIdentityApi &
+    SessionApi
+> = createApiRef({
+  id: 'internal.auth.oidc',
+});
+
+export const auth0AuthApiRef: ApiRef<
+  OAuthApi &
+    OpenIdConnectApi &
+    ProfileInfoApi &
+    BackstageIdentityApi &
+    SessionApi
+> = createApiRef({
+  id: 'internal.auth.auth0',
+});

packages/app/src/api/JanusBackstageCustomizeApiClient.ts

@@ -0,0 +1,69 @@
+import {
+  ConfigApi,
+  createApiRef,
+  DiscoveryApi,
+} from '@backstage/core-plugin-api';
+import { TechRadarLoaderResponse } from '@backstage/plugin-tech-radar';
+import { QuickAccessLinks } from '../types/types';
+
+const DEFAULT_PROXY_PATH = '/developer-hub';
+
+export interface JanusBackstageCustomizeApi {
+  getHomeDataJson(): Promise<QuickAccessLinks[]>;
+  getTechRadarDataJson(): Promise<TechRadarLoaderResponse>;
+}
+
+export const janusBackstageCustomizeApiRef =
+  createApiRef<JanusBackstageCustomizeApi>({
+    id: 'app.developer-hub.service',
+  });
+
+export type Options = {
+  discoveryApi: DiscoveryApi;
+  configApi: ConfigApi;
+};
+
+export class JanusBackstageCustomizeApiClient
+  implements JanusBackstageCustomizeApi
+{
+  // @ts-ignore
+  private readonly discoveryApi: DiscoveryApi;
+
+  private readonly configApi: ConfigApi;
+
+  constructor(options: Options) {
+    this.discoveryApi = options.discoveryApi;
+    this.configApi = options.configApi;
+  }
+
+  private async getBaseUrl() {
+    const proxyPath =
+      this.configApi.getOptionalString('developerHub.proxyPath') ||
+      DEFAULT_PROXY_PATH;
+    return `${await this.discoveryApi.getBaseUrl('proxy')}${proxyPath}`;
+  }
+
+  private async fetcher(url: string) {
+    const response = await fetch(url, {
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!response.ok) {
+      throw new Error(
+        `failed to fetch data, status ${response.status}: ${response.statusText}`,
+      );
+    }
+    return await response.json();
+  }
+
+  async getHomeDataJson() {
+    const proxyUrl = await this.getBaseUrl();
+    const data = await this.fetcher(`${proxyUrl}`);
+    return data;
+  }
+
+  async getTechRadarDataJson() {
+    const proxyUrl = await this.getBaseUrl();
+    const data = await this.fetcher(`${proxyUrl}/tech-radar`);
+    return data;
+  }
+}

packages/app/src/api/index.ts

@@ -1,69 +1,2 @@
-import {
-  ConfigApi,
-  createApiRef,
-  DiscoveryApi,
-} from '@backstage/core-plugin-api';
-import { TechRadarLoaderResponse } from '@backstage/plugin-tech-radar';
-import { QuickAccessLinks } from '../types/types';
-
-const DEFAULT_PROXY_PATH = '/developer-hub';
-
-export interface JanusBackstageCustomizeApi {
-  getHomeDataJson(): Promise<QuickAccessLinks[]>;
-  getTechRadarDataJson(): Promise<TechRadarLoaderResponse>;
-}
-
-export const janusBackstageCustomizeApiRef =
-  createApiRef<JanusBackstageCustomizeApi>({
-    id: 'app.developer-hub.service',
-  });
-
-export type Options = {
-  discoveryApi: DiscoveryApi;
-  configApi: ConfigApi;
-};
-
-export class JanusBackstageCustomizeApiClient
-  implements JanusBackstageCustomizeApi
-{
-  // @ts-ignore
-  private readonly discoveryApi: DiscoveryApi;
-
-  private readonly configApi: ConfigApi;
-
-  constructor(options: Options) {
-    this.discoveryApi = options.discoveryApi;
-    this.configApi = options.configApi;
-  }
-
-  private async getBaseUrl() {
-    const proxyPath =
-      this.configApi.getOptionalString('developerHub.proxyPath') ||
-      DEFAULT_PROXY_PATH;
-    return `${await this.discoveryApi.getBaseUrl('proxy')}${proxyPath}`;
-  }
-
-  private async fetcher(url: string) {
-    const response = await fetch(url, {
-      headers: { 'Content-Type': 'application/json' },
-    });
-    if (!response.ok) {
-      throw new Error(
-        `failed to fetch data, status ${response.status}: ${response.statusText}`,
-      );
-    }
-    return await response.json();
-  }
-
-  async getHomeDataJson() {
-    const proxyUrl = await this.getBaseUrl();
-    const data = await this.fetcher(`${proxyUrl}`);
-    return data;
-  }
-
-  async getTechRadarDataJson() {
-    const proxyUrl = await this.getBaseUrl();
-    const data = await this.fetcher(`${proxyUrl}/tech-radar`);
-    return data;
-  }
-}
+export * from './AuthApiRefs';
+export * from './JanusBackstageCustomizeApiClient';

packages/app/src/apis.ts

@@ -1,10 +1,12 @@
+import { OAuth2 } from '@backstage/core-app-api';
 import {
   AnyApiFactory,
   analyticsApiRef,
   configApiRef,
   createApiFactory,
   discoveryApiRef,
   identityApiRef,
+  oauthRequestApiRef,
 } from '@backstage/core-plugin-api';
 import {
   ScmAuth,
@@ -13,11 +15,12 @@ import {
 } from '@backstage/integration-react';
 import { techRadarApiRef } from '@backstage/plugin-tech-radar';
 import { SegmentAnalytics } from '@janus-idp/backstage-plugin-analytics-provider-segment';
-import { CustomTechRadar } from './lib/CustomTechRadar';
+import { auth0AuthApiRef, oidcAuthApiRef } from './api/AuthApiRefs';
 import {
   JanusBackstageCustomizeApiClient,
   janusBackstageCustomizeApiRef,
-} from './api';
+} from './api/JanusBackstageCustomizeApiClient';
+import { CustomTechRadar } from './lib/CustomTechRadar';
 
 export const apis: AnyApiFactory[] = [
   createApiFactory({
@@ -49,4 +52,45 @@ export const apis: AnyApiFactory[] = [
     factory: ({ janusBackstageCustomizeApi }) =>
       new CustomTechRadar({ janusBackstageCustomizeApi }),
   }),
+  // OIDC
+  createApiFactory({
+    api: oidcAuthApiRef,
+    deps: {
+      discoveryApi: discoveryApiRef,
+      oauthRequestApi: oauthRequestApiRef,
+      configApi: configApiRef,
+    },
+    factory: ({ discoveryApi, oauthRequestApi, configApi }) =>
+      OAuth2.create({
+        discoveryApi,
+        oauthRequestApi,
+        provider: {
+          id: 'oidc',
+          title: 'OIDC',
+          icon: () => null,
+        },
+        environment: configApi.getOptionalString('auth.environment'),
+      }),
+  }),
+  // Auth0
+  createApiFactory({
+    api: auth0AuthApiRef,
+    deps: {
+      discoveryApi: discoveryApiRef,
+      oauthRequestApi: oauthRequestApiRef,
+      configApi: configApiRef,
+    },
+    factory: ({ discoveryApi, oauthRequestApi, configApi }) =>
+      OAuth2.create({
+        discoveryApi,
+        oauthRequestApi,
+        provider: {
+          id: 'auth0',
+          title: 'Auth0',
+          icon: () => null,
+        },
+        defaultScopes: ['openid', 'email', 'profile'],
+        environment: configApi.getOptionalString('auth.environment'),
+      }),
+  }),
 ];