Backstage Mend.io Plugin

Mend.io is an application security platform that helps teams find and fix risks in code, open source, and containers. The Backstage plugin brings these results into your developer portal so engineers see issues where they work. It cuts context switching and keeps security data close to each service. You get a single view of risk across projects inside Backstage.

The plugin shows an integrated projects overview plus a findings view. You can review new vulnerabilities introduced by recent commits, drill into details, and track what matters first. Results link back to your issue tracker so fixes move fast without extra tabs. It is built to surface severity and other key signals to help teams prioritize.

Common use cases include giving service owners a quick snapshot of their security posture, helping platform teams watch trends across many repos, and enabling security to guide work without blocking delivery. It works with popular source providers such as GitHub, GitLab, Bitbucket, and Azure Repos, so projects map cleanly to your catalog. If your goal is fewer tools on screen and faster remediation, this plugin fits that flow.

Install the packages

Copy

yarn --cwd packages/app add @backstage-community/plugin-mend
yarn --cwd packages/backend add @backstage-community/plugin-mend-backend

The frontend will not work without the backend plugin

Get a Mend.io activation key

Open the Settings menu in Mend
Select Integrations
Click the Backstage card
Click Get Activation Key

Add the key to your Backstage config

Copy

# app-config.yaml
mend:
  activationKey: ${YOUR_ACTIVATION_KEY_HERE}

Add the Mend page route

Edit packages app src App.tsx

Copy

// packages/app/src/App.tsx
import React from 'react';
import { Route } from 'react-router-dom';
import { FlatRoutes } from '@backstage/core-app-api';
// other imports already in your file
import { MendPage } from '@backstage-community/plugin-mend';

export const App = () => (
  <FlatRoutes>
    {/* your other routes */}
    <Route path="/mend" element={<MendPage />} />
  </FlatRoutes>
);

This adds a top level Mend page reachable at path slash mend

Add the Mend tab on the entity page

Edit packages app src components Catalog EntityPage.tsx

Copy

// packages/app/src/components/Catalog/EntityPage.tsx
import React from 'react';
import { EntityLayout } from '@backstage/plugin-catalog';
// other imports already in your file
import { MendTab } from '@backstage-community/plugin-mend';

const serviceEntityPage = (
  <EntityLayout>
    {/* your other tabs */}
    <EntityLayout.Route path="/" title="Overview">
      {/* your overview content */}
    </EntityLayout.Route>

    <EntityLayout.Route path="/mend" title="Mend.io">
      <MendTab />
    </EntityLayout.Route>
  </EntityLayout>
);

// ensure your router uses serviceEntityPage for service entities

This adds a Mend tab on each service entity

Edit packages app src components Root Root.tsx

Copy

// packages/app/src/components/Root/Root.tsx
import React, { PropsWithChildren } from 'react';
import { SidebarPage, Sidebar } from '@backstage/core-components';
// other imports already in your file
import { MendSidebar } from '@backstage-community/plugin-mend';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      {/* your other sidebar items */}
      <MendSidebar />
    </Sidebar>
    {children}
  </SidebarPage>
);

This gives quick access to the Mend page from the sidebar

Enable the backend plugin new backend system

Edit packages backend src index.ts

Copy

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

backend.add(import('@backstage-community/plugin-mend-backend'));

backend.start();

This registers the Mend backend feature with the new backend system

Optional permission policy

If you use permission policies you can filter accessible projects

Copy

// example policy file in your backend
import {
  mendReadPermission,
  mendConditions,
  createMendProjectConditionalDecision,
} from '@backstage-community/plugin-mend-backend';

// other imports from your permission system
// import { PermissionPolicy, PolicyQuery } from '@backstage/plugin-permission-node';
// import { isPermission, AuthorizeResult } from '@backstage/plugin-permission-common';
// import { BackstageIdentityResponse } from '@backstage/plugin-auth-node';

export class OrganizationPolicy /* implements PermissionPolicy */ {
  async handle(request /*: PolicyQuery*/, user /*?: BackstageIdentityResponse*/) {
    // grant filtered read access to selected Mend projects
    if (/* isPermission(request.permission, */ mendReadPermission /* ) */) {
      return createMendProjectConditionalDecision(
        // request.permission,
        mendReadPermission,
        mendConditions.filter({
          ids: [], // add Mend project ids here
          exclude: true, // set to false to include only the listed ids
        }),
      );
    }

    return {
      // result: AuthorizeResult.ALLOW,
      result: 'ALLOW' as const,
    };
  }
}

Wire this class into your permission backend as you usually do

Old backend system support

This plugin backend is built for the new backend system. It exports a backend feature. There is no legacy router export. If your app still uses the old backend system you need to migrate your backend to the new system to use this plugin

Backstage Mend.io Plugin

Installation Instructions

Install the packages

Get a Mend.io activation key

Add the Mend page route

Add the Mend tab on the entity page

Add the Mend button to the sidebar

Enable the backend plugin new backend system

Optional permission policy

Old backend system support

Set up Backstage in minutes with Roadie