Merge 69a309d into f8ace2d

.changeset/tiny-cougars-unite.md

@@ -0,0 +1,5 @@
+---
+'app': minor
+---
+
+Add authentication provider conditional rendering for login page

packages/app/config.d.ts

@@ -107,4 +107,9 @@ export interface Config {
       };
     };
   };
+  /**
+   * The signInPage provider
+   * @visibility frontend
+   */
+  signInPage?: string;
 }

packages/app/src/App.tsx

@@ -1,6 +1,6 @@
-import DynamicRoot from './components/DynamicRoot';
-import { apis } from './apis';
 import React from 'react';
+import { apis } from './apis';
+import DynamicRoot from './components/DynamicRoot';
 
 const AppRoot = () => (
   <DynamicRoot apis={apis} afterInit={() => import('./components/AppBase')} />

packages/app/src/api/AuthApiRefs.ts

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

packages/app/src/api/CustomDataApiClient.ts

@@ -0,0 +1,64 @@
+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 CustomDataApi {
+  getHomeDataJson(): Promise<QuickAccessLinks[]>;
+  getTechRadarDataJson(): Promise<TechRadarLoaderResponse>;
+}
+
+export const customDataApiRef = createApiRef<CustomDataApi>({
+  id: 'app.developer-hub.service',
+});
+
+export type Options = {
+  discoveryApi: DiscoveryApi;
+  configApi: ConfigApi;
+};
+
+export class CustomDataApiClient implements CustomDataApi {
+  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 './CustomDataApiClient';

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,16 @@ 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 {
-  JanusBackstageCustomizeApiClient,
-  janusBackstageCustomizeApiRef,
-} from './api';
+  auth0AuthApiRef,
+  oidcAuthApiRef,
+  samlAuthApiRef,
+} from './api/AuthApiRefs';
+import {
+  CustomDataApiClient,
+  customDataApiRef,
+} from './api/CustomDataApiClient';
+import { CustomTechRadar } from './lib/CustomTechRadar';
 
 export const apis: AnyApiFactory[] = [
   createApiFactory({
@@ -33,20 +40,80 @@ export const apis: AnyApiFactory[] = [
       SegmentAnalytics.fromConfig(configApi, identityApi),
   }),
   createApiFactory({
-    api: janusBackstageCustomizeApiRef,
+    api: customDataApiRef,
     deps: {
       discoveryApi: discoveryApiRef,
       configApi: configApiRef,
     },
     factory: ({ discoveryApi, configApi }) =>
-      new JanusBackstageCustomizeApiClient({ discoveryApi, configApi }),
+      new CustomDataApiClient({ discoveryApi, configApi }),
   }),
   createApiFactory({
     api: techRadarApiRef,
     deps: {
-      janusBackstageCustomizeApi: janusBackstageCustomizeApiRef,
+      customDataApi: customDataApiRef,
+    },
+    factory: ({ customDataApi }) => new CustomTechRadar({ customDataApi }),
+  }),
+  // 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'),
+      }),
+  }),
+  // SAML
+  createApiFactory({
+    api: samlAuthApiRef,
+    deps: {
+      discoveryApi: discoveryApiRef,
+      oauthRequestApi: oauthRequestApiRef,
+      configApi: configApiRef,
     },
-    factory: ({ janusBackstageCustomizeApi }) =>
-      new CustomTechRadar({ janusBackstageCustomizeApi }),
+    factory: ({ discoveryApi, oauthRequestApi, configApi }) =>
+      OAuth2.create({
+        discoveryApi,
+        oauthRequestApi,
+        provider: {
+          id: 'saml',
+          title: 'SAML',
+          icon: () => null,
+        },
+        environment: configApi.getOptionalString('auth.environment'),
+      }),
   }),
 ];

packages/app/src/components/DynamicRoot/defaultAppComponents.tsx

@@ -1,35 +1,9 @@
-import { ProxiedSignInPage, SignInPage } from '@backstage/core-components';
-import {
-  AppComponents,
-  configApiRef,
-  githubAuthApiRef,
-  useApi,
-} from '@backstage/core-plugin-api';
+import { AppComponents } from '@backstage/core-plugin-api';
 import React from 'react';
+import { SignInPage } from '../SignInPage/SignInPage';
 
 const defaultAppComponents: Partial<AppComponents> = {
-  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} />,
 };
 
 export default defaultAppComponents;