diff --git a/plugins/user-settings/README.md b/plugins/user-settings/README.md index 23d3e48fee..72da278b1e 100644 --- a/plugins/user-settings/README.md +++ b/plugins/user-settings/README.md @@ -4,10 +4,41 @@ Welcome to the user-settings plugin! _This plugin was created through the Backstage CLI_ -## Getting started +## About the plugin -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 [/user-settings](http://localhost:3000/user-settings). +This plugin is intended to be used within the [``](https://backstage.io/storybook/?path=/story/sidebar--sample-sidebar). It provides an item to the sidebar that will render an Avatar of the current signed in user, and when clicked display a settings UI where the user can control different settings across the App. -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. +## Usage + +Add the component to the sidebar: + +```ts +import { UserSettings } from '@backstage/plugin-user-settings'; + + + + + +; +``` + +### Props + +**Auth Providers** + +By default, the plugin provides a list of configured authentication providers is fetched from `app-config.yaml` and displayed in the "Auth Providers" tab. + +If you want to supply your own custom list of Authentication Providers, use the `providerSettings` prop: + +```ts +const MyAuthProviders = () => ( + + + + +); + +} /> +``` + +> **Note that the list of providers expects to be rendered within a MUI [``](https://material-ui.com/components/lists/)**