Backstage Okta authentication: "Unknown auth provider 'okta'"

Question

I am trying to add Okta authentication to Backstage . The application in Okta is set up and I have the okta provider and component added to my Backstage configuration.

When I try to log in via the Backstage Okta sign-in link, I get the error "Unknown auth provider 'okta' at \<anonymous>".

Here is my relevant code.

app-config.yaml:

auth:
  # see https://backstage.io/docs/auth/ to learn about auth providers
  providers:
    # See https://backstage.io/docs/auth/guest/provider
    guest: {}
    okta:
      development:
        clientId: [REDACTED]
        clientSecret: [REDACTED]
        audience: https://[REDACTED].okta.com

packages/app/src/App.tsx:

import {
  AlertDisplay,
  OAuthRequestDialog,
  SignInPage,
} from '@backstage/core-components';
import { oktaAuthApiRef } from '@backstage/core-plugin-api';

//...

const app = createApp({
  //...
  components: {
    SignInPage: props => (
      <SignInPage
        {...props}
        auto
        providers={[
          'guest',
          {
            id: 'okta-auth-provider',
            title: 'Okta',
            message: 'Sign in with Okta',
            apiRef: oktaAuthApiRef
          }
        ]}
      />
    )
  },
});