Backstage oAuth Github: Missing session cookie

Question

Hope you're doing well! I'm looking for some kind of help. Will be really grateful for you if you provide me with some sort of a hint.

I'm setting up developer portal based on [Backstage.io][1] according to Getting started docs instructions.

I've added @backstage/plugin-auth-backend to the project root and configured it as described [here][2].

As soon as I try to load backstage web app I get the following error:

{"error":{"name":"AuthenticationError","message":"Refresh failed; caused by InputError: Missing session cookie"

And it's followed by the list of .ts files with errors including some scripts connected with node_modules/@backstage/plugin-auth-backend. Guys, really I don't know where I'm missing something.

Here are some key points in my app-config.yaml:

app:
  title: Scaffolded Backstage App
  baseUrl: http://0.0.0.0:3000

backend:
  baseUrl: http://<publicIP>:7007
  listen:
    port: 7007
csp:
    default-src: ["'self'", 'http:', 'https:']
    connect-src: ["'self'", 'http:', 'https:']
    script-src: ["'self", 'http:', 'https:','unsafe-inline', http://www.github.com", http://api.github.com"]
cors:
    origin: http://*:3000
    methods: [GET, POST, PUT, DELETE]
    credentials: true
    headers: X-Requested-With

auth:
  environment: development
  providers:
    github:
      development:
        clientId: ${GITHUB_CLIENTID}
        clientSecret: ${GITHUB_CLIENT_SECRET}

I have exported those env variables to current terminal and ran yarn dev

So when I try to login to Backstage using Github I get 401 Unathorized error response while trying to approach thar Request URL: http://<publicIP>:7007/api/auth/github/refresh?optional&env=development [1]: https://backstage.io/ [2]: https://backstage.io/docs/auth/add-auth-provider

Answer 1

They currently are changing the way to configure auth.

There's a discussion ongoing on this topic: https://github.com/backstage/backstage/issues/23748

I was able to configure auth for GitHub in backstage on the localhost backstage instance.

Prerequisites:

• OAuth application is configured in GitHub
  • Authorization callback URL is http://localhost:7007/api/auth/github
• User email is visible and selected on the corresponding user profile settings in GitHub

Added configuration:

• app-config.yaml (note resolvers section)

auth:
  # see https://backstage.io/docs/auth/ to learn about auth providers
  environment: production
  providers:
    guest: {}
    github:
      production:
        clientId: <valueOrVar> 
        clientSecret: <valueOrVar>
        signIn:
          resolvers:
            - resolver: emailMatchingUserEntityProfileEmail
            - resolver: emailLocalPartMatchingUserEntityName
            - resolver: usernameMatchingUserEntityName

• packages/backend/src/index.ts

backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));

• packages/app/src/App.tsx (documentation is wrong here: no need to import SignInPage; read comments carefully to the next snippet)

// add import
import { githubAuthApiRef } from '@backstage/core-plugin-api';
// add the following in createApp function after 'apis,' line
  components: {
    SignInPage: props => (
      <SignInPage
      {...props}
      auto
      provider={{
        id: 'github-auth-provider',
        title: 'GitHub',
        message: 'Sign in using GitHub',
        apiRef: githubAuthApiRef,
      }}
      />
    ),
  },

• examples/org.yaml: change guest to the GitHub username