Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
GCP Project Creator logo

Backstage GCP Project Creator Plugin

Created by trivago

GCP Project Creator is a Backstage plugin that lets you create and manage Google Cloud projects from your developer portal. It brings the basics of the Cloud Resource Manager into a simple UI. You do not leave Backstage to stand up a new project or check an existing one.

The plugin lists projects, shows key details, and lets you request a new project with an approval flow that fits your org. Under the hood it talks to Google Cloud using your Backstage auth. It supports common views like tables with sorting and filtering. It also adds quick links that open project pages and logs in the Google Cloud console when you need to jump out for deeper work.

Typical use cases include bootstrapping sandbox projects, spinning up short lived experiment spaces, and reducing tickets to the platform team. Many teams use it to standardize names and metadata so billing and IAM stay clean. It fits well in self hosted Backstage where you want a paved path for cloud accounts without handing out extra console access.

A screenshot of the GCP Projects plugin.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Add the frontend plugin

  1. Add the package to the app workspace
Copy 
yarn workspace app add @backstage-community/plugin-gcp-projects
  1. Register the API client in packages/app/src/apis.ts
Copy 
// packages/app/src/apis.ts
import { createApiFactory } from '@backstage/core-app-api';
import { googleAuthApiRef } from '@backstage/core-plugin-api';
import { gcpApiRef, GcpClient } from '@backstage-community/plugin-gcp-projects';

// keep your existing exports
export const apis = [
  // your existing api factories

  createApiFactory({
    api: gcpApiRef,
    deps: { googleAuthApi: googleAuthApiRef },
    factory: ({ googleAuthApi }) => new GcpClient(googleAuthApi),
  }),
];
  1. Add a route so users can open the page

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';
import { GcpProjectsPage } from '@backstage-community/plugin-gcp-projects';
import { AppRouter } from './components/AppRouter';

export const App = () => (
  <AppRouter>
    <FlatRoutes>
      {/* your existing routes */}
      <Route path="/gcp-projects" element={<GcpProjectsPage />} />
    </FlatRoutes>
  </AppRouter>
);
  1. Add a sidebar link

Edit the sidebar where you keep your navigation. In most apps this is packages/app/src/components/Root/Root.tsx

Copy 
// packages/app/src/components/Root/Root.tsx
import React from 'react';
import { SidebarItem } from '@backstage/core-components';

// inside your Sidebar
<SidebarItem to="/gcp-projects" text="GCP Projects" />

Configure Google auth in the backend

This plugin uses the Google OAuth provider to call Google Cloud APIs from the browser. Set up the Google auth provider in your Backstage backend.

New backend system

  1. Add the backend auth packages
Copy 
yarn workspace backend add @backstage/plugin-auth-backend @backstage/plugin-auth-backend-module-google-provider
  1. Wire up the backend in packages/backend/src/index.ts
Copy 
// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

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

backend.start();
  1. Add provider config in app-config.yaml
Copy 
auth:
  providers:
    google:
      development:
        clientId: ${AUTH_GOOGLE_CLIENT_ID}
        clientSecret: ${AUTH_GOOGLE_CLIENT_SECRET}

Provide the client ID and secret from your Google Cloud project. Use your own env keys if you prefer.

Legacy backend system

  1. Add the backend auth package if missing
Copy 
yarn workspace backend add @backstage/plugin-auth-backend
  1. Set up the provider in packages/backend/src/plugins/auth.ts
Copy 
// packages/backend/src/plugins/auth.ts
import { createRouter, providers } from '@backstage/plugin-auth-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    database: env.database,
    providerFactories: {
      google: providers.google.create({
        signIn: {
          // pick a resolver that matches your identity model
          resolver: providers.google.resolvers.emailMatchingUserEntityName(),
        },
      }),
    },
  });
}

Make sure this router is mounted at the auth path in packages/backend/src/index.ts. Most Backstage apps already do this.

  1. Add provider config in app-config.yaml
Copy 
auth:
  providers:
    google:
      development:
        clientId: ${AUTH_GOOGLE_CLIENT_ID}
        clientSecret: ${AUTH_GOOGLE_CLIENT_SECRET}

Things to Know

  • The page lists projects and can create a project. Access depends on the signed in Google user. Make sure the user has the right GCP permissions for your org.
  • No separate backend plugin is required for this feature. The frontend calls Google Cloud APIs using the Google OAuth token from the Backstage auth backend.

Changelog

This changelog is produced from commits made to the GCP Project Creator plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Dependencies

  • Remove unused dev dependency canvas #3565 5 months ago

Maintenance

  • Reduce knip false positives by updating repo tools to 0.13.0 #3018 6 months ago

Set up Backstage in minutes with Roadie

Get a demo