🐛 Bug Report: Front-end config is available to unauthorized users

[AhrazA]

📜 Description

The backend injects the front-end config into the bundle upon initialization here.

The issue is that this configuration is available to users before authentication. It can reveal details about various integrations enabled in Backstage and other internal data with that should not be shared to unauthorized users. For example the Backstage demo configuration contains cost metrics that, in an ideal case, should not be shared with unauthorized parties.

👍 Expected behavior

The front-end app config is not available to users prior to authorization.

👎 Actual Behavior with Screenshots

When navigating to the sign in page as an unauthorized user of a Backstage instance with auth providers configured, the entire front-end app config is available.

👟 Reproduction steps

1. Create a Backstage start by running npx @backstage/create-app@latest
2. Run yarn build:all
3. Run yarn start-backend
4. Navigate to http://localhost:7007
5. View the script tag in index.html with type="backstage.io/config"

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

No, I don't have time to work on this right now

[awanlin]

Hi @AhrazA, perhaps this could help? https://backstage.io/docs/tutorials/enable-public-entry

[AhrazA]

Hey @awanlin, thanks for your input. This looks like exactly what we are after. Unfortunately, the instructions provided did not work for me and there are no working examples I can find that demonstrate how to get it working.

We are on Backstage version 1.31.1. I followed the steps on how to get this working for the new frontend system and ended up with this:

packages/app/src/index-public-experimental.tsx:

import React from 'react';

import ReactDOM from 'react-dom/client';

import { SignInPage } from "@backstage/core-components";
import { microsoftAuthApiRef } from '@backstage/core-plugin-api';
import { SignInPageBlueprint, createFrontendModule } from '@backstage/frontend-plugin-api';
import { createPublicSignInApp } from '@backstage/frontend-defaults';

const microsoftSignInPage = SignInPageBlueprint.make({
  name: 'microsoft',
  params: {
    loader: async () => props => {
      return (
        <SignInPage
          {...props}
          auto
          provider={{
            id: 'microsoft-auth-provider',
            title: 'Microsoft Entra ID',
            message: 'Sign in using your account',
            apiRef: microsoftAuthApiRef,
          }}
        />
      )
    }
  }
});

const signInPageModule = createFrontendModule({
  pluginId: 'app',
  extensions: [microsoftSignInPage]
});

const app = createPublicSignInApp({
  features: [signInPageModule],
});

ReactDOM.createRoot(document.getElementById('root')!).render(app.createRoot());

This results in the following error when trying to load the page:

Navigated to http://localhost:7007/
react-dom.production.min.js:188 Error: Failed to instantiate extension 'app/root', expected at most one 'signInPage' input but received multiple: 'sign-in-page:app', 'sign-in-page:app/microsoft'
    at $p (instantiateAppNodeTree.esm.js:204:11)
    at n (instantiateAppNodeTree.esm.js:238:21)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at Ua (instantiateAppNodeTree.esm.js:245:3)
    at zp (createSpecializedApp.esm.js:141:3)
Ti @ react-dom.production.min.js:188
(anonymous) @ react-dom.production.min.js:188
$o @ react-dom.production.min.js:156
Ws @ react-dom.production.min.js:261
Qs @ react-dom.production.min.js:259
Yc @ react-dom.production.min.js:258
qc @ react-dom.production.min.js:282
kn @ react-dom.production.min.js:280
Ys @ react-dom.production.min.js:268
C @ scheduler.production.min.js:13
Ve @ scheduler.production.min.js:14
react-dom.production.min.js:282 Uncaught Error: Failed to instantiate extension 'app/root', expected at most one 'signInPage' input but received multiple: 'sign-in-page:app', 'sign-in-page:app/microsoft'
    at $p (instantiateAppNodeTree.esm.js:204:11)
    at n (instantiateAppNodeTree.esm.js:238:21)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at instantiateAppNodeTree.esm.js:228:31
    at Array.flatMap (<anonymous>)
    at n (instantiateAppNodeTree.esm.js:227:45)
    at Ua (instantiateAppNodeTree.esm.js:245:3)
    at zp (createSpecializedApp.esm.js:141:3)
$p @ instantiateAppNodeTree.esm.js:204
n @ instantiateAppNodeTree.esm.js:238
(anonymous) @ instantiateAppNodeTree.esm.js:228
n @ instantiateAppNodeTree.esm.js:227
(anonymous) @ instantiateAppNodeTree.esm.js:228
n @ instantiateAppNodeTree.esm.js:227
Ua @ instantiateAppNodeTree.esm.js:245
zp @ createSpecializedApp.esm.js:141
n @ createApp.esm.js:37

Seems like createPublicSignInApp registers its own front-end module for sign-in with the guest provider enabled. Changing the name of the pluginId from app to something else prevents the error, but it renders the guest provider sign in page and not the sign in page I have configured.

[AhrazA]

I have also tried this with the default starter (@backstage/create-app) and the same issue occurs there.