Authentication in Backstage.io

Hello guys, In this article I have discussed about authentication in Backstage.io, but wait What is Backstage?

Backstage.io is an open platform which is used to unifying all your infrastructure tooling, services and their documentation in a single UI.
You can also add some more features with its plugin architecture.

Now, When I started using backstage.io, first problem I faced was regarding authentication because by default backstage does not have any type of authentication enabled , so this was very important aspect before moving more towards backstage.

For that purpose I used GitHub authentication with backstage.io and today, we will discuss about this.

So, Let’s start with the configuration.

First you need to provide auth section in your app-config.yaml file of backstage:

auth:
  providers:
    github:
      development:
        clientId: ${AUTH_GITHUB_CLIENT_ID}
        clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}

Refer to this URL to create an OAuth app on github:

GitHub Authentication Provider · Backstage Software Catalog and Developer Platform
The Backstage core-plugin-api package comes with a GitHub authentication provider that can authenticate users using…backstage.io

Then You need to enable the sign-in configuration for your frontend app:

Go to “packages/app/src/App.tsx” and add the following line as defined.

+ import { githubAuthApiRef } from '@backstage/core-plugin-api';
+ import { SignInPage } from '@backstage/core-components';



const app = createApp({
   apis,
+  components: {
+    SignInPage: props => (
+      <SignInPage
+        {...props}
+        auto
+        provider={{
+          id: 'github-auth-provider',
+          title: 'GitHub',
+          message: 'Sign in using GitHub',
+          apiRef: githubAuthApiRef,
+        }}
+      />
+    ),
+  },

After configuring front-end , we need to do configuration for back-end also.

Signing in a user into Backstage requires a mapping of the user identity from the third-party auth provider to a Backstage user identity.

Backstage by default have sign-in resolver for GitHub guest access. This makes to share all users a single “guests” identity.

Here, we are authenticating the user with GitHub,so GitHub user should be pre-populated in backstage for authentication to works enabled by importing Github Organizational Data.

Now for Back-end Configuration:

Go to “packages/backend/src/plugins/auth.ts” and change it like below:

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(),
        },
      }),
    },
  });
}

In above code , we are commenting out default sign in resolver and adding GitHub based resolver:

resolver: providers.github.resolvers.usernameMatchingUserEntityName(),

Now, your backstage is only allows the users which will get authenticated by GitHub app, i.e. the users which are exists in your GitHub organisation.

That’s all , Cheers!!!