When publishing Backstage.io to production, adding authentication is most likely required - especially if it is available from the public internet. However, this might be a major speedbump for local development, as it often requires secrets to be distributed among developers, as well as generally slowing down development.
To avoid this, we can simply allow guest access when working locally (typically when running yarn dev), but still add in the auth provider(s) of choice when publishing for a proper test or production environment.
First, make sure you have a separate auth.environment configuration for your different environments. You'll also need to simply remove all configured authentication providers.
For example, your base app-config.yaml can have an authentication section like this:
auth:
providers: {}
Then, in app-config.local.yaml, you make sure you have the right environment set (I keep it in the local file to make sure it'll never end up in production):
auth:
environment: development
providers: {}
In your app-config.production.yaml which you bundle into your deploy like described here, you can have the full authentication provider config, for example like so:
auth:
environment: production
providers:
microsoft:
production:
clientId: ${AZURE_CLIENT_ID}
clientSecret: ${AZURE_CLIENT_SECRET}
tenantId: ${AZURE_TENANT_ID}
With configuration out of the way, you need to tie this up in the app itself and actually put it to use.
In packages/app/src/App.tsx, you have probably configured your authentication provider in the SignInPage component. Replace this with the following (and of course, add your preferred auth provider):
<SignInPage
{...props}
auto
providers={useApi(configApiRef).getString('auth.environment') === 'development' ? ['guest'] : [azureAdProvider]}
/>
Notice how it's inspecting what environment we're configured in, and either adds the guest access, or the array of real authentication provider(s) depending on the value.