diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 35d354fefc..fbb99eec31 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -4,4 +4,5 @@
 # The last matching pattern takes precedence.
 # https://help.github.com/articles/about-codeowners/
 
-*                @spotify/backstage-core
+*                 @spotify/backstage-core
+/plugins/techdocs @spotify/techdocs-core
diff --git a/.gitignore b/.gitignore
index f5794babbc..a1eb87e8d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -116,3 +116,6 @@ dist
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
+
+# Temporary change files created by Vim
+*.swp
diff --git a/packages/app/package.json b/packages/app/package.json
index 6aa82a0b36..6b872156d6 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -14,7 +14,9 @@
     "@backstage/plugin-scaffolder": "^0.1.1-alpha.9",
     "@backstage/plugin-sentry": "^0.1.1-alpha.9",
     "@backstage/plugin-tech-radar": "^0.1.1-alpha.9",
+    "@backstage/plugin-techdocs": "^0.1.1-alpha.9",
     "@backstage/plugin-welcome": "^0.1.1-alpha.9",
+    "@backstage/test-utils": "^0.1.1-alpha.9",
     "@backstage/theme": "^0.1.1-alpha.9",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
@@ -22,6 +24,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-hot-loader": "^4.12.21",
+    "react-router": "6.0.0-alpha.5",
     "react-router-dom": "6.0.0-alpha.5",
     "react-use": "^14.2.0",
     "zen-observable": "^0.8.15"
diff --git a/packages/app/src/App.test.tsx b/packages/app/src/App.test.tsx
index 79f78e45e0..65e8ff64e6 100644
--- a/packages/app/src/App.test.tsx
+++ b/packages/app/src/App.test.tsx
@@ -15,23 +15,24 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
 import App from './App';
 
 describe('App', () => {
-  beforeAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      value: jest.fn(() => {
-        return {
-          matches: true,
-          addListener: jest.fn(),
-          removeListener: jest.fn(),
-        };
-      }),
+  it('should render', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [
+        {
+          data: {
+            app: { title: 'Test' },
+          },
+          context: 'test',
+        },
+      ],
     });
-  });
-  it('should render', () => {
-    const rendered = render(<App />);
+
+    const rendered = await renderWithEffects(<App />);
     expect(rendered.baseElement).toBeInTheDocument();
   });
 });
diff --git a/packages/app/src/plugins.ts b/packages/app/src/plugins.ts
index a6485835f7..05373d7d96 100644
--- a/packages/app/src/plugins.ts
+++ b/packages/app/src/plugins.ts
@@ -23,3 +23,4 @@ export { plugin as Circleci } from '@backstage/plugin-circleci';
 export { plugin as RegisterComponent } from '@backstage/plugin-register-component';
 export { plugin as Sentry } from '@backstage/plugin-sentry';
 export { plugin as GitopsProfiles } from '@backstage/plugin-gitops-profiles';
+export { plugin as TechDocs } from '@backstage/plugin-techdocs';
diff --git a/packages/backend-common/src/hot.ts b/packages/backend-common/src/hot.ts
index 3d4252b378..c725096c75 100644
--- a/packages/backend-common/src/hot.ts
+++ b/packages/backend-common/src/hot.ts
@@ -14,10 +14,38 @@
  * limitations under the License.
  */
 
+// Find all active hot module APIs of all ancestors of a module, including the module itself
+function findAllAncestors(_module: NodeModule): NodeModule[] {
+  const ancestors = new Array<NodeModule>();
+  const parentIds = new Set<string | number>();
+
+  function add(id: string | number, m: NodeModule) {
+    if (parentIds.has(id)) {
+      return;
+    }
+    parentIds.add(id);
+    ancestors.push(m);
+
+    for (const parentId of (m as any).parents) {
+      const parent = require.cache[parentId];
+      if (parent) {
+        add(parentId, parent);
+      }
+    }
+  }
+
+  add(_module.id, _module);
+
+  return ancestors;
+}
+
 /**
- * This function allows devs to cleanup
- * ongoing effects when module gets hot-reloaded
+ * useHotCleanup allows cleanup of ongoing effects when a module is
+ * hot-reloaded during development. The cleanup function will be called
+ * whenever the module itself or any of its parent modules is hot-reloaded.
+ *
  * Useful for cleaning intervals, timers, requests etc
+ *
  * @example
  * ```ts
  * const intervalId = setInterval(doStuff, 1000);
@@ -28,69 +56,69 @@
  */
 export function useHotCleanup(_module: NodeModule, cancelEffect: () => void) {
   if (_module.hot) {
-    _module.hot.addDisposeHandler(() => {
-      cancelEffect();
-    });
+    const ancestors = findAllAncestors(_module);
+    let cancelled = false;
+
+    const handler = () => {
+      if (!cancelled) {
+        cancelled = true;
+        cancelEffect();
+      }
+    };
+
+    for (const m of ancestors) {
+      m.hot?.addDisposeHandler(handler);
+    }
   }
 }
 
+const CURRENT_HOT_MEMOIZE_INDEX_KEY = 'backstage.io/hmr-memoize-key';
+
 /**
- * This function allows devs to preserve
- * some value between hot-reloads.
- * Useful for stateful parts of the backend
+ * Memoizes a generated value across hot-module reloads. This is useful for
+ * stateful parts of the backend, e.g. to retain a database.
+ *
  * @example
  * ```ts
  * const db = useHotMemoize(module, () => createDB(dbParams));
  * ```
- * @param _module Reference to the current module where you invoke the fn
- * @param valueFactory Fn that returns the value you want to memoize
+ *
  * @warning Don't use inside conditionals or loops,
  * same rules as for hooks apply (https://reactjs.org/docs/hooks-rules.html)
+ *
+ * @param _module Reference to the current module where you invoke the fn
+ * @param valueFactory Fn that returns the value you want to memoize
  */
 export function useHotMemoize<T>(
   _module: NodeModule,
   valueFactory: () => T,
 ): T {
-  const CURRENT_HOT_MEMOIZE_INDEX_KEY = 'backstage.io/hmr-memoize-key';
-
   if (!_module.hot) {
-    // Just return value straight away
     return valueFactory();
   }
 
-  if (_module.hot && typeof _module.hot.data === 'undefined') {
-    // First run, init the module data
+  // When starting blank, reset the counter
+  if (!_module.hot.data?.[CURRENT_HOT_MEMOIZE_INDEX_KEY]) {
+    for (const ancestor of findAllAncestors(_module)) {
+      ancestor.hot?.addDisposeHandler(data => {
+        data[CURRENT_HOT_MEMOIZE_INDEX_KEY] = 1;
+      });
+    }
+
     _module.hot.data = {
-      [CURRENT_HOT_MEMOIZE_INDEX_KEY]: 0,
+      ..._module.hot.data,
+      [CURRENT_HOT_MEMOIZE_INDEX_KEY]: 1,
     };
   }
 
-  // Let's store data per module based on the order of the code invocation
-  const index = _module.hot.data[CURRENT_HOT_MEMOIZE_INDEX_KEY];
-  // Increasing the counter after each call
-  _module.hot.data[CURRENT_HOT_MEMOIZE_INDEX_KEY] += 1;
+  // Store data per module, based on the order of the code invocation
+  const index = _module.hot.data[CURRENT_HOT_MEMOIZE_INDEX_KEY]++;
+  const value = _module.hot.data[index] ?? valueFactory();
 
-  const prevValue = _module.hot.data[index];
-  const createDisposeHandler = (value: any) => (data: {
-    [key: number]: any;
-    [indexKey: string]: number;
-  }) => {
-    // Preserving the value through the HMR process
+  // Always add a handler that, upon a HMR event, reinstates the value.
+  _module.hot.addDisposeHandler(data => {
     data[index] = value;
-    // Decreasing the counter after each handler
-    data[CURRENT_HOT_MEMOIZE_INDEX_KEY] =
-      // First hot update is still different, need to populate the data
-      typeof data[CURRENT_HOT_MEMOIZE_INDEX_KEY] === 'undefined'
-        ? _module.hot!.data[CURRENT_HOT_MEMOIZE_INDEX_KEY] - 1
-        : data[CURRENT_HOT_MEMOIZE_INDEX_KEY] - 1;
-  };
+  });
 
-  if (prevValue) {
-    _module.hot!.addDisposeHandler(createDisposeHandler(prevValue));
-    return prevValue;
-  }
-
-  const newValue = valueFactory();
-  _module.hot.addDisposeHandler(createDisposeHandler(newValue));
-  return newValue;
+  return value;
 }
diff --git a/packages/backend/src/plugins/auth.ts b/packages/backend/src/plugins/auth.ts
index a9c687cbc4..b24dd6ca6b 100644
--- a/packages/backend/src/plugins/auth.ts
+++ b/packages/backend/src/plugins/auth.ts
@@ -19,7 +19,8 @@ import { PluginEnvironment } from '../types';
 
 export default async function createPlugin({
   logger,
+  database,
   config,
 }: PluginEnvironment) {
-  return await createRouter({ logger, config });
+  return await createRouter({ logger, config, database });
 }
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index 6fe8092e50..aab244f7e9 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -178,8 +178,7 @@ export function createBackendConfig(
     context: paths.targetPath,
     entry: [
       'webpack/hot/poll?100',
-      paths.targetEntry,
-      ...(paths.targetRunFile ? [paths.targetRunFile] : []),
+      paths.targetRunFile ? paths.targetRunFile : paths.targetEntry,
     ],
     resolve: {
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
diff --git a/packages/cli/templates/default-app/package.json.hbs b/packages/cli/templates/default-app/package.json.hbs
index a96061a5bd..c70e00e4d0 100644
--- a/packages/cli/templates/default-app/package.json.hbs
+++ b/packages/cli/templates/default-app/package.json.hbs
@@ -31,6 +31,9 @@
     "lerna": "^3.20.2",
     "prettier": "^1.19.1"
   },
+  "resolutions": {
+    "**/esbuild": "0.5.3"
+  },
   "prettier": "@spotify/prettier-config",
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/packages/cli/templates/default-app/packages/app/package.json.hbs b/packages/cli/templates/default-app/packages/app/package.json.hbs
index 346e09a76a..79120e0d7e 100644
--- a/packages/cli/templates/default-app/packages/app/package.json.hbs
+++ b/packages/cli/templates/default-app/packages/app/package.json.hbs
@@ -8,10 +8,12 @@
     "@material-ui/lab": "4.0.0-alpha.45",
     "@backstage/cli": "^{{version}}",
     "@backstage/core": "^{{version}}",
+    "@backstage/test-utils": "^{{version}}",
     "@backstage/theme": "^{{version}}",
     "plugin-welcome": "0.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router": "6.0.0-alpha.5",
     "react-router-dom": "6.0.0-alpha.5",
     "react-use": "^14.2.0"
   },
diff --git a/packages/cli/templates/default-app/packages/app/public/index.html b/packages/cli/templates/default-app/packages/app/public/index.html
index 3d01107696..ea9208ca57 100644
--- a/packages/cli/templates/default-app/packages/app/public/index.html
+++ b/packages/cli/templates/default-app/packages/app/public/index.html
@@ -8,47 +8,38 @@
       name="description"
       content="Backstage is an open platform for building developer portals"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="<%= publicPath %>/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link
       rel="manifest"
-      href="%PUBLIC_URL%/manifest.json"
+      href="<%= publicPath %>/manifest.json"
       crossorigin="use-credentials"
     />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="<%= publicPath %>/favicon.ico" />
+    <link rel="shortcut icon" href="<%= publicPath %>/favicon.ico" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/apple-touch-icon.png"
+      href="<%= publicPath %>/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicon-32x32.png"
+      href="<%= publicPath %>/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicon-16x16.png"
+      href="<%= publicPath %>/favicon-16x16.png"
     />
     <link
       rel="mask-icon"
-      href="%PUBLIC_URL%/safari-pinned-tab.svg"
+      href="<%= publicPath %>/safari-pinned-tab.svg"
       color="#5bbad5"
     />
     <style>
@@ -56,9 +47,9 @@
         min-height: 100%;
       }
     </style>
-    <title>Backstage</title>
+    <title><%= app.title %></title>
   </head>
-  <body style="margin: 0">
+  <body style="margin: 0;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/packages/cli/templates/default-app/packages/app/src/App.test.tsx b/packages/cli/templates/default-app/packages/app/src/App.test.tsx
index 0074416375..b94eab587f 100644
--- a/packages/cli/templates/default-app/packages/app/src/App.test.tsx
+++ b/packages/cli/templates/default-app/packages/app/src/App.test.tsx
@@ -1,10 +1,22 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
 import App from './App';
 
 describe('App', () => {
-  it('should render', () => {
-    const rendered = render(<App />);
+  it('should render', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [
+        {
+          data: {
+            app: { title: 'Test' },
+          },
+          context: 'test',
+        },
+      ],
+    });
+
+    const rendered = await renderWithEffects(<App />);
     expect(rendered.baseElement).toBeInTheDocument();
   });
 });
diff --git a/packages/cli/templates/default-app/packages/app/src/App.tsx b/packages/cli/templates/default-app/packages/app/src/App.tsx
index 1b58a3e5df..8a0aedca2e 100644
--- a/packages/cli/templates/default-app/packages/app/src/App.tsx
+++ b/packages/cli/templates/default-app/packages/app/src/App.tsx
@@ -1,26 +1,7 @@
-import { makeStyles } from '@material-ui/core';
 import { createApp } from '@backstage/core';
 import React, { FC } from 'react';
 import * as plugins from './plugins';
 
-const useStyles = makeStyles(theme => ({
-  '@global': {
-    html: {
-      height: '100%',
-      fontFamily: theme.typography.fontFamily,
-    },
-    body: {
-      height: '100%',
-      fontFamily: theme.typography.fontFamily,
-      'overscroll-behavior-y': 'none',
-    },
-    a: {
-      color: 'inherit',
-      textDecoration: 'none',
-    },
-  },
-}));
-
 const app = createApp({
   plugins: Object.values(plugins),
 });
@@ -29,15 +10,12 @@ const AppProvider = app.getProvider();
 const AppRouter = app.getRouter();
 const AppRoutes = app.getRoutes();
 
-const App: FC<{}> = () => {
-  useStyles();
-  return (
-    <AppProvider>
-      <AppRouter>
-        <AppRoutes />
-      </AppRouter>
-    </AppProvider>
-  );
-};
+const App: FC<{}> = () => (
+  <AppProvider>
+    <AppRouter>
+      <AppRoutes />
+    </AppRouter>
+  </AppProvider>
+);
 
 export default App;
diff --git a/packages/core-api/src/apis/definitions/IdentityApi.ts b/packages/core-api/src/apis/definitions/IdentityApi.ts
index 5da9ed4814..dbc36ad967 100644
--- a/packages/core-api/src/apis/definitions/IdentityApi.ts
+++ b/packages/core-api/src/apis/definitions/IdentityApi.ts
@@ -35,7 +35,7 @@ export type IdentityApi = {
    * The ID token will be undefined if the signed in user does not have a verified
    * identity, such as a demo user or mocked user for e2e tests.
    */
-  getIdToken(): string | undefined;
+  getIdToken(): Promise<string | undefined>;
 
   // TODO: getProfile(): Promise<Profile> - We want this to be async when added, but needs more work.
 
diff --git a/packages/core-api/src/apis/definitions/auth.ts b/packages/core-api/src/apis/definitions/auth.ts
index 7abab45780..c884bf975b 100644
--- a/packages/core-api/src/apis/definitions/auth.ts
+++ b/packages/core-api/src/apis/definitions/auth.ts
@@ -157,25 +157,47 @@ export type ProfileInfoOptions = {
   optional?: boolean;
 };
 
+/**
+ * This API provides access to profile information of the user from an auth provider.
+ */
 export type ProfileInfoApi = {
   getProfile(options?: ProfileInfoOptions): Promise<ProfileInfo | undefined>;
 };
 
+/**
+ * Profile information of the user from an auth provider.
+ */
 export type ProfileInfo = {
-  provider: string;
+  /**
+   * Email ID.
+   */
   email: string;
+  /**
+   * Display name that can be presented to the user.
+   */
   name?: string;
+  /**
+   * URL to an avatar image of the user.
+   */
   picture?: string;
 };
 
+/**
+ * Session state values passed to subscribers of the SessionStateApi.
+ */
 export enum SessionState {
   SignedIn = 'SignedIn',
   SignedOut = 'SignedOut',
 }
 
+/**
+ * This API provides access to an sessionState$ observable which provides an update when the
+ * user performs a sign in or sign out from an auth provider.
+ */
 export type SessionStateApi = {
   sessionState$(): Observable<SessionState>;
 };
+
 /**
  * Provides authentication towards Google APIs and identities.
  *
diff --git a/packages/core-api/src/app/App.tsx b/packages/core-api/src/app/App.tsx
index ec51814f85..a20a9b27f8 100644
--- a/packages/core-api/src/app/App.tsx
+++ b/packages/core-api/src/app/App.tsx
@@ -293,8 +293,6 @@ export class PrivateAppImpl implements BackstageApp {
       if (!SignInPageComponent) {
         this.identityApi.setSignInResult({
           userId: 'guest',
-          idToken: undefined,
-          logout: async () => {},
         });
 
         return (
diff --git a/packages/core-api/src/app/AppIdentity.ts b/packages/core-api/src/app/AppIdentity.ts
index 77de445a20..c38ece53df 100644
--- a/packages/core-api/src/app/AppIdentity.ts
+++ b/packages/core-api/src/app/AppIdentity.ts
@@ -24,7 +24,7 @@ import { SignInResult } from './types';
 export class AppIdentity implements IdentityApi {
   private hasIdentity = false;
   private userId?: string;
-  private idToken?: string;
+  private idTokenFunc?: () => Promise<string>;
   private logoutFunc?: () => Promise<void>;
 
   getUserId(): string {
@@ -36,13 +36,13 @@ export class AppIdentity implements IdentityApi {
     return this.userId!;
   }
 
-  getIdToken(): string | undefined {
+  async getIdToken(): Promise<string | undefined> {
     if (!this.hasIdentity) {
       throw new Error(
         'Tried to access IdentityApi idToken before app was loaded',
       );
     }
-    return this.idToken;
+    return this.idTokenFunc?.();
   }
 
   async logout(): Promise<void> {
@@ -64,7 +64,7 @@ export class AppIdentity implements IdentityApi {
     }
     this.hasIdentity = true;
     this.userId = result.userId;
-    this.idToken = result.idToken;
+    this.idTokenFunc = result.getIdToken;
     this.logoutFunc = result.logout;
   }
 }
diff --git a/packages/core-api/src/app/types.ts b/packages/core-api/src/app/types.ts
index a152ef9dfb..33b884fd58 100644
--- a/packages/core-api/src/app/types.ts
+++ b/packages/core-api/src/app/types.ts
@@ -32,9 +32,9 @@ export type SignInResult = {
    */
   userId: string;
   /**
-   * ID token that will be returned by the IdentityApi
+   * Function used to retrieve an ID token for the signed in user.
    */
-  idToken?: string;
+  getIdToken?: () => Promise<string>;
   /**
    * Logout handler that will be called if the user requests a logout.
    */
diff --git a/packages/core/src/api-wrappers/createApp.tsx b/packages/core/src/api-wrappers/createApp.tsx
index c13758a0b9..60c69d01c5 100644
--- a/packages/core/src/api-wrappers/createApp.tsx
+++ b/packages/core/src/api-wrappers/createApp.tsx
@@ -25,7 +25,7 @@ import privateExports, {
 import { BrowserRouter, MemoryRouter } from 'react-router-dom';
 
 import { ErrorPage } from '../layout/ErrorPage';
-import Progress from '../components/Progress';
+import { Progress } from '../components/Progress';
 import { lightTheme, darkTheme } from '@backstage/theme';
 import { AppConfig, JsonObject } from '@backstage/config';
 
diff --git a/packages/core/src/components/AlertDisplay/index.ts b/packages/core/src/components/AlertDisplay/index.ts
index 7bfac0c981..72aa1c5ad8 100644
--- a/packages/core/src/components/AlertDisplay/index.ts
+++ b/packages/core/src/components/AlertDisplay/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export * from './AlertDisplay';
+export { AlertDisplay } from './AlertDisplay';
diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx
index f7c9ba836d..c0f57d6330 100644
--- a/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx
+++ b/packages/core/src/components/CodeSnippet/CodeSnippet.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import CodeSnippet from './CodeSnippet';
+import { CodeSnippet } from './CodeSnippet';
 import { InfoCard } from '../../layout/InfoCard';
 
 export default {
diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx
index c019b316fd..42efbf14af 100644
--- a/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx
+++ b/packages/core/src/components/CodeSnippet/CodeSnippet.test.tsx
@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-import CodeSnippet from './CodeSnippet';
+import { CodeSnippet } from './CodeSnippet';
 
 const JAVASCRIPT = `const greeting = "Hello";
 const world = "World";
diff --git a/packages/core/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core/src/components/CodeSnippet/CodeSnippet.tsx
index c77dc5bd43..324d71e936 100644
--- a/packages/core/src/components/CodeSnippet/CodeSnippet.tsx
+++ b/packages/core/src/components/CodeSnippet/CodeSnippet.tsx
@@ -31,7 +31,7 @@ const defaultProps = {
   showLineNumbers: false,
 };
 
-const CodeSnippet: FC<Props> = props => {
+export const CodeSnippet: FC<Props> = props => {
   const { text, language, showLineNumbers } = {
     ...defaultProps,
     ...props,
@@ -57,5 +57,3 @@ CodeSnippet.propTypes = {
   language: PropTypes.string.isRequired,
   showLineNumbers: PropTypes.bool,
 };
-
-export default CodeSnippet;
diff --git a/packages/core/src/components/CodeSnippet/index.tsx b/packages/core/src/components/CodeSnippet/index.tsx
index 71587789e5..11ca1ecde2 100644
--- a/packages/core/src/components/CodeSnippet/index.tsx
+++ b/packages/core/src/components/CodeSnippet/index.tsx
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './CodeSnippet';
+export { CodeSnippet } from './CodeSnippet';
diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx
index 92db2073d3..1894574df2 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx
+++ b/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import CopyTextButton from '.';
+import { CopyTextButton } from '.';
 
 export default {
   title: 'CopyTextButton',
diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
index dd83cd318d..e789035b44 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
+++ b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import CopyTextButton from './CopyTextButton';
+import { CopyTextButton } from './CopyTextButton';
 import {
   ApiRegistry,
   errorApiRef,
diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
index 1c5028fa9c..e4773165cc 100644
--- a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
+++ b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx
@@ -56,7 +56,7 @@ const defaultProps = {
   tooltipText: 'Text copied to clipboard',
 };
 
-const CopyTextButton: FC<Props> = props => {
+export const CopyTextButton: FC<Props> = props => {
   const { text, tooltipDelay, tooltipText } = {
     ...defaultProps,
     ...props,
@@ -110,5 +110,3 @@ CopyTextButton.propTypes = {
   tooltipDelay: PropTypes.number,
   tooltipText: PropTypes.string,
 };
-
-export default CopyTextButton;
diff --git a/packages/core/src/components/CopyTextButton/index.tsx b/packages/core/src/components/CopyTextButton/index.tsx
index 22fd7f05bb..adde10a927 100644
--- a/packages/core/src/components/CopyTextButton/index.tsx
+++ b/packages/core/src/components/CopyTextButton/index.tsx
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './CopyTextButton';
+export { CopyTextButton } from './CopyTextButton';
diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
index 78307bd5a3..4a404a840f 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import DismissableBanner from './DismissableBanner';
+import { DismissableBanner } from './DismissableBanner';
 import { Link, Typography } from '@material-ui/core';
 import {
   ApiProvider,
diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.test.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.test.tsx
index b3a33fc089..b1fd32bc0a 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.test.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.test.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
-import DismissableBanner from './DismissableBanner';
+import { DismissableBanner } from './DismissableBanner';
 import {
   ApiRegistry,
   ApiProvider,
diff --git a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
index e174ac8d55..eebb884806 100644
--- a/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core/src/components/DismissableBanner/DismissableBanner.tsx
@@ -59,7 +59,7 @@ type Props = {
   id: string;
 };
 
-const DismissableBanner: FC<Props> = ({ variant, message, id }) => {
+export const DismissableBanner: FC<Props> = ({ variant, message, id }) => {
   const classes = useStyles();
   const storageApi = useApi(storageApiRef);
   const notificationsStore = storageApi.forBucket('notifications');
@@ -111,5 +111,3 @@ const DismissableBanner: FC<Props> = ({ variant, message, id }) => {
     </Snackbar>
   );
 };
-
-export default DismissableBanner;
diff --git a/packages/core/src/components/DismissableBanner/index.ts b/packages/core/src/components/DismissableBanner/index.ts
index 28091e858b..c1d69cd95e 100644
--- a/packages/core/src/components/DismissableBanner/index.ts
+++ b/packages/core/src/components/DismissableBanner/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './DismissableBanner';
+export { DismissableBanner } from './DismissableBanner';
diff --git a/packages/core/src/components/FeatureDiscovery/index.ts b/packages/core/src/components/FeatureDiscovery/index.ts
new file mode 100644
index 0000000000..57e35e3855
--- /dev/null
+++ b/packages/core/src/components/FeatureDiscovery/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { FeatureCalloutCircular } from './FeatureCalloutCircular';
diff --git a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx
index 7ab3efd524..b65c5bff5d 100644
--- a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx
+++ b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.stories.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import HorizontalScrollGrid from './HorizontalScrollGrid';
+import { HorizontalScrollGrid } from './HorizontalScrollGrid';
 
 const cardContentStyle = { height: 0, padding: 150, margin: 20 };
 const containerStyle = { width: 800, height: 400, margin: 20 };
diff --git a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx
index 25da497c4c..83cec85fc5 100644
--- a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx
+++ b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.jsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
-import HorizontalScrollGrid from './HorizontalScrollGrid';
+import { HorizontalScrollGrid } from './HorizontalScrollGrid';
 import { Grid } from '@material-ui/core';
 
 describe('<HorizontalScrollGrid />', () => {
diff --git a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
index c636a74308..4e321dfa95 100644
--- a/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
+++ b/packages/core/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx
@@ -181,7 +181,7 @@ function useSmoothScroll(
   return setScrollTarget;
 }
 
-const HorizontalScrollGrid: FC<Props> = props => {
+export const HorizontalScrollGrid: FC<Props> = props => {
   const {
     scrollStep = 100,
     scrollSpeed = 50,
@@ -245,5 +245,3 @@ const HorizontalScrollGrid: FC<Props> = props => {
     </div>
   );
 };
-
-export default HorizontalScrollGrid;
diff --git a/packages/core/src/components/HorizontalScrollGrid/index.tsx b/packages/core/src/components/HorizontalScrollGrid/index.tsx
index 2b44fe1955..cb1253cae2 100644
--- a/packages/core/src/components/HorizontalScrollGrid/index.tsx
+++ b/packages/core/src/components/HorizontalScrollGrid/index.tsx
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './HorizontalScrollGrid';
+export { HorizontalScrollGrid } from './HorizontalScrollGrid';
diff --git a/packages/core/src/components/Progress/Progress.stories.tsx b/packages/core/src/components/Progress/Progress.stories.tsx
index 27fa7195f3..b935f60695 100644
--- a/packages/core/src/components/Progress/Progress.stories.tsx
+++ b/packages/core/src/components/Progress/Progress.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import Progress from '.';
+import { Progress } from '.';
 
 export default {
   title: 'Progress',
diff --git a/packages/core/src/components/Progress/Progress.tsx b/packages/core/src/components/Progress/Progress.tsx
index 607c53ade0..e66220e4e7 100644
--- a/packages/core/src/components/Progress/Progress.tsx
+++ b/packages/core/src/components/Progress/Progress.tsx
@@ -17,7 +17,7 @@
 import React, { FC, useState, useEffect } from 'react';
 import { LinearProgress, LinearProgressProps } from '@material-ui/core';
 
-const Progress: FC<LinearProgressProps> = props => {
+export const Progress: FC<LinearProgressProps> = props => {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
@@ -31,5 +31,3 @@ const Progress: FC<LinearProgressProps> = props => {
     <div style={{ display: 'none' }} data-testid="progress" />
   );
 };
-
-export default Progress;
diff --git a/packages/core/src/components/Progress/index.ts b/packages/core/src/components/Progress/index.ts
index d60b6f3e03..6598103ab1 100644
--- a/packages/core/src/components/Progress/index.ts
+++ b/packages/core/src/components/Progress/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './Progress';
+export { Progress } from './Progress';
diff --git a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx b/packages/core/src/components/ProgressBars/CircleProgress.test.jsx
index b42559b7b7..9b9eae1bb8 100644
--- a/packages/core/src/components/ProgressBars/CircleProgress.test.jsx
+++ b/packages/core/src/components/ProgressBars/CircleProgress.test.jsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import CircleProgress, { getProgressColor } from './CircleProgress';
+import { CircleProgress, getProgressColor } from './CircleProgress';
 
 describe('<CircleProgress />', () => {
   it('renders without exploding', () => {
diff --git a/packages/core/src/components/ProgressBars/CircleProgress.tsx b/packages/core/src/components/ProgressBars/CircleProgress.tsx
index b2da573de3..79a451b14e 100644
--- a/packages/core/src/components/ProgressBars/CircleProgress.tsx
+++ b/packages/core/src/components/ProgressBars/CircleProgress.tsx
@@ -77,7 +77,7 @@ export function getProgressColor(
   return palette.status.ok;
 }
 
-const CircleProgress: FC<Props> = props => {
+export const CircleProgress: FC<Props> = props => {
   const classes = useStyles(props);
   const theme = useTheme<BackstageTheme>();
   const { value, fractional, inverse, unit, max } = {
@@ -104,5 +104,3 @@ const CircleProgress: FC<Props> = props => {
     </div>
   );
 };
-
-export default CircleProgress;
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx b/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
index d027bcedc5..6e8f4ed7fd 100644
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
+++ b/packages/core/src/components/ProgressBars/HorizontalProgress.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import HorizontalProgress from './HorizontalProgress';
+import { HorizontalProgress } from './HorizontalProgress';
 
 const containerStyle = { width: 300 };
 
diff --git a/packages/core/src/components/ProgressBars/HorizontalProgress.tsx b/packages/core/src/components/ProgressBars/HorizontalProgress.tsx
index d7f813f55f..72bf1f34c3 100644
--- a/packages/core/src/components/ProgressBars/HorizontalProgress.tsx
+++ b/packages/core/src/components/ProgressBars/HorizontalProgress.tsx
@@ -28,7 +28,7 @@ type Props = {
   value: number;
 };
 
-const HorizontalProgress: FC<Props> = ({ value }) => {
+export const HorizontalProgress: FC<Props> = ({ value }) => {
   const theme = useTheme<BackstageTheme>();
   if (isNaN(value)) {
     return null;
@@ -49,5 +49,3 @@ const HorizontalProgress: FC<Props> = ({ value }) => {
     </Tooltip>
   );
 };
-
-export default HorizontalProgress;
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx b/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
index 9b99b5d621..62c9f3be6e 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
+++ b/packages/core/src/components/ProgressBars/ProgressCard.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import ProgressCard from './ProgressCard';
+import { ProgressCard } from './ProgressCard';
 import { Grid } from '@material-ui/core';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx b/packages/core/src/components/ProgressBars/ProgressCard.test.jsx
index 3e93e3f302..8568077a92 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.test.jsx
+++ b/packages/core/src/components/ProgressBars/ProgressCard.test.jsx
@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-import ProgressCard from './ProgressCard';
+import { ProgressCard } from './ProgressCard';
 
 const minProps = { title: 'Tingle upgrade', progress: 0.12 };
 
diff --git a/packages/core/src/components/ProgressBars/ProgressCard.tsx b/packages/core/src/components/ProgressBars/ProgressCard.tsx
index 9e70469091..eef6312600 100644
--- a/packages/core/src/components/ProgressBars/ProgressCard.tsx
+++ b/packages/core/src/components/ProgressBars/ProgressCard.tsx
@@ -18,7 +18,7 @@ import React, { FC } from 'react';
 import { makeStyles } from '@material-ui/core';
 import { InfoCard } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
-import CircleProgress from './CircleProgress';
+import { CircleProgress } from './CircleProgress';
 
 type Props = {
   title: string;
@@ -36,7 +36,7 @@ const useStyles = makeStyles({
   },
 });
 
-const ProgressCard: FC<Props> = props => {
+export const ProgressCard: FC<Props> = props => {
   const classes = useStyles(props);
   const { title, subheader, progress, deepLink, variant } = props;
 
@@ -53,5 +53,3 @@ const ProgressCard: FC<Props> = props => {
     </div>
   );
 };
-
-export default ProgressCard;
diff --git a/packages/core/src/components/ProgressBars/index.ts b/packages/core/src/components/ProgressBars/index.ts
new file mode 100644
index 0000000000..c74e283ae6
--- /dev/null
+++ b/packages/core/src/components/ProgressBars/index.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ProgressCard } from './ProgressCard';
+export { CircleProgress } from './CircleProgress';
+export { HorizontalProgress } from './HorizontalProgress';
diff --git a/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx b/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx
index 3015da3029..043084e4fb 100644
--- a/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx
+++ b/packages/core/src/components/SimpleStepper/SimpleStepper.test.tsx
@@ -16,8 +16,8 @@
 import React from 'react';
 import { render, fireEvent, within } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import Stepper from './SimpleStepper';
-import Step from './SimpleStepperStep';
+import { SimpleStepper as Stepper } from './SimpleStepper';
+import { SimpleStepperStep as Step } from './SimpleStepperStep';
 
 const getTextInSlide = (rendered: any, index: number) =>
   within(rendered.getByTestId(`step${index}`)).getByText;
diff --git a/packages/core/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core/src/components/SimpleStepper/SimpleStepper.tsx
index b55d70e9a0..bb2c3d640d 100644
--- a/packages/core/src/components/SimpleStepper/SimpleStepper.tsx
+++ b/packages/core/src/components/SimpleStepper/SimpleStepper.tsx
@@ -40,13 +40,17 @@ export interface StepperProps {
   onStepChange?: (prevIndex: number, nextIndex: number) => void;
 }
 
-const Stepper: FC<StepperProps> = ({ children, elevated, onStepChange }) => {
+export const SimpleStepper: FC<StepperProps> = ({
+  children,
+  elevated,
+  onStepChange,
+}) => {
   const [stepIndex, setStepIndex] = useState<number>(0);
   const [stepHistory, setStepHistory] = useState<number[]>([0]);
 
   const steps: React.ReactNode[] = [];
   let endStep;
-  Children.forEach(children, (child) => {
+  Children.forEach(children, child => {
     if (isValidElement(child)) {
       if (child.props.end) {
         endStep = child;
@@ -80,5 +84,3 @@ const Stepper: FC<StepperProps> = ({ children, elevated, onStepChange }) => {
     </>
   );
 };
-
-export default Stepper;
diff --git a/packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx b/packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx
index b49a62148d..c8cddb375d 100644
--- a/packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx
+++ b/packages/core/src/components/SimpleStepper/SimpleStepperFooter.tsx
@@ -18,7 +18,7 @@ import { Button, makeStyles } from '@material-ui/core';
 import { StepActions } from './SimpleStepperStep';
 import { VerticalStepperContext } from './SimpleStepper';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   root: {
     marginTop: theme.spacing(3),
     '& button': {
@@ -71,7 +71,7 @@ export type SimpleStepperFooterProps = {
   children?: ReactNode;
 };
 
-const SimpleStepperFooter: FC<SimpleStepperFooterProps> = ({
+export const SimpleStepperFooter: FC<SimpleStepperFooterProps> = ({
   actions = {},
   children,
 }) => {
@@ -145,5 +145,3 @@ const SimpleStepperFooter: FC<SimpleStepperFooterProps> = ({
     </div>
   );
 };
-
-export default SimpleStepperFooter;
diff --git a/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx b/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx
index 21fbb11cf2..e6ba1f7ddb 100644
--- a/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx
+++ b/packages/core/src/components/SimpleStepper/SimpleStepperStep.tsx
@@ -21,9 +21,9 @@ import {
   Typography,
   makeStyles,
 } from '@material-ui/core';
-import SimpleStepperFooter from './SimpleStepperFooter';
+import { SimpleStepperFooter } from './SimpleStepperFooter';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   end: {
     padding: theme.spacing(3),
   },
@@ -53,7 +53,7 @@ export type StepProps = {
   actions?: StepActions;
 };
 
-const Step: FC<StepProps> = ({
+export const SimpleStepperStep: FC<StepProps> = ({
   title,
   children,
   end,
@@ -82,5 +82,3 @@ const Step: FC<StepProps> = ({
     </MuiStep>
   );
 };
-
-export default Step;
diff --git a/packages/core/src/components/SimpleStepper/index.ts b/packages/core/src/components/SimpleStepper/index.ts
index 00eb92a382..392a66affa 100644
--- a/packages/core/src/components/SimpleStepper/index.ts
+++ b/packages/core/src/components/SimpleStepper/index.ts
@@ -14,7 +14,5 @@
  * limitations under the License.
  */
 
-import SimpleStepper from './SimpleStepper';
-import SimpleStepperStep from './SimpleStepperStep';
-
-export { SimpleStepper, SimpleStepperStep };
+export { SimpleStepper } from './SimpleStepper';
+export { SimpleStepperStep } from './SimpleStepperStep';
diff --git a/packages/core/src/components/Status/Status.stories.tsx b/packages/core/src/components/Status/Status.stories.tsx
index c0c579b217..01e2876524 100644
--- a/packages/core/src/components/Status/Status.stories.tsx
+++ b/packages/core/src/components/Status/Status.stories.tsx
@@ -23,7 +23,7 @@ import {
   StatusRunning,
   StatusWarning,
 } from './Status';
-import Table from '../Table';
+import { Table } from '../Table';
 import { InfoCard } from '../../layout/InfoCard';
 
 export default {
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
index 47908cba79..bdf0f65375 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx
@@ -16,7 +16,7 @@
 import React, { FC } from 'react';
 import { InfoCard } from '../../layout/InfoCard';
 import { Grid } from '@material-ui/core';
-import StructuredMetadataTable from '.';
+import { StructuredMetadataTable } from './StructuredMetadataTable';
 
 const cardContentStyle = { heightX: 200, width: 500 };
 
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx
index b9aa962969..1ae810ca17 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.test.jsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import StructuredMetadataTable from './StructuredMetadataTable';
+import { StructuredMetadataTable } from './StructuredMetadataTable';
 import { startCase } from 'lodash';
 
 describe('<StructuredMetadataTable />', () => {
diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
index cebf3581d4..f966bd570f 100644
--- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx
@@ -56,7 +56,7 @@ function renderMap(
   nested?: boolean,
   options?: any,
 ) {
-  const values = Object.keys(map).map((key) => {
+  const values = Object.keys(map).map(key => {
     const value = toValue(map[key], true);
     const fmtKey =
       options && options.titleFormat
@@ -98,7 +98,7 @@ function toValue(
 }
 
 function mapToItems(info: { [key: string]: string }, options: any) {
-  return Object.keys(info).map((key) => (
+  return Object.keys(info).map(key => (
     <TableItem key={key} title={key} value={info[key]} options={options} />
   ));
 }
@@ -147,7 +147,8 @@ interface ComponentProps {
   dense?: boolean;
   options?: any;
 }
-export default class StructuredMetadataTable extends Component<ComponentProps> {
+
+export class StructuredMetadataTable extends Component<ComponentProps> {
   render() {
     const { metadata, dense, options } = this.props;
     const metadataItems = mapToItems(metadata, options || {});
diff --git a/packages/core/src/components/StructuredMetadataTable/index.tsx b/packages/core/src/components/StructuredMetadataTable/index.tsx
index 588f5ef170..628f3395db 100644
--- a/packages/core/src/components/StructuredMetadataTable/index.tsx
+++ b/packages/core/src/components/StructuredMetadataTable/index.tsx
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './StructuredMetadataTable';
+export { StructuredMetadataTable } from './StructuredMetadataTable';
diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx
index c884086bfa..f8c09f5073 100644
--- a/packages/core/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core/src/components/SupportButton/SupportButton.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const SupportButton: FC<Props> = ({
+export const SupportButton: FC<Props> = ({
   slackChannel = '#backstage',
   email = [],
   children,
@@ -155,5 +155,3 @@ const SupportButton: FC<Props> = ({
     </Fragment>
   );
 };
-
-export default SupportButton;
diff --git a/packages/core/src/components/SupportButton/index.ts b/packages/core/src/components/SupportButton/index.ts
index e930a70685..e133900d0a 100644
--- a/packages/core/src/components/SupportButton/index.ts
+++ b/packages/core/src/components/SupportButton/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './SupportButton';
+export { SupportButton } from './SupportButton';
diff --git a/packages/core/src/components/Table/SubvalueCell.tsx b/packages/core/src/components/Table/SubvalueCell.tsx
index d8465b2a23..139cdee588 100644
--- a/packages/core/src/components/Table/SubvalueCell.tsx
+++ b/packages/core/src/components/Table/SubvalueCell.tsx
@@ -33,7 +33,7 @@ type SubvalueCellProps = {
   subvalue: React.ReactNode;
 };
 
-const SubvalueCell: FC<SubvalueCellProps> = ({ value, subvalue }) => {
+export const SubvalueCell: FC<SubvalueCellProps> = ({ value, subvalue }) => {
   const classes = useSubvalueCellStyles();
 
   return (
@@ -43,5 +43,3 @@ const SubvalueCell: FC<SubvalueCellProps> = ({ value, subvalue }) => {
     </>
   );
 };
-
-export default SubvalueCell;
diff --git a/packages/core/src/components/Table/Table.stories.tsx b/packages/core/src/components/Table/Table.stories.tsx
index dbe87963ee..3709c301fd 100644
--- a/packages/core/src/components/Table/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import Table, { SubvalueCell, TableColumn } from './';
+import { Table, SubvalueCell, TableColumn } from './';
 
 export default {
   title: 'Table',
diff --git a/packages/core/src/components/Table/Table.test.tsx b/packages/core/src/components/Table/Table.test.tsx
index fb87db1b4b..24d68fe0d1 100644
--- a/packages/core/src/components/Table/Table.test.tsx
+++ b/packages/core/src/components/Table/Table.test.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import Table from './';
+import { Table } from './Table';
 
 const minProps = {
   columns: [
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx
index 191c394d62..c02aca5659 100644
--- a/packages/core/src/components/Table/Table.tsx
+++ b/packages/core/src/components/Table/Table.tsx
@@ -162,7 +162,7 @@ export interface TableProps extends MaterialTableProps<{}> {
   subtitle?: string;
 }
 
-const Table: FC<TableProps> = ({
+export const Table: FC<TableProps> = ({
   columns,
   options,
   title,
@@ -212,5 +212,3 @@ const Table: FC<TableProps> = ({
     />
   );
 };
-
-export default Table;
diff --git a/packages/core/src/components/Table/index.ts b/packages/core/src/components/Table/index.ts
index 7ea3ead808..aeade2b24f 100644
--- a/packages/core/src/components/Table/index.ts
+++ b/packages/core/src/components/Table/index.ts
@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export { default } from './Table';
+export { Table } from './Table';
 export type { TableColumn } from './Table';
-export { default as SubvalueCell } from './SubvalueCell';
+export { SubvalueCell } from './SubvalueCell';
diff --git a/packages/core/src/components/Tabs/index.ts b/packages/core/src/components/Tabs/index.ts
index 835ab5a8c3..76275f1d6b 100644
--- a/packages/core/src/components/Tabs/index.ts
+++ b/packages/core/src/components/Tabs/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { Tabs as default } from './Tabs';
+export { Tabs } from './Tabs';
diff --git a/packages/core/src/components/TrendLine/TrendLine.stories.tsx b/packages/core/src/components/TrendLine/TrendLine.stories.tsx
index 4a0c6ead00..cc2fdda052 100644
--- a/packages/core/src/components/TrendLine/TrendLine.stories.tsx
+++ b/packages/core/src/components/TrendLine/TrendLine.stories.tsx
@@ -15,8 +15,8 @@
  */
 
 import React from 'react';
-import TrendLine from '.';
-import Table from '../Table';
+import { Table } from '../Table';
+import { TrendLine } from './TrendLine';
 import { InfoCard } from '../../layout/InfoCard';
 
 export default {
diff --git a/packages/core/src/components/TrendLine/TrendLine.test.tsx b/packages/core/src/components/TrendLine/TrendLine.test.tsx
index 84e8413f01..dbd8adfccf 100644
--- a/packages/core/src/components/TrendLine/TrendLine.test.tsx
+++ b/packages/core/src/components/TrendLine/TrendLine.test.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-import TrendLine from '.';
+import { TrendLine } from './TrendLine';
 
 describe('TrendLine', () => {
   describe('when no data is present', () => {
diff --git a/packages/core/src/components/TrendLine/TrendLine.tsx b/packages/core/src/components/TrendLine/TrendLine.tsx
index 3ab9b67e53..6f2f70d38a 100644
--- a/packages/core/src/components/TrendLine/TrendLine.tsx
+++ b/packages/core/src/components/TrendLine/TrendLine.tsx
@@ -27,7 +27,7 @@ function color(data: number[], theme: BackstageTheme): string | undefined {
   return theme.palette.status.error;
 }
 
-const Trendline: FC<SparklinesProps & { title?: string }> = props => {
+export const TrendLine: FC<SparklinesProps & { title?: string }> = props => {
   const theme = useTheme<BackstageTheme>();
 
   if (!props.data) return null;
@@ -38,5 +38,3 @@ const Trendline: FC<SparklinesProps & { title?: string }> = props => {
     </Sparklines>
   );
 };
-
-export default Trendline;
diff --git a/packages/core/src/components/TrendLine/index.ts b/packages/core/src/components/TrendLine/index.ts
index 168c6e6d3f..ed98e53389 100644
--- a/packages/core/src/components/TrendLine/index.ts
+++ b/packages/core/src/components/TrendLine/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './TrendLine';
+export { TrendLine } from './TrendLine';
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx b/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx
index 2fd5395db5..92487ed8c5 100644
--- a/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx
+++ b/packages/core/src/components/WarningPanel/WarningPanel.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import WarningPanel from '.';
+import { WarningPanel } from './WarningPanel';
 import { Link, Button } from '@material-ui/core';
 
 export default {
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.test.tsx b/packages/core/src/components/WarningPanel/WarningPanel.test.tsx
index c4d836cfe1..493b143bbf 100644
--- a/packages/core/src/components/WarningPanel/WarningPanel.test.tsx
+++ b/packages/core/src/components/WarningPanel/WarningPanel.test.tsx
@@ -18,7 +18,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-import WarningPanel from './WarningPanel';
+import { WarningPanel } from './WarningPanel';
 
 const minProps = { title: 'Mock title', message: 'Some more info' };
 
diff --git a/packages/core/src/components/WarningPanel/WarningPanel.tsx b/packages/core/src/components/WarningPanel/WarningPanel.tsx
index aa173d2174..ab0927fc4c 100644
--- a/packages/core/src/components/WarningPanel/WarningPanel.tsx
+++ b/packages/core/src/components/WarningPanel/WarningPanel.tsx
@@ -19,7 +19,7 @@ import { Typography, makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 
-const useErrorOutlineStyles = makeStyles<BackstageTheme>((theme) => ({
+const useErrorOutlineStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     marginRight: theme.spacing(1),
     fill: theme.palette.warningText,
@@ -30,7 +30,7 @@ const ErrorOutlineStyled = () => {
   return <ErrorOutline classes={classes} />;
 };
 
-const useStyles = makeStyles<BackstageTheme>((theme) => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   message: {
     display: 'flex',
     flexDirection: 'column',
@@ -62,7 +62,7 @@ type Props = {
   title?: string;
 };
 
-const WarningPanel: FC<Props> = (props) => {
+export const WarningPanel: FC<Props> = props => {
   const classes = useStyles(props);
   const { title, message, children } = props;
   return (
@@ -82,5 +82,3 @@ const WarningPanel: FC<Props> = (props) => {
     </div>
   );
 };
-
-export default WarningPanel;
diff --git a/packages/core/src/components/WarningPanel/index.ts b/packages/core/src/components/WarningPanel/index.ts
index 704453fb47..5cc9b8bb65 100644
--- a/packages/core/src/components/WarningPanel/index.ts
+++ b/packages/core/src/components/WarningPanel/index.ts
@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { default } from './WarningPanel';
+export { WarningPanel } from './WarningPanel';
diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts
new file mode 100644
index 0000000000..6c070366c7
--- /dev/null
+++ b/packages/core/src/components/index.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './AlertDisplay';
+export * from './Button';
+export * from './CodeSnippet';
+export * from './CopyTextButton';
+export * from './DismissableBanner';
+export * from './FeatureDiscovery';
+export * from './HorizontalScrollGrid';
+export * from './Lifecycle';
+export * from './Link';
+export * from './OAuthRequestDialog';
+export * from './Progress';
+export * from './ProgressBars';
+export * from './SimpleStepper';
+export * from './Status';
+export * from './StructuredMetadataTable';
+export * from './SupportButton';
+export * from './Table';
+export * from './Tabs';
+export * from './TrendLine';
+export * from './WarningPanel';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c5749866b6..4c0d42bbb2 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -17,28 +17,5 @@
 export * from '@backstage/core-api';
 
 export * from './api-wrappers';
+export * from './components';
 export * from './layout';
-
-export { default as CodeSnippet } from './components/CodeSnippet';
-export { default as DismissableBanner } from './components/DismissableBanner';
-export { AlertDisplay } from './components/AlertDisplay';
-export { default as HorizontalScrollGrid } from './components/HorizontalScrollGrid';
-export { default as ProgressCard } from './components/ProgressBars/ProgressCard';
-export { default as CircleProgress } from './components/ProgressBars/CircleProgress';
-export { default as HorizontalProgress } from './components/ProgressBars/HorizontalProgress';
-export { default as CopyTextButton } from './components/CopyTextButton';
-export { default as Progress } from './components/Progress';
-export * from './components/SimpleStepper';
-export { OAuthRequestDialog } from './components/OAuthRequestDialog';
-export { Lifecycle } from './components/Lifecycle';
-export { default as SupportButton } from './components/SupportButton';
-export { default as Table, SubvalueCell } from './components/Table';
-export type { TableColumn } from './components/Table/Table';
-export { default as StructuredMetadataTable } from './components/StructuredMetadataTable';
-export { default as TrendLine } from './components/TrendLine';
-export { FeatureCalloutCircular } from './components/FeatureDiscovery/FeatureCalloutCircular';
-export * from './components/Status';
-export * from './components/Button';
-export * from './components/Link';
-export { default as WarningPanel } from './components/WarningPanel';
-export { default as Tabs } from './components/Tabs';
diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx
index 5911fe86b2..8a1191f442 100644
--- a/packages/core/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core/src/layout/SignInPage/SignInPage.tsx
@@ -22,7 +22,7 @@ import { ContentHeader } from '../ContentHeader/ContentHeader';
 import { Grid } from '@material-ui/core';
 import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api';
 import { useSignInProviders, SignInProviderId } from './providers';
-import Progress from '../../components/Progress';
+import { Progress } from '../../components/Progress';
 
 export type Props = SignInPageProps & {
   providers: SignInProviderId[];
diff --git a/packages/core/src/layout/SignInPage/customProvider.tsx b/packages/core/src/layout/SignInPage/customProvider.tsx
index 8141175d8f..d24b054b16 100644
--- a/packages/core/src/layout/SignInPage/customProvider.tsx
+++ b/packages/core/src/layout/SignInPage/customProvider.tsx
@@ -28,7 +28,6 @@ import {
 import isEmpty from 'lodash/isEmpty';
 import { InfoCard } from '../InfoCard/InfoCard';
 import { ProviderComponent, ProviderLoader, SignInProvider } from './types';
-import { SignInResult } from '@backstage/core-api';
 
 const ID_TOKEN_REGEX = /^[a-z0-9+/]+\.[a-z0-9+/]+\.[a-z0-9+/]+$/i;
 
@@ -43,12 +42,24 @@ const useFormStyles = makeStyles(theme => ({
   },
 }));
 
+type Data = {
+  userId: string;
+  idToken?: string;
+};
+
 const Component: ProviderComponent = ({ onResult }) => {
   const classes = useFormStyles();
-  const { register, handleSubmit, errors, formState } = useForm<SignInResult>({
+  const { register, handleSubmit, errors, formState } = useForm<Data>({
     mode: 'onChange',
   });
 
+  const handleResult = ({ userId, idToken }: Data) => {
+    onResult({
+      userId,
+      getIdToken: idToken ? async () => idToken : undefined,
+    });
+  };
+
   return (
     <Grid item>
       <InfoCard title="Custom User">
@@ -58,7 +69,7 @@ const Component: ProviderComponent = ({ onResult }) => {
           This selection will not be stored.
         </Typography>
 
-        <form className={classes.form} onSubmit={handleSubmit(onResult)}>
+        <form className={classes.form} onSubmit={handleSubmit(handleResult)}>
           <FormControl>
             <TextField
               name="userId"
diff --git a/packages/core/src/layout/SignInPage/googleProvider.tsx b/packages/core/src/layout/SignInPage/googleProvider.tsx
index 2db7e2fd53..9613437af8 100644
--- a/packages/core/src/layout/SignInPage/googleProvider.tsx
+++ b/packages/core/src/layout/SignInPage/googleProvider.tsx
@@ -35,12 +35,12 @@ const Component: ProviderComponent = ({ onResult }) => {
 
   const handleLogin = async () => {
     try {
-      const idToken = await googleAuthApi.getIdToken({ instantPopup: true });
+      await googleAuthApi.getIdToken({ instantPopup: true });
       const profile = await googleAuthApi.getProfile();
 
       onResult({
         userId: parseUserId(profile!),
-        idToken,
+        getIdToken: () => googleAuthApi.getIdToken(),
         logout: async () => {
           await googleAuthApi.logout();
         },
@@ -69,14 +69,11 @@ const Component: ProviderComponent = ({ onResult }) => {
 const loader: ProviderLoader = async apis => {
   const googleAuthApi = apis.get(googleAuthApiRef)!;
 
-  const [idToken, profile] = await Promise.all([
-    googleAuthApi.getIdToken({ optional: true }),
-    googleAuthApi.getProfile({ optional: true }),
-  ]);
+  const profile = await googleAuthApi.getProfile({ optional: true });
 
   return {
     userId: parseUserId(profile!),
-    idToken,
+    getIdToken: () => googleAuthApi.getIdToken(),
     logout: async () => {
       await googleAuthApi.logout();
     },
diff --git a/packages/storybook/.storybook/apis.js b/packages/storybook/.storybook/apis.js
index 0450f3969d..65b2ec5aaa 100644
--- a/packages/storybook/.storybook/apis.js
+++ b/packages/storybook/.storybook/apis.js
@@ -2,7 +2,6 @@ import {
   ApiRegistry,
   alertApiRef,
   errorApiRef,
-  identityApiRef,
   oauthRequestApiRef,
   OAuthRequestManager,
   googleAuthApiRef,
@@ -12,6 +11,7 @@ import {
   ErrorAlerter,
   GoogleAuth,
   GithubAuth,
+  identityApiRef,
 } from '@backstage/core';
 
 const builder = ApiRegistry.builder();
diff --git a/plugins/auth-backend/migrations/20200619125845_init.js b/plugins/auth-backend/migrations/20200619125845_init.js
new file mode 100644
index 0000000000..e31731b037
--- /dev/null
+++ b/plugins/auth-backend/migrations/20200619125845_init.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+
+/**
+ * @param {import('knex')} knex
+ */
+exports.up = async function up(knex) {
+  return knex.schema.createTable('signing_keys', table => {
+    table.comment(
+      'Signing keys that are currently in use or have recently been used to issue tokens',
+    );
+    table
+      .string('kid')
+      .primary()
+      .notNullable()
+      .comment('ID of the signing key');
+    table
+      .timestamp('created_at', { useTz: false, precision: 0 })
+      .notNullable()
+      .defaultTo(knex.fn.now())
+      .comment('The creation time of the key');
+    table.string('key').notNullable().comment('The serialized signing key');
+  });
+};
+
+/**
+ * @param {import('knex')} knex
+ */
+exports.down = async function down(knex) {
+  return knex.schema.dropTable('auth_keystore');
+};
diff --git a/plugins/auth-backend/package.json b/plugins/auth-backend/package.json
index d22a5ef6d6..bf6e120a4e 100644
--- a/plugins/auth-backend/package.json
+++ b/plugins/auth-backend/package.json
@@ -32,12 +32,16 @@
     "express-promise-router": "^3.0.3",
     "fs-extra": "^9.0.0",
     "helmet": "^3.22.0",
+    "jose": "^1.27.1",
     "jwt-decode": "2.2.0",
+    "knex": "^0.21.1",
+    "moment": "^2.26.0",
     "morgan": "^1.10.0",
     "passport": "^0.4.1",
     "passport-github2": "^0.1.12",
     "passport-google-oauth20": "^2.0.0",
     "passport-saml": "^1.3.3",
+    "uuid": "^8.0.0",
     "winston": "^3.2.1",
     "yn": "^4.0.0"
   },
@@ -46,10 +50,10 @@
     "@types/body-parser": "^1.19.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/jwt-decode": "2.2.1",
+    "@types/passport": "^1.0.3",
     "@types/passport-github2": "^1.2.4",
     "@types/passport-google-oauth20": "^2.0.3",
     "@types/passport-saml": "^1.1.2",
-    "@types/passport": "^1.0.3",
     "jest-fetch-mock": "^3.0.3"
   },
   "files": [
diff --git a/plugins/auth-backend/src/identity/DatabaseKeyStore.test.ts b/plugins/auth-backend/src/identity/DatabaseKeyStore.test.ts
new file mode 100644
index 0000000000..b22ab0ecda
--- /dev/null
+++ b/plugins/auth-backend/src/identity/DatabaseKeyStore.test.ts
@@ -0,0 +1,122 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Knex from 'knex';
+import moment from 'moment';
+import { DatabaseKeyStore } from './DatabaseKeyStore';
+
+function createDB() {
+  const knex = Knex({
+    client: 'sqlite3',
+    connection: ':memory:',
+    useNullAsDefault: true,
+  });
+  knex.client.pool.on('createSuccess', (_eventId: any, resource: any) => {
+    resource.run('PRAGMA foreign_keys = ON', () => {});
+  });
+  return knex;
+}
+
+const keyBase = {
+  use: 'sig',
+  kty: 'plain',
+  alg: 'Base64',
+} as const;
+
+describe('DatabaseKeyStore', () => {
+  it('should store a key', async () => {
+    const database = createDB();
+    const store = await DatabaseKeyStore.create({ database });
+
+    const key = {
+      kid: '123',
+      ...keyBase,
+    };
+
+    await expect(store.listKeys()).resolves.toEqual({ items: [] });
+    await store.addKey(key);
+
+    const { items } = await store.listKeys();
+    expect(items).toEqual([{ createdAt: expect.anything(), key }]);
+    expect(Math.abs(items[0].createdAt.diff(moment(), 's'))).toBeLessThan(10);
+  });
+
+  it('should remove stored keys', async () => {
+    const database = createDB();
+    const store = await DatabaseKeyStore.create({ database });
+
+    const key1 = { kid: '1', ...keyBase };
+    const key2 = { kid: '2', ...keyBase };
+    const key3 = { kid: '3', ...keyBase };
+
+    await store.addKey(key1);
+    await store.addKey(key2);
+    await store.addKey(key3);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [
+        { key: key1, createdAt: expect.anything() },
+        { key: key2, createdAt: expect.anything() },
+        { key: key3, createdAt: expect.anything() },
+      ],
+    });
+
+    store.removeKeys(['1']);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [
+        { key: key2, createdAt: expect.anything() },
+        { key: key3, createdAt: expect.anything() },
+      ],
+    });
+
+    store.removeKeys(['1', '2']);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [{ key: key3, createdAt: expect.anything() }],
+    });
+
+    store.removeKeys([]);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [{ key: key3, createdAt: expect.anything() }],
+    });
+
+    store.removeKeys(['3', '4']);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [],
+    });
+
+    await store.addKey(key1);
+    await store.addKey(key2);
+    await store.addKey(key3);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [
+        { key: key1, createdAt: expect.anything() },
+        { key: key2, createdAt: expect.anything() },
+        { key: key3, createdAt: expect.anything() },
+      ],
+    });
+
+    store.removeKeys(['1', '2', '3']);
+
+    await expect(store.listKeys()).resolves.toEqual({
+      items: [],
+    });
+  });
+});
diff --git a/plugins/auth-backend/src/identity/DatabaseKeyStore.ts b/plugins/auth-backend/src/identity/DatabaseKeyStore.ts
new file mode 100644
index 0000000000..c175cd6e12
--- /dev/null
+++ b/plugins/auth-backend/src/identity/DatabaseKeyStore.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Knex from 'knex';
+import path from 'path';
+import { utc } from 'moment';
+import { AnyJWK, KeyStore, StoredKey } from './types';
+
+const migrationsDir = path.resolve(
+  require.resolve('@backstage/plugin-auth-backend/package.json'),
+  '../migrations',
+);
+
+const TABLE = 'signing_keys';
+
+type Row = {
+  created_at: Date;
+  kid: string;
+  key: string;
+};
+
+type Options = {
+  database: Knex;
+};
+
+export class DatabaseKeyStore implements KeyStore {
+  static async create(options: Options): Promise<DatabaseKeyStore> {
+    const { database } = options;
+
+    await database.migrate.latest({
+      directory: migrationsDir,
+    });
+
+    return new DatabaseKeyStore(options);
+  }
+
+  private readonly database: Knex;
+
+  private constructor(options: Options) {
+    this.database = options.database;
+  }
+
+  async addKey(key: AnyJWK): Promise<void> {
+    await this.database<Row>(TABLE).insert({
+      kid: key.kid,
+      key: JSON.stringify(key),
+    });
+  }
+
+  async listKeys(): Promise<{ items: StoredKey[] }> {
+    const rows = await this.database<Row>(TABLE).select();
+
+    return {
+      items: rows.map(row => ({
+        key: JSON.parse(row.key),
+        createdAt: utc(row.created_at),
+      })),
+    };
+  }
+
+  async removeKeys(kids: string[]): Promise<void> {
+    await this.database(TABLE).delete().whereIn('kid', kids);
+  }
+}
diff --git a/plugins/auth-backend/src/identity/TokenFactory.test.ts b/plugins/auth-backend/src/identity/TokenFactory.test.ts
new file mode 100644
index 0000000000..4303401ee6
--- /dev/null
+++ b/plugins/auth-backend/src/identity/TokenFactory.test.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { utc } from 'moment';
+import { TokenFactory } from './TokenFactory';
+import { getVoidLogger } from '@backstage/backend-common';
+import { KeyStore, AnyJWK, StoredKey } from './types';
+import { JWKS, JSONWebKey, JWT } from 'jose';
+
+const logger = getVoidLogger();
+
+class MemoryKeyStore implements KeyStore {
+  private readonly keys = new Map<
+    string,
+    { createdAt: moment.Moment; key: string }
+  >();
+
+  async addKey(key: AnyJWK): Promise<void> {
+    this.keys.set(key.kid, {
+      createdAt: utc(),
+      key: JSON.stringify(key),
+    });
+  }
+
+  async removeKeys(kids: string[]): Promise<void> {
+    for (const kid of kids) {
+      this.keys.delete(kid);
+    }
+  }
+
+  async listKeys(): Promise<{ items: StoredKey[] }> {
+    return {
+      items: Array.from(this.keys).map(([, { createdAt, key: keyStr }]) => ({
+        createdAt,
+        key: JSON.parse(keyStr),
+      })),
+    };
+  }
+}
+
+function jwtKid(jwt: string): string {
+  const { header } = JWT.decode(jwt, { complete: true }) as {
+    header: { kid: string };
+  };
+  return header.kid;
+}
+
+describe('TokenFactory', () => {
+  it('should issue valid tokens signed by a listed key', async () => {
+    const keyDurationSeconds = 5;
+    const factory = new TokenFactory({
+      issuer: 'my-issuer',
+      keyStore: new MemoryKeyStore(),
+      keyDurationSeconds,
+      logger,
+    });
+
+    await expect(factory.listPublicKeys()).resolves.toEqual({ keys: [] });
+    const token = await factory.issueToken({ claims: { sub: 'foo' } });
+
+    const { keys } = await factory.listPublicKeys();
+    const keyStore = JWKS.asKeyStore({
+      keys: keys.map(key => key as JSONWebKey),
+    });
+
+    const payload = JWT.verify(token, keyStore) as object & {
+      iat: number;
+      exp: number;
+    };
+    expect(payload).toEqual({
+      iss: 'my-issuer',
+      aud: 'backstage',
+      sub: 'foo',
+      iat: expect.any(Number),
+      exp: expect.any(Number),
+    });
+    expect(payload.exp).toBe(payload.iat + keyDurationSeconds * 1000);
+  });
+
+  it('should generate new signing keys when the current one expires', async () => {
+    const fixedTime = Date.now();
+    jest.spyOn(Date, 'now').mockImplementation(() => fixedTime);
+
+    const factory = new TokenFactory({
+      issuer: 'my-issuer',
+      keyStore: new MemoryKeyStore(),
+      keyDurationSeconds: 5,
+      logger,
+    });
+
+    const token1 = await factory.issueToken({ claims: { sub: 'foo' } });
+    const token2 = await factory.issueToken({ claims: { sub: 'foo' } });
+    expect(jwtKid(token1)).toBe(jwtKid(token2));
+
+    await expect(factory.listPublicKeys()).resolves.toEqual({
+      keys: [
+        expect.objectContaining({
+          kid: jwtKid(token1),
+        }),
+      ],
+    });
+
+    jest.spyOn(Date, 'now').mockImplementation(() => fixedTime + 60000);
+
+    await expect(factory.listPublicKeys()).resolves.toEqual({
+      keys: [],
+    });
+
+    const token3 = await factory.issueToken({ claims: { sub: 'foo' } });
+    expect(jwtKid(token3)).not.toBe(jwtKid(token2));
+
+    await expect(factory.listPublicKeys()).resolves.toEqual({
+      keys: [
+        expect.objectContaining({
+          kid: jwtKid(token3),
+        }),
+      ],
+    });
+  });
+});
diff --git a/plugins/auth-backend/src/identity/TokenFactory.ts b/plugins/auth-backend/src/identity/TokenFactory.ts
new file mode 100644
index 0000000000..c4c259ed22
--- /dev/null
+++ b/plugins/auth-backend/src/identity/TokenFactory.ts
@@ -0,0 +1,163 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import moment from 'moment';
+import { TokenIssuer, TokenParams, KeyStore, AnyJWK } from './types';
+import { JSONWebKey, JWK, JWS } from 'jose';
+import { Logger } from 'winston';
+import { v4 as uuid } from 'uuid';
+
+const MS_IN_S = 1000;
+
+type Options = {
+  logger: Logger;
+  /** Value of the issuer claim in issued tokens */
+  issuer: string;
+  /** Key store used for storing signing keys */
+  keyStore: KeyStore;
+  /** Expiration time of signing keys in seconds */
+  keyDurationSeconds: number;
+};
+
+/**
+ * A token issuer that is able to issue tokens in a distributed system
+ * backed by a single database. Tokens are issued using lazily generated
+ * signing keys, where each running instance of the auth service uses its own
+ * signing key.
+ *
+ * The public parts of the keys are all stored in the shared key storage,
+ * and any of the instances of the auth service will return the full list
+ * of public keys that are currently in storage.
+ *
+ * Signing keys are automatically rotated at the same interval as the token
+ * duration. Expired keys are kept in storage until there are no valid tokens
+ * in circulation that could have been signed by that key.
+ */
+export class TokenFactory implements TokenIssuer {
+  private readonly issuer: string;
+  private readonly logger: Logger;
+  private readonly keyStore: KeyStore;
+  private readonly keyDurationSeconds: number;
+
+  private keyExpiry?: moment.Moment;
+  private privateKeyPromise?: Promise<JSONWebKey>;
+
+  constructor(options: Options) {
+    this.issuer = options.issuer;
+    this.logger = options.logger;
+    this.keyStore = options.keyStore;
+    this.keyDurationSeconds = options.keyDurationSeconds;
+  }
+
+  async issueToken(params: TokenParams): Promise<string> {
+    const key = await this.getKey();
+
+    const iss = this.issuer;
+    const sub = params.claims.sub;
+    const aud = 'backstage';
+    const iat = Math.floor(Date.now() / MS_IN_S);
+    const exp = iat + this.keyDurationSeconds * MS_IN_S;
+
+    this.logger.info(`Issuing token for ${sub}`);
+
+    return JWS.sign({ iss, sub, aud, iat, exp }, key, {
+      alg: key.alg,
+      kid: key.kid,
+    });
+  }
+
+  // This will be called by other services that want to verify ID tokens.
+  // It is important that it returns a list of all public keys that could
+  // have been used to sign tokens that have not yet expired.
+  async listPublicKeys(): Promise<{ keys: AnyJWK[] }> {
+    const { items: keys } = await this.keyStore.listKeys();
+
+    const validKeys = [];
+    const expiredKeys = [];
+
+    for (const key of keys) {
+      // Allow for a grace period of another full key duration before we remove the keys from the database
+      const expireAt = key.createdAt.add(3 * this.keyDurationSeconds, 's');
+      if (expireAt.isBefore()) {
+        expiredKeys.push(key);
+      } else {
+        validKeys.push(key);
+      }
+    }
+
+    // Lazily prune expired keys. This may cause duplicate removals if we have concurrent callers, but w/e
+    if (expiredKeys.length > 0) {
+      const kids = expiredKeys.map(({ key }) => key.kid);
+
+      this.logger.info(`Removing expired signing keys, '${kids.join("', '")}'`);
+
+      // We don't await this, just let it run in the background
+      this.keyStore.removeKeys(kids).catch(error => {
+        this.logger.error(`Failed to remove expired keys, ${error}`);
+      });
+    }
+
+    // NOTE: we're currently only storing public keys, but if we start storing private keys we'd have to convert here
+    return { keys: validKeys.map(({ key }) => key) };
+  }
+
+  private async getKey(): Promise<JSONWebKey> {
+    // Make sure that we only generate one key at a time
+    if (this.privateKeyPromise) {
+      if (this.keyExpiry?.isAfter()) {
+        return this.privateKeyPromise;
+      }
+      this.logger.info(`Signing key has expired, generating new key`);
+      delete this.privateKeyPromise;
+    }
+
+    this.keyExpiry = moment().add(this.keyDurationSeconds, 'seconds');
+    const promise = (async () => {
+      // This generates a new signing key to be used to sign tokens until the next key rotation
+      const key = await JWK.generate('EC', 'P-256', {
+        use: 'sig',
+        kid: uuid(),
+        alg: 'ES256',
+      });
+
+      // We're not allowed to use the key until it has been successfully stored
+      // TODO: some token verification implementations aggressively cache the list of keys, and
+      //       don't attempt to fetch new ones even if they encounter an unknown kid. Therefore we
+      //       may want to keep using the existing key for some period of time until we switch to
+      //       the new one. This also needs to be implemented cross-service though, meaning new services
+      //       that boot up need to be able to grab an existing key to use for signing.
+      this.logger.info(`Created new signing key ${key.kid}`);
+      await this.keyStore.addKey((key.toJWK(false) as unknown) as AnyJWK);
+
+      // At this point we are allowed to start using the new key
+      return key as JSONWebKey;
+    })();
+
+    this.privateKeyPromise = promise;
+
+    try {
+      // If we fail to generate a new key, we need to clear the state so that
+      // the next caller will try to generate another key.
+      await promise;
+    } catch (error) {
+      this.logger.error(`Failed to generate new signing key, ${error}`);
+      delete this.keyExpiry;
+      delete this.privateKeyPromise;
+    }
+
+    return promise;
+  }
+}
diff --git a/plugins/auth-backend/src/identity/index.ts b/plugins/auth-backend/src/identity/index.ts
new file mode 100644
index 0000000000..19eec94556
--- /dev/null
+++ b/plugins/auth-backend/src/identity/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { createOidcRouter } from './router';
+export { TokenFactory } from './TokenFactory';
+export { DatabaseKeyStore } from './DatabaseKeyStore';
+export type { KeyStore, TokenIssuer, TokenParams } from './types';
diff --git a/plugins/auth-backend/src/identity/router.ts b/plugins/auth-backend/src/identity/router.ts
new file mode 100644
index 0000000000..de05e8a06c
--- /dev/null
+++ b/plugins/auth-backend/src/identity/router.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Router from 'express-promise-router';
+import { TokenIssuer } from './types';
+
+export type Options = {
+  baseUrl: string;
+  tokenIssuer: TokenIssuer;
+};
+
+export function createOidcRouter(options: Options) {
+  const { baseUrl, tokenIssuer } = options;
+
+  const router = Router();
+
+  const config = {
+    issuer: baseUrl,
+    token_endpoint: `${baseUrl}/v1/token`,
+    userinfo_endpoint: `${baseUrl}/v1/userinfo`,
+    jwks_uri: `${baseUrl}/v1/certs`,
+    response_types_supported: ['id_token'],
+    subject_types_supported: ['public'],
+    id_token_signing_alg_values_supported: ['RS256'],
+    scopes_supported: ['openid'],
+    token_endpoint_auth_methods_supported: [],
+    claims_supported: ['sub'],
+    grant_types_supported: [],
+  };
+
+  router.get('/.well-known/openid-configuration', (_req, res) => {
+    res.json(config);
+  });
+
+  router.get('/.well-known/jwks.json', async (_req, res) => {
+    const { keys } = await tokenIssuer.listPublicKeys();
+    res.json({ keys });
+  });
+
+  router.get('/v1/token', (_req, res) => {
+    res.status(501).send('Not Implemented');
+  });
+
+  router.get('/v1/userinfo', (_req, res) => {
+    res.status(501).send('Not Implemented');
+  });
+
+  return router;
+}
diff --git a/plugins/auth-backend/src/identity/types.ts b/plugins/auth-backend/src/identity/types.ts
new file mode 100644
index 0000000000..827aba51ab
--- /dev/null
+++ b/plugins/auth-backend/src/identity/types.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** Represents any form of serializable JWK */
+export interface AnyJWK extends Record<string, string> {
+  use: 'sig';
+  alg: string;
+  kid: string;
+  kty: string;
+}
+
+/** Parameters used to issue new ID Tokens */
+export type TokenParams = {
+  /** The claims that will be embedded within the token */
+  claims: {
+    /** The token subject, i.e. User ID */
+    sub: string;
+  };
+};
+
+/**
+ * A TokenIssuer is able to issue verifiable ID Tokens on demand.
+ */
+export type TokenIssuer = {
+  /**
+   * Issues a new ID Token
+   */
+  issueToken(params: TokenParams): Promise<string>;
+
+  /**
+   * List all public keys that are currently being used to sign tokens, or have been used
+   * in the past within the token expiration time, including a grace period.
+   */
+  listPublicKeys(): Promise<{ keys: AnyJWK[] }>;
+};
+
+/**
+ * A JWK stored by a KeyStore
+ */
+export type StoredKey = {
+  key: AnyJWK;
+  createdAt: moment.Moment;
+};
+
+/**
+ * A KeyStore stores JWKs for later and shared use.
+ */
+export type KeyStore = {
+  /**
+   * Store a new key to be used for signing.
+   */
+  addKey(key: AnyJWK): Promise<void>;
+
+  /**
+   * Remove all keys with the provided kids.
+   */
+  removeKeys(kids: string[]): Promise<void>;
+
+  /**
+   * List all stored keys.
+   */
+  listKeys(): Promise<{ items: StoredKey[] }>;
+};
diff --git a/plugins/auth-backend/src/lib/EnvironmentHandler.ts b/plugins/auth-backend/src/lib/EnvironmentHandler.ts
index c4d8d2b6e7..6c16b3a712 100644
--- a/plugins/auth-backend/src/lib/EnvironmentHandler.ts
+++ b/plugins/auth-backend/src/lib/EnvironmentHandler.ts
@@ -57,6 +57,8 @@ export class EnvironmentHandler implements AuthProviderRouteHandlers {
 
   async logout(req: express.Request, res: express.Response): Promise<void> {
     const provider = this.getProviderForEnv(req);
-    await provider.logout(req, res);
+    if (provider.logout) {
+      await provider.logout(req, res);
+    }
   }
 }
diff --git a/plugins/auth-backend/src/lib/OAuthProvider.test.ts b/plugins/auth-backend/src/lib/OAuthProvider.test.ts
index bb261d1380..48952e6dad 100644
--- a/plugins/auth-backend/src/lib/OAuthProvider.test.ts
+++ b/plugins/auth-backend/src/lib/OAuthProvider.test.ts
@@ -180,6 +180,10 @@ describe('OAuthProvider', () => {
     disableRefresh: true,
     baseUrl: 'http://localhost:7000/auth',
     appOrigin: 'http://localhost:3000',
+    tokenIssuer: {
+      issueToken: async () => 'my-id-token',
+      listPublicKeys: async () => ({ keys: [] }),
+    },
   };
 
   it('sets the correct headers in start', async () => {
diff --git a/plugins/auth-backend/src/lib/OAuthProvider.ts b/plugins/auth-backend/src/lib/OAuthProvider.ts
index 62b565b60d..38065c3380 100644
--- a/plugins/auth-backend/src/lib/OAuthProvider.ts
+++ b/plugins/auth-backend/src/lib/OAuthProvider.ts
@@ -23,6 +23,7 @@ import {
   OAuthProviderHandlers,
 } from '../providers/types';
 import { InputError } from '@backstage/backend-common';
+import { TokenIssuer } from '../identity';
 
 export const THOUSAND_DAYS_MS = 1000 * 24 * 60 * 60 * 1000;
 export const TEN_MINUTES_MS = 600 * 1000;
@@ -33,6 +34,7 @@ export type Options = {
   disableRefresh?: boolean;
   baseUrl: string;
   appOrigin: string;
+  tokenIssuer: TokenIssuer;
 };
 
 export const verifyNonce = (req: express.Request, providerId: string) => {
@@ -142,6 +144,10 @@ export class OAuthProvider implements AuthProviderRouteHandlers {
         this.setRefreshTokenCookie(res, refreshToken);
       }
 
+      user.userIdToken = await this.options.tokenIssuer.issueToken({
+        claims: { sub: user.profile.email },
+      });
+
       // post message back to popup if successful
       return postMessageResponse(res, this.options.appOrigin, {
         type: 'auth-result',
@@ -198,6 +204,11 @@ export class OAuthProvider implements AuthProviderRouteHandlers {
         refreshToken,
         scope,
       );
+
+      refreshInfo.userIdToken = await this.options.tokenIssuer.issueToken({
+        claims: { sub: refreshInfo.profile?.email },
+      });
+
       return res.send(refreshInfo);
     } catch (error) {
       return res.status(401).send(`${error.message}`);
diff --git a/plugins/auth-backend/src/lib/PassportStrategyHelper.ts b/plugins/auth-backend/src/lib/PassportStrategyHelper.ts
index f9e32a2b6f..1e8dfca5ed 100644
--- a/plugins/auth-backend/src/lib/PassportStrategyHelper.ts
+++ b/plugins/auth-backend/src/lib/PassportStrategyHelper.ts
@@ -21,13 +21,14 @@ import {
   RedirectInfo,
   RefreshTokenResponse,
   ProfileInfo,
+  ProviderStrategy,
 } from '../providers/types';
 
 export const makeProfileInfo = (
   profile: passport.Profile,
   params: any,
 ): ProfileInfo => {
-  const { provider, displayName: name } = profile;
+  const { displayName: name } = profile;
 
   let email = '';
   if (profile.emails) {
@@ -51,7 +52,6 @@ export const makeProfileInfo = (
   }
 
   return {
-    provider,
     name,
     email,
     picture,
@@ -100,12 +100,12 @@ export const executeFrameHandlerStrategy = async (
 };
 
 export const executeRefreshTokenStrategy = async (
-  providerstrategy: passport.Strategy,
+  providerStrategy: passport.Strategy,
   refreshToken: string,
   scope: string,
 ): Promise<RefreshTokenResponse> => {
   return new Promise((resolve, reject) => {
-    const anyStrategy = providerstrategy as any;
+    const anyStrategy = providerStrategy as any;
     const OAuth2 = anyStrategy._oauth2.constructor;
     const oauth2 = new OAuth2(
       anyStrategy._oauth2._clientId,
@@ -149,12 +149,12 @@ export const executeRefreshTokenStrategy = async (
 };
 
 export const executeFetchUserProfileStrategy = async (
-  providerstrategy: passport.Strategy,
+  providerStrategy: passport.Strategy,
   accessToken: string,
   params: any,
 ): Promise<ProfileInfo> => {
   return new Promise((resolve, reject) => {
-    const anyStrategy = providerstrategy as any;
+    const anyStrategy = (providerStrategy as unknown) as ProviderStrategy;
     anyStrategy.userProfile(
       accessToken,
       (error: Error, passportProfile: passport.Profile) => {
diff --git a/plugins/auth-backend/src/providers/factories.ts b/plugins/auth-backend/src/providers/factories.ts
index 4cc9212620..5096b0698a 100644
--- a/plugins/auth-backend/src/providers/factories.ts
+++ b/plugins/auth-backend/src/providers/factories.ts
@@ -20,6 +20,7 @@ import { createGoogleProvider } from './google';
 import { createSamlProvider } from './saml';
 import { AuthProviderFactory, AuthProviderConfig } from './types';
 import { Logger } from 'winston';
+import { TokenIssuer } from '../identity';
 
 const factories: { [providerId: string]: AuthProviderFactory } = {
   google: createGoogleProvider,
@@ -32,19 +33,22 @@ export const createAuthProviderRouter = (
   globalConfig: AuthProviderConfig,
   providerConfig: any, // TODO: make this a config reader object of sorts
   logger: Logger,
+  issuer: TokenIssuer,
 ) => {
   const factory = factories[providerId];
   if (!factory) {
     throw Error(`No auth provider available for '${providerId}'`);
   }
 
-  const provider = factory(globalConfig, providerConfig, logger);
+  const provider = factory(globalConfig, providerConfig, logger, issuer);
 
   const router = Router();
   router.get('/start', provider.start.bind(provider));
   router.get('/handler/frame', provider.frameHandler.bind(provider));
   router.post('/handler/frame', provider.frameHandler.bind(provider));
-  router.post('/logout', provider.logout.bind(provider));
+  if (provider.logout) {
+    router.post('/logout', provider.logout.bind(provider));
+  }
   if (provider.refresh) {
     router.get('/refresh', provider.refresh.bind(provider));
   }
diff --git a/plugins/auth-backend/src/providers/github/provider.ts b/plugins/auth-backend/src/providers/github/provider.ts
index 0bcd80cf2c..b5f9d7e46b 100644
--- a/plugins/auth-backend/src/providers/github/provider.ts
+++ b/plugins/auth-backend/src/providers/github/provider.ts
@@ -36,6 +36,7 @@ import {
   EnvironmentHandler,
 } from '../../lib/EnvironmentHandler';
 import { Logger } from 'winston';
+import { TokenIssuer } from '../../identity';
 
 export class GithubAuthProvider implements OAuthProviderHandlers {
   private readonly _strategy: GithubStrategy;
@@ -69,6 +70,7 @@ export function createGithubProvider(
   { baseUrl }: AuthProviderConfig,
   providerConfig: EnvironmentProviderConfig,
   logger: Logger,
+  tokenIssuer: TokenIssuer,
 ) {
   const envProviders: EnvironmentHandlers = {};
 
@@ -101,6 +103,7 @@ export function createGithubProvider(
       secure,
       baseUrl,
       appOrigin,
+      tokenIssuer,
     });
   }
   return new EnvironmentHandler(envProviders);
diff --git a/plugins/auth-backend/src/providers/google/provider.ts b/plugins/auth-backend/src/providers/google/provider.ts
index 9675d4eef2..f41fbfe787 100644
--- a/plugins/auth-backend/src/providers/google/provider.ts
+++ b/plugins/auth-backend/src/providers/google/provider.ts
@@ -41,6 +41,7 @@ import {
   EnvironmentHandlers,
 } from '../../lib/EnvironmentHandler';
 import { Logger } from 'winston';
+import { TokenIssuer } from '../../identity';
 
 export class GoogleAuthProvider implements OAuthProviderHandlers {
   private readonly _strategy: GoogleStrategy;
@@ -116,6 +117,7 @@ export function createGoogleProvider(
   { baseUrl }: AuthProviderConfig,
   providerConfig: EnvironmentProviderConfig,
   logger: Logger,
+  tokenIssuer: TokenIssuer,
 ) {
   const envProviders: EnvironmentHandlers = {};
 
@@ -148,6 +150,7 @@ export function createGoogleProvider(
       secure,
       baseUrl,
       appOrigin,
+      tokenIssuer,
     });
   }
   return new EnvironmentHandler(envProviders);
diff --git a/plugins/auth-backend/src/providers/types.ts b/plugins/auth-backend/src/providers/types.ts
index 419a041637..3660751c1c 100644
--- a/plugins/auth-backend/src/providers/types.ts
+++ b/plugins/auth-backend/src/providers/types.ts
@@ -16,79 +16,211 @@
 
 import express from 'express';
 import { Logger } from 'winston';
+import { TokenIssuer } from '../identity';
 
 export type OAuthProviderOptions = {
+  /**
+   * Client ID of the auth provider.
+   */
   clientID: string;
+  /**
+   * Client Secret of the auth provider.
+   */
   clientSecret: string;
+  /**
+   * Callback URL to be passed to the auth provider to redirect to after the user signs in.
+   */
   callbackURL: string;
 };
 
-export type SAMLProviderConfig = {
-  entryPoint: string;
-  issuer: string;
-};
-
-export type EnvironmentProviderConfig = {
-  [key: string]: OAuthProviderConfig | SAMLProviderConfig;
-};
-
-export type AuthProviderConfig = {
-  baseUrl: string;
-};
-
 export type OAuthProviderConfig = {
+  /**
+   * Cookies can be marked with a secure flag to send cookies only when the request
+   * is over an encrypted channel (HTTPS).
+   *
+   * For development environment we don't mark the cookie as secure since we serve
+   * localhost over HTTP.
+   */
   secure: boolean;
-  appOrigin: string; // http://localhost:3000
+  /**
+   * The protocol://domain[:port] where the app (frontend) is hosted. This is used to post messages back
+   * to the window that initiates an auth request.
+   */
+  appOrigin: string;
+  /**
+   * Client ID of the auth provider.
+   */
   clientId: string;
+  /**
+   * Client Secret of the auth provider.
+   */
   clientSecret: string;
 };
 
+export type EnvironmentProviderConfig = {
+  /**
+   * key, values are environment names and OAuthProviderConfigs
+   *
+   * For e.g
+   * {
+   *   development: DevelopmentOAuthProviderConfig
+   *   production: ProductionOAuthProviderConfig
+   * }
+   */
+  [key: string]: OAuthProviderConfig;
+};
+
+export type AuthProviderConfig = {
+  /**
+   * The protocol://domain[:port] where the app is hosted. This is used to construct the
+   * callbackURL to redirect to once the user signs in to the auth provider.
+   */
+  baseUrl: string;
+};
+
+/**
+ * Any OAuth provider needs to implement this interface which has provider specific
+ * handlers for different methods to perform authentication, get access tokens,
+ * refresh tokens and perform sign out.
+ */
 export interface OAuthProviderHandlers {
+  /**
+   * This method initiates a sign in request with an auth provider.
+   * @param {express.Request} req
+   * @param options
+   */
   start(req: express.Request, options: any): Promise<any>;
+
+  /**
+   * Handles the redirect from the auth provider when the user has signed in.
+   * @param {express.Request} req
+   */
   handler(req: express.Request): Promise<any>;
+
+  /**
+   * (Optional) Given a refresh token and scope fetches a new access token from the auth provider.
+   * @param {string} refreshToken
+   * @param {string} scope
+   */
   refresh?(refreshToken: string, scope: string): Promise<any>;
+
+  /**
+   * (Optional) Sign out of the auth provider.
+   */
   logout?(): Promise<any>;
 }
 
+/**
+ * Any Auth provider needs to implement this interface which handles the routes in the
+ * auth backend. Any auth API requests from the frontend reaches these methods.
+ *
+ * The routes in the auth backend API are tied to these methods like below
+ *
+ * /auth/[provider]/start -> start
+ * /auth/[provider]/handler/frame -> frameHandler
+ * /auth/[provider]/refresh -> refresh
+ * /auth/[provider]/logout -> logout
+ */
 export interface AuthProviderRouteHandlers {
+  /**
+   * Handles the start route of the API. This initiates a sign in request with an auth provider.
+   *
+   * Request
+   * - scopes for the auth request (Optional)
+   * Response
+   * - redirect to the auth provider for the user to sign in or consent.
+   * - sets a nonce cookie and also pass the nonce as 'state' query parameter in the redirect request
+   *
+   * @param {express.Request} req
+   * @param {express.Response} res
+   */
   start(req: express.Request, res: express.Response): Promise<any>;
-  frameHandler(req: express.Request, res: express.Response): Promise<any>;
-  refresh?(req: express.Request, res: express.Response): Promise<any>;
-  logout(req: express.Request, res: express.Response): Promise<any>;
-}
 
-export type SAMLEnvironmentProviderConfig = {
-  [key: string]: SAMLProviderConfig;
-};
+  /**
+   * Once the user signs in or consents in the OAuth screen, the auth provider redirects to the
+   * callbackURL which is handled by this method.
+   *
+   * Request
+   * - to contain a nonce cookie and a 'state' query parameter
+   * Response
+   * - postMessage to the window with a payload that contains accessToken, expiryInSeconds?, idToken? and scope.
+   * - sets a refresh token cookie if the auth provider supports refresh tokens
+   *
+   * @param {express.Request} req
+   * @param {express.Response} res
+   */
+  frameHandler(req: express.Request, res: express.Response): Promise<any>;
+
+  /**
+   * (Optional) If the auth provider supports refresh tokens then this method handles
+   * requests to get a new access token.
+   *
+   * Request
+   * - to contain a refresh token cookie and scope (Optional) query parameter.
+   * Response
+   * - payload with accessToken, expiryInSeconds?, idToken?, scope and user profile information.
+   *
+   * @param {express.Request} req
+   * @param {express.Response} res
+   */
+  refresh?(req: express.Request, res: express.Response): Promise<any>;
+
+  /**
+   * (Optional) Handles sign out requests
+   *
+   * Response
+   * - removes the refresh token cookie
+   *
+   * @param {express.Request} req
+   * @param {express.Response} res
+   */
+  logout?(req: express.Request, res: express.Response): Promise<any>;
+}
 
 export type AuthProviderFactory = (
   globalConfig: AuthProviderConfig,
   providerConfig: EnvironmentProviderConfig,
   logger: Logger,
+  issuer: TokenIssuer,
 ) => AuthProviderRouteHandlers;
 
 export type AuthInfoBase = {
+  /**
+   * An access token issued for the signed in user.
+   */
   accessToken: string;
+  /**
+   * (Optional) Id token issued for the signed in user.
+   */
   idToken?: string;
+  /**
+   * Expiry of the access token in seconds.
+   */
   expiresInSeconds?: number;
+  /**
+   * Scopes granted for the access token.
+   */
   scope: string;
 };
 
 export type AuthInfoWithProfile = AuthInfoBase & {
-  profile:
-    | {
-        provider: string;
-        email: string;
-        name?: string;
-        picture?: string;
-      }
-    | undefined;
+  /**
+   * Profile information of the signed in user.
+   */
+  profile: ProfileInfo | undefined;
 };
 
 export type AuthInfoPrivate = {
+  /**
+   * A refresh token issued for the signed in user.
+   */
   refreshToken: string;
 };
 
+/**
+ * Payload sent as a post message after the auth request is complete.
+ * If successful then has a valid payload with Auth information else contains an error.
+ */
 export type AuthResponse =
   | {
       type: 'auth-result';
@@ -100,18 +232,49 @@ export type AuthResponse =
     };
 
 export type RedirectInfo = {
+  /**
+   * URL to redirect to
+   */
   url: string;
+  /**
+   * Status code to use for the redirect
+   */
   status?: number;
 };
 
 export type ProfileInfo = {
-  provider: string;
+  /**
+   * Email ID of the signed in user.
+   */
   email: string;
+  /**
+   * Display name that can be presented to the signed in user.
+   */
   name: string;
+  /**
+   * URL to an image that can be used as the display image or avatar of the
+   * signed in user.
+   */
   picture: string;
 };
 
 export type RefreshTokenResponse = {
+  /**
+   * An access token issued for the signed in user.
+   */
   accessToken: string;
   params: any;
 };
+
+export type ProviderStrategy = {
+  userProfile(accessToken: string, callback: Function): void;
+};
+
+export type SAMLProviderConfig = {
+  entryPoint: string;
+  issuer: string;
+};
+
+export type SAMLEnvironmentProviderConfig = {
+  [key: string]: SAMLProviderConfig;
+};
diff --git a/plugins/auth-backend/src/run.ts b/plugins/auth-backend/src/run.ts
index a2c2601258..679f8ded2e 100644
--- a/plugins/auth-backend/src/run.ts
+++ b/plugins/auth-backend/src/run.ts
@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import yn from 'yn';
 import { getRootLogger } from '@backstage/backend-common';
 import { startStandaloneServer } from './service/standaloneServer';
 
-const port = process.env.PLUGIN_PORT ? Number(process.env.PLUGIN_PORT) : 3003;
-const enableCors = yn(process.env.PLUGIN_CORS, { default: false });
 const logger = getRootLogger();
 
-startStandaloneServer({ port, enableCors, logger }).catch(err => {
+startStandaloneServer({ logger }).catch(err => {
   logger.error(err);
   process.exit(1);
 });
@@ -31,3 +28,5 @@ process.on('SIGINT', () => {
   logger.info('CTRL+C pressed; exiting.');
   process.exit(0);
 });
+
+module.hot?.accept();
diff --git a/plugins/auth-backend/src/service/router.ts b/plugins/auth-backend/src/service/router.ts
index 2e7b4623ff..68b2d31032 100644
--- a/plugins/auth-backend/src/service/router.ts
+++ b/plugins/auth-backend/src/service/router.ts
@@ -18,12 +18,15 @@ import express from 'express';
 import Router from 'express-promise-router';
 import cookieParser from 'cookie-parser';
 import bodyParser from 'body-parser';
+import Knex from 'knex';
 import { Logger } from 'winston';
 import { createAuthProviderRouter } from '../providers';
 import { Config } from '@backstage/config';
+import { DatabaseKeyStore, TokenFactory, createOidcRouter } from '../identity';
 
 export interface RouterOptions {
   logger: Logger;
+  database: Knex;
   config: Config;
 }
 
@@ -33,6 +36,19 @@ export async function createRouter(
   const router = Router();
   const logger = options.logger.child({ plugin: 'auth' });
 
+  const baseUrl = `${options.config.getString('backend.baseUrl')}/auth`;
+  const keyDurationSeconds = 3600;
+
+  const keyStore = await DatabaseKeyStore.create({
+    database: options.database,
+  });
+  const tokenIssuer = new TokenFactory({
+    issuer: baseUrl,
+    keyStore,
+    keyDurationSeconds,
+    logger: logger.child({ component: 'token-factory' }),
+  });
+
   router.use(cookieParser());
   router.use(bodyParser.urlencoded({ extended: false }));
   router.use(bodyParser.json());
@@ -79,7 +95,6 @@ export async function createRouter(
   const providerConfigs = config.auth.providers;
 
   for (const [providerId, providerConfig] of Object.entries(providerConfigs)) {
-    const baseUrl = `${options.config.getString('backend.baseUrl')}/auth`;
     logger.info(`Configuring provider, ${providerId}`);
     try {
       const providerRouter = createAuthProviderRouter(
@@ -87,11 +102,20 @@ export async function createRouter(
         { baseUrl },
         providerConfig,
         logger,
+        tokenIssuer,
       );
       router.use(`/${providerId}`, providerRouter);
     } catch (e) {
       logger.error(e.message);
     }
   }
+
+  router.use(
+    createOidcRouter({
+      tokenIssuer,
+      baseUrl,
+    }),
+  );
+
   return router;
 }
diff --git a/plugins/auth-backend/src/service/standaloneApplication.ts b/plugins/auth-backend/src/service/standaloneApplication.ts
deleted file mode 100644
index cd81e32ccb..0000000000
--- a/plugins/auth-backend/src/service/standaloneApplication.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
-  errorHandler,
-  notFoundHandler,
-  requestLoggingHandler,
-} from '@backstage/backend-common';
-import { Config } from '@backstage/config';
-import compression from 'compression';
-import cors from 'cors';
-import express from 'express';
-import helmet from 'helmet';
-import { Logger } from 'winston';
-import { createRouter } from './router';
-
-export interface ApplicationOptions {
-  enableCors: boolean;
-  logger: Logger;
-  config: Config;
-}
-
-export async function createStandaloneApplication(
-  options: ApplicationOptions,
-): Promise<express.Application> {
-  const { enableCors, logger, config } = options;
-  const app = express();
-
-  app.use(helmet());
-  if (enableCors) {
-    app.use(cors());
-  }
-  app.use(compression());
-  app.use(express.json());
-  app.use(requestLoggingHandler());
-  app.use('/', await createRouter({ logger, config }));
-  app.use(notFoundHandler());
-  app.use(errorHandler());
-
-  return app;
-}
diff --git a/plugins/auth-backend/src/service/standaloneServer.ts b/plugins/auth-backend/src/service/standaloneServer.ts
index c03fe44b40..d2372a7e91 100644
--- a/plugins/auth-backend/src/service/standaloneServer.ts
+++ b/plugins/auth-backend/src/service/standaloneServer.ts
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
+import Knex from 'knex';
 import { Server } from 'http';
 import { Logger } from 'winston';
-import { createStandaloneApplication } from './standaloneApplication';
 import { ConfigReader } from '@backstage/config';
 import { loadConfig } from '@backstage/config-loader';
+import { createRouter } from './router';
+import { createServiceBuilder, useHotMemoize } from '@backstage/backend-common';
 
 export interface ServerOptions {
-  port: number;
-  enableCors: boolean;
   logger: Logger;
 }
 
@@ -32,23 +32,31 @@ export async function startStandaloneServer(
   const logger = options.logger.child({ service: 'auth-backend' });
   const config = ConfigReader.fromConfigs(await loadConfig());
 
-  logger.debug('Creating application...');
-  const app = await createStandaloneApplication({
-    enableCors: options.enableCors,
-    logger,
-    config,
+  const database = useHotMemoize(module, () => {
+    const knex = Knex({
+      client: 'sqlite3',
+      connection: ':memory:',
+      useNullAsDefault: true,
+    });
+    knex.client.pool.on('createSuccess', (_eventId: any, resource: any) => {
+      resource.run('PRAGMA foreign_keys = ON', () => {});
+    });
+    return knex;
   });
 
   logger.debug('Starting application server...');
-  return await new Promise((resolve, reject) => {
-    const server = app.listen(options.port, (err?: Error) => {
-      if (err) {
-        reject(err);
-        return;
-      }
+  const router = await createRouter({
+    logger,
+    config,
+    database,
+  });
 
-      logger.info(`Listening on port ${options.port}`);
-      resolve(server);
-    });
+  const service = createServiceBuilder(module)
+    .enableCors({ origin: 'http://localhost:3000', credentials: true })
+    .addRouter('/auth', router);
+
+  return await service.start().catch(err => {
+    logger.error(err);
+    process.exit(1);
   });
 }
diff --git a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx
index 5ccac8f772..b4d90c249a 100644
--- a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx
+++ b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import { useApi } from '@backstage/core';
 import { catalogApiRef } from '../../api/types';
 import { useAsync } from 'react-use';
 import { CircularProgress, useTheme } from '@material-ui/core';
 
-export const AllServicesCount: React.FC<{}> = () => {
+export const AllServicesCount: FC<{}> = () => {
   const theme = useTheme();
   const catalogApi = useApi(catalogApiRef);
   const { value, loading } = useAsync(() => catalogApi.getEntities());
@@ -29,5 +29,5 @@ export const AllServicesCount: React.FC<{}> = () => {
     return <CircularProgress size={theme.spacing(2)} />;
   }
 
-  return <span>{value?.length ?? '-'}</span>;
+  return <span>{value ?? length ?? '-'}</span>;
 };
diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx
index b78450d549..cc4cc62fdb 100644
--- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx
+++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx
@@ -18,16 +18,57 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { CatalogFilter, CatalogFilterGroup } from './CatalogFilter';
-import { EntityFilterType } from '../../data/filters';
+import { EntityGroup } from '../../data/filters';
 
 describe('Catalog Filter', () => {
+  const comp1 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'my-component-1',
+    },
+    spec: {
+      owner: 'team',
+    },
+  };
+  const comp2 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'my-component-2',
+    },
+    spec: {
+      owner: 'team',
+    },
+  };
+  const comp3 = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      name: 'my-component-3',
+    },
+    spec: {
+      owner: '',
+    },
+  };
+  const defaultFilterProps = {
+    selectedFilter: EntityGroup.ALL,
+    onFilterChange: (type: EntityGroup) => type,
+    entitiesByFilter: {
+      [EntityGroup.ALL]: [comp1, comp2, comp3],
+      [EntityGroup.STARRED]: [comp1],
+      [EntityGroup.OWNED]: [comp1],
+    },
+  };
   it('should render the different groups', async () => {
     const mockGroups: CatalogFilterGroup[] = [
       { name: 'Test Group 1', items: [] },
       { name: 'Test Group 2', items: [] },
     ];
     const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
     for (const group of mockGroups) {
@@ -41,11 +82,11 @@ describe('Catalog Filter', () => {
         name: 'Test Group 1',
         items: [
           {
-            id: EntityFilterType.ALL,
+            id: EntityGroup.ALL,
             label: 'First Label',
           },
           {
-            id: EntityFilterType.STARRED,
+            id: EntityGroup.STARRED,
             label: 'Second Label',
           },
         ],
@@ -53,7 +94,9 @@ describe('Catalog Filter', () => {
     ];
 
     const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
     const [group] = mockGroups;
@@ -68,26 +111,31 @@ describe('Catalog Filter', () => {
         name: 'Test Group 1',
         items: [
           {
-            id: EntityFilterType.ALL,
+            id: EntityGroup.ALL,
             label: 'First Label',
-            count: 100,
+            count: 3,
           },
           {
-            id: EntityFilterType.STARRED,
+            id: EntityGroup.STARRED,
             label: 'Second Label',
-            count: 400,
+            count: 1,
           },
         ],
       },
     ];
 
-    const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+    const { getAllByText } = render(
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
-    const [group] = mockGroups;
-    for (const item of group.items) {
-      expect(await findByText(item.count!.toString())).toBeInTheDocument();
+    for (const key of Object.keys(defaultFilterProps.entitiesByFilter)) {
+      const matcher = new RegExp(
+        `(${defaultFilterProps.entitiesByFilter[key as EntityGroup].length})`,
+      );
+      const items = await getAllByText(matcher);
+      items.forEach(el => expect(el).toBeInTheDocument());
     }
   });
 
@@ -97,12 +145,12 @@ describe('Catalog Filter', () => {
         name: 'Test Group 1',
         items: [
           {
-            id: EntityFilterType.ALL,
+            id: EntityGroup.ALL,
             label: 'First Label',
             count: 100,
           },
           {
-            id: EntityFilterType.STARRED,
+            id: EntityGroup.STARRED,
             label: 'Second Label',
             count: 400,
           },
@@ -115,8 +163,9 @@ describe('Catalog Filter', () => {
     const { findByText } = render(
       wrapInTestApp(
         <CatalogFilter
+          {...defaultFilterProps}
           groups={mockGroups}
-          onSelectedChange={onSelectedChangeHandler}
+          onFilterChange={onSelectedChangeHandler}
         />,
       ),
     );
@@ -127,7 +176,7 @@ describe('Catalog Filter', () => {
 
     fireEvent.click(element);
 
-    expect(onSelectedChangeHandler).toHaveBeenCalledWith(item);
+    expect(onSelectedChangeHandler).toHaveBeenCalledWith(item.id);
   });
 
   it('should render a component when a function is passed to the count component', async () => {
@@ -136,12 +185,12 @@ describe('Catalog Filter', () => {
         name: 'Test Group 1',
         items: [
           {
-            id: EntityFilterType.ALL,
+            id: EntityGroup.ALL,
             label: 'First Label',
             count: () => <b>BACKSTAGE!</b>,
           },
           {
-            id: EntityFilterType.STARRED,
+            id: EntityGroup.STARRED,
             label: 'Second Label',
             count: 400,
           },
@@ -149,9 +198,11 @@ describe('Catalog Filter', () => {
       },
     ];
     const { findByText } = render(
-      wrapInTestApp(<CatalogFilter groups={mockGroups} />),
+      wrapInTestApp(
+        <CatalogFilter {...defaultFilterProps} groups={mockGroups} />,
+      ),
     );
 
-    expect(await findByText('BACKSTAGE!')).toBeInTheDocument();
+    expect(await findByText('Test Group 1')).toBeInTheDocument();
   });
 });
diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx
index 5335b33ffa..61a83fccd8 100644
--- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx
+++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import {
   Card,
   List,
@@ -26,12 +26,14 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import type { IconComponent } from '@backstage/core';
-import { EntityFilterType } from '../../data/filters';
+import { EntityGroup } from '../../data/filters';
+import { EntitiesByFilter } from '../../hooks/useEntities';
+
 export type CatalogFilterItem = {
-  id: EntityFilterType;
+  id: EntityGroup;
   label: string;
   icon?: IconComponent;
-  count?: number | React.FC;
+  count?: number | FC;
 };
 
 export type CatalogFilterGroup = {
@@ -39,12 +41,6 @@ export type CatalogFilterGroup = {
   items: CatalogFilterItem[];
 };
 
-export type CatalogFilterProps = {
-  groups: CatalogFilterGroup[];
-  selectedId?: string;
-  onSelectedChange?: (item: CatalogFilterItem) => void;
-};
-
 const useStyles = makeStyles<Theme>(theme => ({
   root: {
     backgroundColor: 'rgba(0, 0, 0, .11)',
@@ -71,10 +67,16 @@ const useStyles = makeStyles<Theme>(theme => ({
   },
 }));
 
-export const CatalogFilter: React.FC<CatalogFilterProps> = ({
+export const CatalogFilter: FC<{
+  selectedFilter: EntityGroup;
+  onFilterChange: (type: EntityGroup) => void;
+  entitiesByFilter: EntitiesByFilter;
+  groups: CatalogFilterGroup[];
+}> = ({
+  selectedFilter: selectedId,
+  onFilterChange: setSelectedFilter,
+  entitiesByFilter,
   groups,
-  selectedId,
-  onSelectedChange,
 }) => {
   const classes = useStyles();
   return (
@@ -91,7 +93,9 @@ export const CatalogFilter: React.FC<CatalogFilterProps> = ({
                   key={item.id}
                   button
                   divider
-                  onClick={() => onSelectedChange?.(item)}
+                  onClick={() => {
+                    setSelectedFilter(item.id);
+                  }}
                   selected={item.id === selectedId}
                   className={classes.menuItem}
                 >
@@ -105,11 +109,7 @@ export const CatalogFilter: React.FC<CatalogFilterProps> = ({
                       {item.label}
                     </Typography>
                   </ListItemText>
-                  {typeof item.count === 'function' ? (
-                    <item.count />
-                  ) : (
-                    item.count
-                  )}
+                  {entitiesByFilter[item.id]?.length ?? '-'}
                 </MenuItem>
               ))}
             </List>
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
index 9eccf81818..65715e04c7 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
@@ -15,23 +15,25 @@
  */
 
 import React, { FC } from 'react';
-import { Header, HomepageTimer, Page, pageTheme } from '@backstage/core';
+import {
+  Header,
+  HomepageTimer,
+  Page,
+  pageTheme,
+  identityApiRef,
+  useApi,
+} from '@backstage/core';
 import { getTimeBasedGreeting } from './utils/timeUtil';
 
 const CatalogLayout: FC<{}> = props => {
   const { children } = props;
-  // const profile = useProfile();
-  const profile = { givenName: 'friend' };
   const greeting = getTimeBasedGreeting();
+  const identityApi = useApi(identityApiRef);
 
   return (
     <Page theme={pageTheme.home}>
       <Header
-        title={
-          profile
-            ? `${greeting.greeting}, ${profile.givenName}!`
-            : greeting.greeting
-        }
+        title={`${greeting.greeting}, ${identityApi.getUserId()}!`}
         subtitle="Backstage Service Catalog"
         tooltip={greeting.language}
         pageTitleOverride="Home"
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
index 2e1989323c..7ba1c39bb7 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
@@ -20,9 +20,11 @@ import {
   errorApiRef,
   storageApiRef,
   WebStorage,
+  IdentityApi,
+  identityApiRef,
 } from '@backstage/core';
 import { MockErrorApi, wrapInTestApp } from '@backstage/test-utils';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { catalogApiRef } from '../..';
 import { CatalogApi } from '../../api/types';
@@ -40,31 +42,69 @@ describe('CatalogPage', () => {
           },
           apiVersion: 'backstage.io/v1alpha1',
           kind: 'Component',
+          spec: {
+            owner: 'tools@example.com',
+            type: 'service',
+          },
+        },
+        {
+          metadata: {
+            name: 'Entity2',
+          },
+          apiVersion: 'backstage.io/v1alpha1',
+          kind: 'Component',
+          spec: {
+            owner: 'not-tools@example.com',
+            type: 'service',
+          },
         },
       ] as Entity[]),
     getLocationByEntity: () =>
       Promise.resolve({ id: 'id', type: 'github', target: 'url' }),
   };
+  const mockIndentityApi: Partial<IdentityApi> = {
+    getUserId: () => 'tools@example.com',
+  };
 
   // this test right now causes some red lines in the log output when running tests
   // related to some theme issues in mui-table
   // https://github.com/mbrn/material-table/issues/1293
   it('should render', async () => {
-    const rendered = render(
+    const { findByText } = render(
       wrapInTestApp(
         <ApiProvider
           apis={ApiRegistry.from([
             [errorApiRef, mockErrorApi],
             [catalogApiRef, catalogApi],
             [storageApiRef, new WebStorage('@mock', mockErrorApi)],
+            [identityApiRef, mockIndentityApi],
           ])}
         >
           <CatalogPage />
         </ApiProvider>,
       ),
     );
-    expect(
-      await rendered.findByText('Backstage Service Catalog'),
-    ).toBeInTheDocument();
+
+    const items = await findByText(/All Services \(2\)/);
+    expect(items).toBeInTheDocument();
+  });
+  it('should filter by owner', async () => {
+    const { findByText, getByText } = render(
+      wrapInTestApp(
+        <ApiProvider
+          apis={ApiRegistry.from([
+            [errorApiRef, mockErrorApi],
+            [catalogApiRef, catalogApi],
+            [storageApiRef, new WebStorage('@mock', mockErrorApi)],
+            [identityApiRef, mockIndentityApi],
+          ])}
+        >
+          <CatalogPage />
+        </ApiProvider>,
+      ),
+    );
+    fireEvent.click(getByText(/Owned/));
+    const items = await findByText(/Owned \(1\)/);
+    expect(items).toBeInTheDocument();
   });
 });
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 8c9313ca66..ef77cf573f 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -21,7 +21,6 @@ import {
   DismissableBanner,
   HeaderTabs,
   SupportButton,
-  useApi,
 } from '@backstage/core';
 import CatalogLayout from './CatalogLayout';
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
@@ -36,47 +35,18 @@ import Edit from '@material-ui/icons/Edit';
 import GitHub from '@material-ui/icons/GitHub';
 import Star from '@material-ui/icons/Star';
 import StarOutline from '@material-ui/icons/StarBorder';
-import React, { FC, useCallback, useState, useMemo } from 'react';
+import React, { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { catalogApiRef } from '../..';
-import {
-  defaultFilter,
-  entityFilters,
-  filterGroups,
-  EntityFilterType,
-} from '../../data/filters';
-import { findLocationForEntityMeta } from '../../data/utils';
-import { useStarredEntities } from '../../hooks/useStarredEntites';
-import {
-  CatalogFilter,
-  CatalogFilterItem,
-} from '../CatalogFilter/CatalogFilter';
+import { CatalogFilter } from '../CatalogFilter/CatalogFilter';
 import { CatalogTable } from '../CatalogTable/CatalogTable';
-import useStaleWhileRevalidate from 'swr';
-
-// TODO: replace me with the proper tabs implemntation
-const tabs = [
-  {
-    id: 'service',
-    label: 'Services',
-  },
-  {
-    id: 'website',
-    label: 'Websites',
-  },
-  {
-    id: 'lib',
-    label: 'Libraries',
-  },
-  {
-    id: 'documentation',
-    label: 'Documentation',
-  },
-  {
-    id: 'other',
-    label: 'Other',
-  },
-];
+import { useEntities } from '../../hooks/useEntities';
+import { findLocationForEntityMeta } from '../../data/utils';
+import {
+  getCatalogFilterItemByType,
+  EntityGroup,
+  filterGroups,
+  labeledEntityTypes,
+} from '../../data/filters';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
@@ -92,30 +62,18 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export const CatalogPage: FC<{}> = () => {
-  const catalogApi = useApi(catalogApiRef);
-  const [selectedTab, setSelectedTab] = useState<string>(tabs[0].id);
-  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
-  const [selectedFilter, setSelectedFilter] = useState<CatalogFilterItem>(
-    defaultFilter,
-  );
+  const {
+    entitiesByFilter,
+    error,
+    loading,
+    selectedFilter,
+    setSelectedFilter,
+    toggleStarredEntity,
+    isStarredEntity,
+    selectTypeFilter,
+  } = useEntities();
 
-  const { data: entities, error } = useStaleWhileRevalidate(
-    ['catalog/all', entityFilters[selectedFilter.id]],
-    async () => catalogApi.getEntities(),
-  );
-
-  const onFilterSelected = useCallback(
-    selected => setSelectedFilter(selected),
-    [],
-  );
-
-  const filteredEntities = useMemo(() => {
-    const typeFilter = entityFilters[EntityFilterType.TYPE];
-    const leftMenuFilter = entityFilters[selectedFilter.id];
-    return entities
-      ?.filter(e => leftMenuFilter(e, { isStarred: isStarredEntity(e) }))
-      .filter(e => typeFilter(e, { type: selectedTab }));
-  }, [selectedFilter.id, selectedTab, isStarredEntity, entities?.filter]);
+  const filteredEntities = entitiesByFilter[selectedFilter ?? EntityGroup.ALL];
 
   const styles = useStyles();
 
@@ -174,9 +132,9 @@ export const CatalogPage: FC<{}> = () => {
   return (
     <CatalogLayout>
       <HeaderTabs
-        tabs={tabs}
-        onChange={index => {
-          setSelectedTab(tabs[index as number].id);
+        tabs={labeledEntityTypes}
+        onChange={(index: Number) => {
+          selectTypeFilter(labeledEntityTypes[index as number].id);
         }}
       />
       <Content>
@@ -212,14 +170,18 @@ export const CatalogPage: FC<{}> = () => {
           <div>
             <CatalogFilter
               groups={filterGroups}
-              selectedId={selectedFilter.id}
-              onSelectedChange={onFilterSelected}
+              selectedFilter={selectedFilter ?? EntityGroup.ALL}
+              onFilterChange={setSelectedFilter}
+              entitiesByFilter={entitiesByFilter}
             />
           </div>
           <CatalogTable
-            titlePreamble={selectedFilter.label}
+            titlePreamble={
+              getCatalogFilterItemByType(selectedFilter ?? EntityGroup.ALL)
+                ?.label ?? ''
+            }
             entities={filteredEntities || []}
-            loading={!entities && !error}
+            loading={loading && !error}
             error={error}
             actions={actions}
           />
diff --git a/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx b/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx
index d7a3bc81f6..57082a9c91 100644
--- a/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx
+++ b/plugins/catalog/src/components/EntityMetadataCard/EntityMetadataCard.tsx
@@ -23,7 +23,7 @@ type Props = {
 };
 
 export const EntityMetadataCard: FC<Props> = ({ entity }) => (
-  <InfoCard title="Metadata">
+  <InfoCard title="Information">
     <StructuredMetadataTable metadata={entity.metadata} />
   </InfoCard>
 );
diff --git a/plugins/catalog/src/components/EntityPage/EntityPage.tsx b/plugins/catalog/src/components/EntityPage/EntityPage.tsx
index e74276697b..d9953498ec 100644
--- a/plugins/catalog/src/components/EntityPage/EntityPage.tsx
+++ b/plugins/catalog/src/components/EntityPage/EntityPage.tsx
@@ -149,11 +149,11 @@ export const EntityPage: FC<{}> = () => {
           <HeaderTabs tabs={tabs} />
 
           <Content>
-            <Grid container spacing={3} direction="column">
-              <Grid item>
+            <Grid container spacing={3}>
+              <Grid item sm={4}>
                 <EntityMetadataCard entity={entity} />
               </Grid>
-              <Grid item>
+              <Grid item sm={8}>
                 <SentryIssuesWidget
                   sentryProjectId="sample-sentry-project-id"
                   statsFor="24h"
diff --git a/plugins/catalog/src/data/filters.ts b/plugins/catalog/src/data/filters.ts
index bbe959caa3..c13f1a2d9c 100644
--- a/plugins/catalog/src/data/filters.ts
+++ b/plugins/catalog/src/data/filters.ts
@@ -17,18 +17,15 @@
 import { Entity } from '@backstage/catalog-model';
 import SettingsIcon from '@material-ui/icons/Settings';
 import StarIcon from '@material-ui/icons/Star';
-import { AllServicesCount } from '../components/CatalogFilter/AllServicesCount';
 import {
   CatalogFilterGroup,
   CatalogFilterItem,
 } from '../components/CatalogFilter/CatalogFilter';
-import { StarredCount } from '../components/CatalogFilter/StarredCount';
 
-export enum EntityFilterType {
+export enum EntityGroup {
   ALL = 'ALL',
   STARRED = 'STARRED',
   OWNED = 'OWNED',
-  TYPE = 'TYPE',
 }
 
 export const filterGroups: CatalogFilterGroup[] = [
@@ -36,15 +33,13 @@ export const filterGroups: CatalogFilterGroup[] = [
     name: 'Personal',
     items: [
       {
-        id: EntityFilterType.OWNED,
+        id: EntityGroup.OWNED,
         label: 'Owned',
-        count: 0,
         icon: SettingsIcon,
       },
       {
-        id: EntityFilterType.STARRED,
+        id: EntityGroup.STARRED,
         label: 'Starred',
-        count: StarredCount,
         icon: StarIcon,
       },
     ],
@@ -54,26 +49,75 @@ export const filterGroups: CatalogFilterGroup[] = [
     name: 'Company',
     items: [
       {
-        id: EntityFilterType.ALL,
-        label: 'All Entities',
-        count: AllServicesCount,
+        id: EntityGroup.ALL,
+        label: 'All Services',
       },
     ],
   },
 ];
 
+export const getCatalogFilterItemByType = (filterType: EntityGroup) => {
+  for (const group of filterGroups) {
+    for (const filter of group.items) {
+      if (filter.id === filterType) {
+        return filter;
+      }
+    }
+  }
+  return null;
+};
+
 type EntityFilter = (entity: Entity, options: EntityFilterOptions) => boolean;
 
-type EntityFilterOptions = {
-  isStarred?: boolean;
-  type?: string;
+type EntityFilterOptions = Partial<{
+  isStarred: boolean;
+  userId: string;
+}>;
+
+type Owned = {
+  owner: string;
 };
 
 export const entityFilters: Record<string, EntityFilter> = {
-  [EntityFilterType.OWNED]: () => false,
-  [EntityFilterType.ALL]: () => true,
-  [EntityFilterType.STARRED]: (_, { isStarred }) => !!isStarred,
-  [EntityFilterType.TYPE]: (e, { type }) => (e.spec as any)?.type === type,
+  [EntityGroup.OWNED]: (e, { userId }) => {
+    const owner = (e.spec! as Owned).owner;
+    return owner === userId;
+  },
+  [EntityGroup.ALL]: () => true,
+  [EntityGroup.STARRED]: (_, { isStarred }) => !!isStarred,
 };
 
+export const entityTypeFilter = (e: Entity, type: string) =>
+  (e.spec as any)?.type === type;
+
+type EntityType = 'service' | 'website' | 'lib' | 'documentation' | 'other';
+
+type LabeledEntityType = {
+  id: EntityType;
+  label: string;
+};
+
+export const labeledEntityTypes: LabeledEntityType[] = [
+  {
+    id: 'service',
+    label: 'Services',
+  },
+  {
+    id: 'website',
+    label: 'Websites',
+  },
+  {
+    id: 'lib',
+    label: 'Libraries',
+  },
+  {
+    id: 'documentation',
+    label: 'Documentation',
+  },
+  {
+    id: 'other',
+    label: 'Other',
+  },
+];
+
 export const defaultFilter: CatalogFilterItem = filterGroups[0].items[0];
diff --git a/plugins/catalog/src/hooks/useEntities.ts b/plugins/catalog/src/hooks/useEntities.ts
new file mode 100644
index 0000000000..6509bd9b4b
--- /dev/null
+++ b/plugins/catalog/src/hooks/useEntities.ts
@@ -0,0 +1,103 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState, useMemo } from 'react';
+import {
+  EntityGroup,
+  entityFilters,
+  entityTypeFilter,
+  labeledEntityTypes,
+} from '../data/filters';
+import { useApi, identityApiRef } from '@backstage/core';
+import { catalogApiRef } from '..';
+import { useStarredEntities } from './useStarredEntites';
+import { Entity } from '@backstage/catalog-model';
+import useStaleWhileRevalidate from 'swr';
+
+export type EntitiesByFilter = Record<EntityGroup, Entity[] | undefined>;
+
+type UseEntities = {
+  selectedFilter: EntityGroup | undefined;
+  setSelectedFilter: (f: EntityGroup) => void;
+  error: Error | null;
+  toggleStarredEntity: any;
+  isStarredEntity: (e: Entity) => boolean;
+  entitiesByFilter: EntitiesByFilter;
+  loading: boolean;
+  selectedTypeFilter: string;
+  selectTypeFilter: (id: string) => void;
+};
+
+export const useEntities = (): UseEntities => {
+  const [selectedFilter, setSelectedFilter] = useState<
+    EntityGroup | undefined
+  >();
+  const catalogApi = useApi(catalogApiRef);
+  const { toggleStarredEntity, isStarredEntity } = useStarredEntities();
+  const { data: entities, error } = useStaleWhileRevalidate(
+    ['catalog/all', entityFilters[selectedFilter ?? EntityGroup.ALL]],
+    async () => catalogApi.getEntities(),
+  );
+
+  const indentityApi = useApi(identityApiRef);
+  const userId = indentityApi.getUserId();
+
+  const [selectedTypeFilter, selectTypeFilter] = useState<string>(
+    labeledEntityTypes[0].id,
+  );
+
+  const entitiesByFilter = useMemo(() => {
+    const filterEntities = (
+      ents: Entity[] | undefined,
+      filterId: EntityGroup,
+      isStarred: (e: Entity) => boolean,
+      user: string,
+    ) => {
+      return ents
+        ?.filter((e: Entity) =>
+          entityFilters[filterId](e, {
+            isStarred: isStarred(e),
+            userId: user,
+          }),
+        )
+        .filter(e => entityTypeFilter(e, selectedTypeFilter));
+    };
+    const data = Object.keys(EntityGroup).reduce(
+      (res, key) => ({
+        ...res,
+        [key]: filterEntities(
+          entities,
+          key as EntityGroup,
+          isStarredEntity,
+          userId,
+        ),
+      }),
+      {} as EntitiesByFilter,
+    );
+    return data;
+  }, [entities, isStarredEntity, userId, selectedTypeFilter]);
+
+  return {
+    selectedFilter,
+    setSelectedFilter,
+    error,
+    toggleStarredEntity,
+    isStarredEntity,
+    entitiesByFilter,
+    loading: entities === undefined,
+    selectedTypeFilter,
+    selectTypeFilter,
+  };
+};
diff --git a/plugins/circleci/src/components/App.tsx b/plugins/circleci/src/components/App.tsx
index 5907146340..a3f7112132 100644
--- a/plugins/circleci/src/components/App.tsx
+++ b/plugins/circleci/src/components/App.tsx
@@ -25,11 +25,8 @@ export const App = () => {
     <AppStateProvider>
       <>
         <Routes>
-          <Route path="/circleci" element={<BuildsPage />} />
-          <Route
-            path="/circleci/build/:buildId"
-            element={<DetailedViewPage />}
-          />
+          <Route path="*" element={<BuildsPage />} />
+          <Route path="/build/:buildId" element={<DetailedViewPage />} />
         </Routes>
         <Settings />
       </>
diff --git a/plugins/circleci/src/components/Settings/Settings.tsx b/plugins/circleci/src/components/Settings/Settings.tsx
index 8897c1eb40..b3b62ce930 100644
--- a/plugins/circleci/src/components/Settings/Settings.tsx
+++ b/plugins/circleci/src/components/Settings/Settings.tsx
@@ -44,13 +44,13 @@ const Settings = () => {
 
   useEffect(() => {
     if (tokenFromStore !== token) {
-      setToken(tokenFromStore);
+      setToken(token);
     }
     if (ownerFromStore !== owner) {
-      setOwner(ownerFromStore);
+      setOwner(owner);
     }
     if (repoFromStore !== repo) {
-      setRepo(repoFromStore);
+      setRepo(repo);
     }
   }, [ownerFromStore, repoFromStore, tokenFromStore, token, owner, repo]);
 
diff --git a/plugins/graphiql/package.json b/plugins/graphiql/package.json
index 9d4a797c82..b81ed03b09 100644
--- a/plugins/graphiql/package.json
+++ b/plugins/graphiql/package.json
@@ -37,7 +37,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
     "graphiql": "^1.0.0-alpha.10",
-    "graphql": "15.0.0",
+    "graphql": "15.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-use": "^14.2.0"
diff --git a/plugins/techdocs/.eslintrc.js b/plugins/techdocs/.eslintrc.js
new file mode 100644
index 0000000000..13573efa9c
--- /dev/null
+++ b/plugins/techdocs/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};
diff --git a/plugins/techdocs/README.md b/plugins/techdocs/README.md
new file mode 100644
index 0000000000..f25ffda3b2
--- /dev/null
+++ b/plugins/techdocs/README.md
@@ -0,0 +1,13 @@
+# TechDocs Plugin
+
+Welcome to the TechDocs plugin - Spotify's docs-like-code approach built directly into [Backstage](https://backstage.io). Watch [a video of our approach on YouTube](https://www.youtube.com/watch?v=uFGCaZmA6d4) to learn more.
+
+**WIP: This plugin is a work in progress. It is not ready for use yet. Follow our progress on [the Backstage Discord](https://discord.gg/MUpMjP2) under #docs-like-code or on [our GitHub Milestone](https://github.com/spotify/backstage/milestone/15).**
+
+## Getting started
+
+Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/techdocs](http://localhost:3000/techdocs).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](/dev) directory.
diff --git a/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx b/plugins/techdocs/dev/index.tsx
similarity index 70%
rename from plugins/catalog/src/components/CatalogFilter/StarredCount.tsx
rename to plugins/techdocs/dev/index.tsx
index 5e79682783..812a5585d4 100644
--- a/plugins/catalog/src/components/CatalogFilter/StarredCount.tsx
+++ b/plugins/techdocs/dev/index.tsx
@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { useStarredEntities } from '../../hooks/useStarredEntites';
+import { createDevApp } from '@backstage/dev-utils';
+import { plugin } from '../src/plugin';
 
-export const StarredCount: React.FC<{}> = () => {
-  const { starredEntities } = useStarredEntities();
-  return <span>{starredEntities.size}</span>;
-};
+createDevApp().registerPlugin(plugin).render();
diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json
new file mode 100644
index 0000000000..58588e562d
--- /dev/null
+++ b/plugins/techdocs/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@backstage/plugin-techdocs",
+  "version": "0.1.1-alpha.9",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "start": "backstage-cli plugin:serve",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "diff": "backstage-cli plugin:diff",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/core": "^0.1.1-alpha.9",
+    "@backstage/theme": "^0.1.1-alpha.9",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-use": "^14.2.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.1.1-alpha.9",
+    "@backstage/dev-utils": "^0.1.1-alpha.9",
+    "@testing-library/jest-dom": "^5.7.0",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^10.2.4",
+    "@types/jest": "^25.2.2",
+    "@types/node": "^12.0.0",
+    "@types/testing-library__jest-dom": "^5.0.4",
+    "jest-fetch-mock": "^3.0.3"
+  },
+  "files": [
+    "dist/**/*.{js,d.ts}"
+  ]
+}
diff --git a/plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx b/plugins/techdocs/src/components/ExampleComponent/ExampleComponent.test.tsx
similarity index 53%
rename from plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx
rename to plugins/techdocs/src/components/ExampleComponent/ExampleComponent.test.tsx
index 546d00e854..e4d760526e 100644
--- a/plugins/catalog/src/components/CatalogFilter/StarredCount.test.tsx
+++ b/plugins/techdocs/src/components/ExampleComponent/ExampleComponent.test.tsx
@@ -16,20 +16,19 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { wrapInTestApp } from '@backstage/test-utils';
-import { StarredCount } from './StarredCount';
-import * as Hooks from '../../hooks/useStarredEntites';
+import mockFetch from 'jest-fetch-mock';
+import ExampleComponent from './ExampleComponent';
+import { ThemeProvider } from '@material-ui/core';
+import { lightTheme } from '@backstage/theme';
 
-describe('Starred Count', () => {
-  it('should render the count returned from the hook', async () => {
-    jest.spyOn(Hooks, 'useStarredEntities').mockReturnValue({
-      starredEntities: new Set(['id1', 'id2', 'id3', 'id4']),
-      isStarredEntity: () => false,
-      toggleStarredEntity: () => undefined,
-    });
-
-    const { findByText } = render(wrapInTestApp(<StarredCount />));
-
-    expect(await findByText('4')).toBeInTheDocument();
+describe('ExampleComponent', () => {
+  it('should render', () => {
+    mockFetch.mockResponse(() => new Promise(() => {}));
+    const rendered = render(
+      <ThemeProvider theme={lightTheme}>
+        <ExampleComponent />
+      </ThemeProvider>,
+    );
+    expect(rendered.getByText('Welcome to techdocs!')).toBeInTheDocument();
   });
 });
diff --git a/plugins/techdocs/src/components/ExampleComponent/ExampleComponent.tsx b/plugins/techdocs/src/components/ExampleComponent/ExampleComponent.tsx
new file mode 100644
index 0000000000..2ab29604ee
--- /dev/null
+++ b/plugins/techdocs/src/components/ExampleComponent/ExampleComponent.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { Typography, Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  pageTheme,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  SupportButton,
+} from '@backstage/core';
+import ExampleFetchComponent from '../ExampleFetchComponent';
+
+const ExampleComponent: FC<{}> = () => (
+  <Page theme={pageTheme.tool}>
+    <Header title="Welcome to techdocs!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <ContentHeader title="Plugin title">
+        <SupportButton>A description of your plugin goes here.</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Information card">
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
+        </Grid>
+        <Grid item>
+          <ExampleFetchComponent />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);
+
+export default ExampleComponent;
diff --git a/plugins/techdocs/src/components/ExampleComponent/index.ts b/plugins/techdocs/src/components/ExampleComponent/index.ts
new file mode 100644
index 0000000000..e785d45082
--- /dev/null
+++ b/plugins/techdocs/src/components/ExampleComponent/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './ExampleComponent';
diff --git a/plugins/techdocs/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx b/plugins/techdocs/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
new file mode 100644
index 0000000000..7fecdc6f11
--- /dev/null
+++ b/plugins/techdocs/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import mockFetch from 'jest-fetch-mock';
+import ExampleFetchComponent from './ExampleFetchComponent';
+
+describe('ExampleFetchComponent', () => {
+  it('should render', async () => {
+    mockFetch.mockResponse(() => new Promise(() => {}));
+    const rendered = render(<ExampleFetchComponent />);
+    expect(await rendered.findByTestId('progress')).toBeInTheDocument();
+  });
+});
diff --git a/plugins/techdocs/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx b/plugins/techdocs/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx
new file mode 100644
index 0000000000..c2139befec
--- /dev/null
+++ b/plugins/techdocs/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Table, TableColumn, Progress } from '@backstage/core';
+import Alert from '@material-ui/lab/Alert';
+import { useAsync } from 'react-use';
+
+const useStyles = makeStyles({
+  avatar: {
+    height: 32,
+    width: 32,
+    borderRadius: '50%',
+  },
+});
+
+type User = {
+  gender: string; // "male"
+  name: {
+    title: string; // "Mr",
+    first: string; // "Duane",
+    last: string; // "Reed"
+  };
+  location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…}
+  email: string; // "duane.reed@example.com"
+  login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…}
+  dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37}
+  registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14}
+  phone: string; // "07-2154-5651"
+  cell: string; // "0405-592-879"
+  id: {
+    name: string; // "TFN",
+    value: string; // "796260432"
+  };
+  picture: { medium: string }; // {medium: "https://randomuser.me/api/portraits/men/95.jpg",…}
+  nat: string; // "AU"
+};
+
+type DenseTableProps = {
+  users: User[];
+};
+
+export const DenseTable: FC<DenseTableProps> = ({ users }) => {
+  const classes = useStyles();
+
+  const columns: TableColumn[] = [
+    { title: 'Avatar', field: 'avatar' },
+    { title: 'Name', field: 'name' },
+    { title: 'Email', field: 'email' },
+    { title: 'Nationality', field: 'nationality' },
+  ];
+
+  const data = users.map(user => {
+    return {
+      avatar: (
+        <img
+          src={user.picture.medium}
+          className={classes.avatar}
+          alt={user.name.first}
+        />
+      ),
+      name: `${user.name.first} ${user.name.last}`,
+      email: user.email,
+      nationality: user.nat,
+    };
+  });
+
+  return (
+    <Table
+      title="Example User List (fetching data from randomuser.me)"
+      options={{ search: false, paging: false }}
+      columns={columns}
+      data={data}
+    />
+  );
+};
+
+const ExampleFetchComponent: FC<{}> = () => {
+  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
+    const response = await fetch('https://randomuser.me/api/?results=20');
+    const data = await response.json();
+    return data.results;
+  }, []);
+
+  if (loading) {
+    return <Progress />;
+  } else if (error) {
+    return <Alert severity="error">{error.message}</Alert>;
+  }
+
+  return <DenseTable users={value || []} />;
+};
+
+export default ExampleFetchComponent;
diff --git a/plugins/techdocs/src/components/ExampleFetchComponent/index.ts b/plugins/techdocs/src/components/ExampleFetchComponent/index.ts
new file mode 100644
index 0000000000..28482f9fe1
--- /dev/null
+++ b/plugins/techdocs/src/components/ExampleFetchComponent/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default } from './ExampleFetchComponent';
diff --git a/plugins/techdocs/src/index.ts b/plugins/techdocs/src/index.ts
new file mode 100644
index 0000000000..3a0a0fe2d3
--- /dev/null
+++ b/plugins/techdocs/src/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { plugin } from './plugin';
diff --git a/plugins/techdocs/src/plugin.test.ts b/plugins/techdocs/src/plugin.test.ts
new file mode 100644
index 0000000000..e750be9ac3
--- /dev/null
+++ b/plugins/techdocs/src/plugin.test.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { plugin } from './plugin';
+
+describe('techdocs', () => {
+  it('should export plugin', () => {
+    expect(plugin).toBeDefined();
+  });
+});
diff --git a/plugins/techdocs/src/plugin.ts b/plugins/techdocs/src/plugin.ts
new file mode 100644
index 0000000000..29f9f8b085
--- /dev/null
+++ b/plugins/techdocs/src/plugin.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createPlugin, createRouteRef } from '@backstage/core';
+import ExampleComponent from './components/ExampleComponent';
+
+export const rootRouteRef = createRouteRef({
+  path: '/techdocs',
+  title: 'techdocs',
+});
+
+export const plugin = createPlugin({
+  id: 'techdocs',
+  register({ router }) {
+    router.addRoute(rootRouteRef, ExampleComponent);
+  },
+});
diff --git a/plugins/techdocs/src/setupTests.ts b/plugins/techdocs/src/setupTests.ts
new file mode 100644
index 0000000000..e34bc46f4b
--- /dev/null
+++ b/plugins/techdocs/src/setupTests.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '@testing-library/jest-dom';
+require('jest-fetch-mock').enableMocks();
diff --git a/yarn.lock b/yarn.lock
index b1b521b438..fd351efe36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1995,10 +1995,10 @@
     inquirer "^6.2.0"
     npmlog "^4.1.2"
 
-"@lerna/publish@3.22.0":
-  version "3.22.0"
-  resolved "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.0.tgz#7a3fb61026d3b7425f3b9a1849421f67d795c55d"
-  integrity sha512-8LBeTLBN8NIrCrLGykRu+PKrfrCC16sGCVY0/bzq9TDioR7g6+cY0ZAw653Qt/0Kr7rg3J7XxVNdzj3fvevlwA==
+"@lerna/publish@3.22.1":
+  version "3.22.1"
+  resolved "https://registry.npmjs.org/@lerna/publish/-/publish-3.22.1.tgz#b4f7ce3fba1e9afb28be4a1f3d88222269ba9519"
+  integrity sha512-PG9CM9HUYDreb1FbJwFg90TCBQooGjj+n/pb3gw/eH5mEDq0p8wKdLFe0qkiqUkm/Ub5C8DbVFertIo0Vd0zcw==
   dependencies:
     "@evocateur/libnpmaccess" "^3.1.2"
     "@evocateur/npm-registry-fetch" "^4.0.0"
@@ -2021,7 +2021,7 @@
     "@lerna/run-lifecycle" "3.16.2"
     "@lerna/run-topologically" "3.18.5"
     "@lerna/validation-error" "3.13.0"
-    "@lerna/version" "3.22.0"
+    "@lerna/version" "3.22.1"
     figgy-pudding "^3.5.1"
     fs-extra "^8.1.0"
     npm-package-arg "^6.1.0"
@@ -2134,10 +2134,10 @@
   dependencies:
     npmlog "^4.1.2"
 
-"@lerna/version@3.22.0":
-  version "3.22.0"
-  resolved "https://registry.npmjs.org/@lerna/version/-/version-3.22.0.tgz#67e1340c1904e9b339becd66429f32dd8ad65a55"
-  integrity sha512-6uhL6RL7/FeW6u1INEgyKjd5dwO8+IsbLfkfC682QuoVLS7VG6OOB+JmTpCvnuyYWI6fqGh1bRk9ww8kPsj+EA==
+"@lerna/version@3.22.1":
+  version "3.22.1"
+  resolved "https://registry.npmjs.org/@lerna/version/-/version-3.22.1.tgz#9805a9247a47ee62d6b81bd9fa5fb728b24b59e2"
+  integrity sha512-PSGt/K1hVqreAFoi3zjD0VEDupQ2WZVlVIwesrE5GbrL2BjXowjCsTDPqblahDUPy0hp6h7E2kG855yLTp62+g==
   dependencies:
     "@lerna/check-working-tree" "3.16.5"
     "@lerna/child-process" "3.16.5"
@@ -2411,6 +2411,11 @@
   resolved "https://registry.npmjs.org/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
+"@panva/asn1.js@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"
+  integrity sha512-UdkG3mLEqXgnlKsWanWcgb6dOjUzJ+XC5f+aWw30qrtjxeNUSfKX1cd5FBzOaXQumoe9nIqeZUvrRJS03HCCtw==
+
 "@reach/router@^1.2.1":
   version "1.3.3"
   resolved "https://registry.npmjs.org/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
@@ -2435,9 +2440,9 @@
     resolve "^1.11.0"
 
 "@rollup/plugin-json@^4.0.2":
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.0.3.tgz#747e2c2884c5a0fa00b66c9c0f3f1012cddca534"
-  integrity sha512-QMUT0HZNf4CX17LMdwaslzlYHUKTYGuuk34yYIgZrNdu+pMEfqMS55gck7HEeHBKXHM4cz5Dg1OVwythDdbbuQ==
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
+  integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==
   dependencies:
     "@rollup/pluginutils" "^3.0.8"
 
@@ -9766,12 +9771,7 @@ graphql-tools@5.0.0:
     tslib "^1.11.1"
     uuid "^7.0.3"
 
-graphql@15.0.0:
-  version "15.0.0"
-  resolved "https://registry.npmjs.org/graphql/-/graphql-15.0.0.tgz#042a5eb5e2506a2e2111ce41eb446a8e570b8be9"
-  integrity sha512-ZyVO1xIF9F+4cxfkdhOJINM+51B06Friuv4M66W7HzUOeFd+vNzUn4vtswYINPi6sysjf1M2Ri/rwZALqgwbaQ==
-
-graphql@^15.0.0:
+graphql@15.1.0, graphql@^15.0.0:
   version "15.1.0"
   resolved "https://registry.npmjs.org/graphql/-/graphql-15.1.0.tgz#b93e28de805294ec08e1630d901db550cb8960a1"
   integrity sha512-0TVyfOlCGhv/DBczQkJmwXOK6fjWkjzY3Pt7wY8i0gcYXq8aogG3weCsg48m72lywKSeOqedEHvVPOvZvSD51Q==
@@ -11697,6 +11697,13 @@ jest@^26.0.1:
     import-local "^3.0.2"
     jest-cli "^26.0.1"
 
+jose@^1.27.1:
+  version "1.27.1"
+  resolved "https://registry.npmjs.org/jose/-/jose-1.27.1.tgz#a1de2ecb5b3ae1ae28f0d9d0cc536349ada27ec8"
+  integrity sha512-VyHM6IJPw0TTGqHVNlPWg16/ASDPAmcChcLqSb3WNBvwWFoWPeFqlmAUCm8/oIG1GjZwAlUDuRKFfycowarcVA==
+  dependencies:
+    "@panva/asn1.js" "^1.0.0"
+
 js-cookie@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
@@ -12090,9 +12097,9 @@ left-pad@^1.3.0:
   integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
 
 lerna@^3.20.2:
-  version "3.22.0"
-  resolved "https://registry.npmjs.org/lerna/-/lerna-3.22.0.tgz#da14d08f183ffe6eec566a4ef3f0e11afa621183"
-  integrity sha512-xWlHdAStcqK/IjKvjsSMHPZjPkBV1lS60PmsIeObU8rLljTepc4Sg/hncw4HWfQxPIewHAUTqhrxPIsqf9L2Eg==
+  version "3.22.1"
+  resolved "https://registry.npmjs.org/lerna/-/lerna-3.22.1.tgz#82027ac3da9c627fd8bf02ccfeff806a98e65b62"
+  integrity sha512-vk1lfVRFm+UuEFA7wkLKeSF7Iz13W+N/vFd48aW2yuS7Kv0RbNm2/qcDPV863056LMfkRlsEe+QYOw3palj5Lg==
   dependencies:
     "@lerna/add" "3.21.0"
     "@lerna/bootstrap" "3.21.0"
@@ -12107,9 +12114,9 @@ lerna@^3.20.2:
     "@lerna/init" "3.21.0"
     "@lerna/link" "3.21.0"
     "@lerna/list" "3.21.0"
-    "@lerna/publish" "3.22.0"
+    "@lerna/publish" "3.22.1"
     "@lerna/run" "3.21.0"
-    "@lerna/version" "3.22.0"
+    "@lerna/version" "3.22.1"
     import-local "^2.0.0"
     npmlog "^4.1.2"
 
@@ -13169,9 +13176,9 @@ ms@^2.0.0, ms@^2.1.1:
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 msw@^0.19.0:
-  version "0.19.3"
-  resolved "https://registry.npmjs.org/msw/-/msw-0.19.3.tgz#88f39edbd37313bff15a0e7cd00c71406cbdbbae"
-  integrity sha512-HYLnyrCDDPP72GG/CeHPhBjHsZFYkz36rJLXDWccZWNA24gYjgrcp9iVqqitk2cI6NAJwsupRml9GkfpJBB74w==
+  version "0.19.4"
+  resolved "https://registry.npmjs.org/msw/-/msw-0.19.4.tgz#059026de0cc3303847c27d3aa0e98705a1033df6"
+  integrity sha512-rNfGgIuO0MyfN2F+FOHRqNd2LJIESaaMOJNNiNMcv/Be7Kdzz/ZmghfS/5zFy2SpHWladccqDYgo74JN+YlEyg==
   dependencies:
     "@open-draft/until" "^1.0.0"
     "@types/cookie" "^0.3.3"