Origin $url not allowed after setting up GitHub integration and signing in using GitHub

[rm3l]

Description

Screencast.from.2024-01-03.14-42-42.webm

This issue is about the GitHub integration, but I think it could also affect any plugin (both frontend and backend) interacting with the Backstage Backend.

Steps to reproduce

• Using commit 31600ab
• Start or deploy the operator in your cluster
• Apply the following YAML, taking care of replacing the GH_* values in the secrets-rhdh Secret with your own Github App:

Details

apiVersion: janus-idp.io/v1alpha1
kind: Backstage
metadata:
  name: my-rhdh
spec:
  application:
    image: quay.io/rhdh/rhdh-hub-rhel9:1.0-200
    imagePullSecrets:
      - rhdh-pull-secret
    appConfig:
      configMaps:
        - name: app-config-rhdh
    dynamicPluginsConfigMapName: dynamic-plugins-rhdh
    extraEnvs:
      secrets:
        - name: secrets-rhdh

---
apiVersion: v1
kind: ConfigMap
metadata:
  name: app-config-rhdh
data:
  "app-config-rhdh.yaml": |
    backend:
      auth:
        keys:
          - secret: "${BACKEND_SECRET}"
    auth:
      # see https://backstage.io/docs/auth/ to learn about auth providers
      environment: development
      providers:
        github:
          development:
            clientId: '${GH_CLIENT_ID}'
            clientSecret: '${GH_CLIENT_SECRET}'

---
apiVersion: v1
kind: Secret
metadata:
  name: secrets-rhdh
stringData:
  # generated with the command below (from https://janus-idp.io/docs/auth/service-to-service-auth/#setup):
  # node -p 'require("crypto").randomBytes(24).toString("base64")'
  BACKEND_SECRET: "R2FxRVNrcmwzYzhhN3l0V1VRcnQ3L1pLT09WaVhDNUEK" # notsecret
  GH_ORG: "my-gh-org"
  GH_CLIENT_ID: "my GH client ID"
  GH_CLIENT_SECRET: "my GH client secret"

---
apiVersion: v1
kind: ConfigMap
metadata:
  name: dynamic-plugins-rhdh
data:
  dynamic-plugins.yaml: |
    includes:
      - dynamic-plugins.default.yaml
    plugins:
      - package: './dynamic-plugins/dist/backstage-plugin-catalog-backend-module-github-dynamic'
        disabled: false
        pluginConfig:
          catalog:
            providers:
              github:
                myorg:
                  organization: '${GH_ORG}'
                  schedule:
                    # supports cron, ISO duration, "human duration" (used below)
                    frequency: { minutes: 30}
                    # supports ISO duration, "human duration (used below)
                    timeout: { minutes: 3}
                    initialDelay: { seconds: 15}

• Wait until all the resources are created properly and the Backstage instance is reachable. If using OpenShift, a Route should be created automatically
• Open the Backstage URL and try to sign in using GitHub => an error occurs, saying that the Origin is not allowed

Expected behavior

It should be possible to sign in via GitHub, similar to the experience offered by the Helm Chart.
Compared to configuration that the Helm Chart creates, it looks like the backend.cors.origin field (and other fields) need to be defined in the app-config files.

Example with Helm Chart:

# Source: backstage/charts/upstream/templates/app-config-configmap.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: my-backstage-from-helm-developer-hub-app-config
data:
  app-config.yaml: |
    app:
      baseUrl: https://helm-backstage.apps.172.17.0.1.sslip.io
    backend:
      baseUrl: https://helm-backstage.apps.172.17.0.1.sslip.io
      cors:
        origin: https://helm-backstage.apps.172.17.0.1.sslip.io
# --- Truncated ---

I think we could provide these baseUrl and cors.origin information automatically to Backstage from the OpenShift Route we have created.

Workaround

Manually providing an app-config with the necessary URL information seems to do the trick, like so:

apiVersion: v1
kind: ConfigMap
metadata:
  name: app-config-rhdh
data:
  "app-config-rhdh.yaml": |
    app:
      baseUrl: https://backstage-my-rhdh-my-ns.apps.rosa.jv4yz-iiwt3-ekp.72z3.p3.openshiftapps.com
    backend:
      auth:
        keys:
          - secret: "${BACKEND_SECRET}"
      baseUrl: https://backstage-my-rhdh-my-ns.apps.rosa.jv4yz-iiwt3-ekp.72z3.p3.openshiftapps.com
      cors:
        origin: https://backstage-my-rhdh-my-ns.apps.rosa.jv4yz-iiwt3-ekp.72z3.p3.openshiftapps.com
    auth:
      # see https://backstage.io/docs/auth/ to learn about auth providers
      environment: development
      providers:
        github:
          development:
            clientId: '${GH_CLIENT_ID}'
            clientSecret: '${GH_CLIENT_SECRET}'

But this is a manual operation disrupting the user experience, where they need to wait for the Route URL to be available, edit their app-config ConfigMap and then force-delete the Deployment, so that the Operator can recreate it.

[rm3l]

After a quick team discussion, this might not be an issue as long as we document it.
Attempting to determine and set the URL may not cover all cases, e.g., for the rather common case of prod users using the default URL from the OpenShift Route but accessing the application via a different DNS (CNAME'd to the Route Host), in which case the other DNS host needs to be provided anyway in the app-config.
Let's document this for now as part of customizing the Backstage app configuration (which is needed anyway to set up the GitHub integration).