Using Okta to sign in with Backstage not working

Question

I am trying to set up sign in with Okta on backstage but I am getting error 404 when the API call hits Okta.

I am really new to okta/backstage but so far I have followed Backstage's documentation to configure okta in app-config.yaml and have added the front end code in packages/app/src/app.tsx When I run yarn dev I do get the option to sign in as guest or to sign in using okta. However, when I click the button to sign in using okta, I get thrown back the error as shown in the screenshot.

My configuration file in app-config.local.yaml

auth:
  providers:
    okta:
      development:
        clientId: 'myClientId'
        clientSecret: 'myClientSecret'
        audience: 'myOktaDomain'

My frontend code in packages/app/src/app.tsx

const oktaProvider: SignInProviderConfig = {
  id: 'okta-auth-provider',
  title: 'Okta',
  message: 'Sign in using Okta',
  apiRef: oktaAuthApiRef,
};

  components: {
    SignInPage: props => (
      <SignInPage {...props} auto providers={['guest', oktaProvider]} />
    ),
  },

When running the backstage-dashboard locally, I get the screen to sign in as guest or to sign in wtih Okta. When I click sign in with Okta, inspecting the URL, I realised that I hit Okta's /authorize/v1 endpoint but I get the following error:

{"error":{"name":"NotFoundError","message":"Unknown auth provider 'okta'","stack":"NotFoundError: Unknown auth provider 'okta'\n    at (redacted)","request":{"method":"GET","url":"/api/auth/okta/dev-20224355.okta.com/oauth2/v1/authorize?response_type=code&redirect_uri=http%3%2F%2Flocalhost%3A7007%2Fapi%2Fauth%2Fokta%2Fhandler%2Fframe&scope=openid%20email%20profile%20offline_access&state=6e6f6e63653d2532467a5a4e736e3373306c33676d4868346c576a786f4125334425334426656e763d646576656c6f706d656e74266f726967696e3d687474702533412532462532466c6f63616c686f7374253313330303026666c6f773d706f707570&client_id=0oaeezrsapoH0Idj5d7"},"response":{"statusCode":404}}

Does anyone know what I am doing wrongly?

Answer 1

Unfortunately, the Backstage documentation is missing an important part. There is an additional file, which you need to adjust. It's located somewhere in packages/backend/src/plugins/auth.ts. Here you need to adjust a createPlugin function and a provider, for example fro GitHub:

github: providers.github.create({
        signIn: {
          resolver(_, ctx) {
            const userRef = 'user:default/guest' // Must be a full entity reference
            return ctx.issueToken({
              claims: {
                sub: userRef, // The user's own identity
                ent: [userRef] // A list of identities that the user claims ownership through
              }
            })
          }
          // resolver: providers.github.resolvers.usernameMatchingUserEntityName(),
        }
      })

Please, find more info here: https://backstage.io/docs/auth/identity-resolver/