2023-07-24-invoke-code-after-signout-in-backstage-app.md

templateKey	title	date	author	description	tags	img
blog-post	How to invoke code after signout in Backstage App?	2023-07-24 05:00:00 UTC	Taras Mankovski	A quick blog post to show how to invoke custom frontend code after a user signs out from Backstage using local storage as an example.	Backstage	/img/2020-07-29-simulator-social.png

This is a very quick blog post to show how you can invoke code custom source code after user signs out from Backstage. We'll use an example where we store a user entity ref in local storage after a user signs in and we'll clear the local storage after the user signs out. Without any further ado, let's get started.

First, let's setup the SignInPage to show the user the Auth0 sign-in screen. I'm using Auth0 because that's what we use to authenticate users in our Backstage instance. Your configuration will be different but the approach should be the same. In packages/app/src/App.tsx, we're going to add SignInPage component to const app = createApp section.

const app = createApp({
  apis,
  components: {
    SignInPage: props => (
       <SignInPage
         {...props}
         auto
         provider={{
           id: 'auth0-auth-provider',
           title: 'Auth0',
           message: 'Sign in using Auth0',
           apiRef: auth0AuthApiRef,
         }}
       />
     ),
    },
  },
  // ✄ the rest of the code for bravity, but you need it in your app
});

The {...props} contains a property called onSignInSuccess, it's called by the <SignInPage component when the user authenticates successfully. We can override this property to invoke custom code. Before we handle clean up, let's add the code that'll write the entity ref to local storage using the storage API provided by Backstage.

const app = createApp({
  apis,
  components: {
    SignInPage: props => {
      // this will give us the storage object that we can use to interact with local storage
      const storage = useApi(storageApiRef);

      return (
        <SignInPage
          onSignInSuccess={async (identityApi: IdentityApi) => {
            // first, authenticate the user
            props.onSignInSuccess(identityApi);

            // afterwards, get the authenticated user information
            const identity = await identityApi.getBackstageIdentity();

            // set the userEntityRef into 'authenticated/user' key in local storage
            storage.set('authenticated/user', identity.userEntityRef);
          }}
          auto
          provider={{
            id: 'auth0-auth-provider',
            title: 'Auth0',
            message: 'Sign in using Auth0',
            apiRef: auth0AuthApiRef,
          }}
        />
      );
    },
  },
  // ✄ the rest of the code for bravity, but you need it in your app
});

The identityApi object has four methods on it. One of those methods is called signOut. Invoking this method will remove sign the user out. To hook into this method, we need to wrap it in our own function that we can use to add custom code. We need to make sure that all of the rest of the methods still work, so we'll wrap them but they will just call the original object.

const app = createApp({
  apis,
  components: {
    SignInPage: props => {
      const storage = useApi(storageApiRef);

      return (
        <SignInPage
          onSignInSuccess={async (identityApi: IdentityApi) => {
            // creating a new object and passing it to `onSignInSuccess`
            props.onSignInSuccess({
              // pass-through getProfileInfo, getBackstageIdentity and getCredentials
              // they will just call the original method with the same name
              getProfileInfo() {
                return identityApi.getProfileInfo();
              },
              getBackstageIdentity() {
                return identityApi.getBackstageIdentity();
              },
              getCredentials() {
                return identityApi.getCredentials();
              },
              async signOut() {
                // call signOut() to perform actual signOut logic
                await identityApi.signOut();
                // happens after signout
                storage.remove('authenticated/user');
              },
            });
            // happens after successful authentication

            // afterwards, get the authenticated user information
            const identity = await identityApi.getBackstageIdentity();

            // set the userEntityRef into 'authenticated/user' key in local storage
            storage.set('authenticated/user', identity.userEntityRef);
          }}
          auto
          provider={{
            id: 'auth0-auth-provider',
            title: 'Auth0',
            message: 'Sign in using Auth0',
            apiRef: auth0AuthApiRef,
          }}
        />
      );
    },
  },
  // ✄ the rest of the code for bravity, but you need it in your app
  },
});

In the code above, we're creating a new object with four methods, just like the original identityApi. We don't change the logic of getProfileInfo, getBackstageIdentity and getCredentials, instead we just call the original method. These methods will behave exactly the same way as the original identityApi methods. We only change the logic of signOut method. We make it async to be able to use await keyword. Then we invoke the original method and call out custom code.

This is the entire solution for calling code after signin and signout. If you have any questions, feel free to ping us in Backstage Discord.