From 9c9031b7888052830ccbf21039a919acb3872d46 Mon Sep 17 00:00:00 2001
From: Marcus Eide <eide@spotify.com>
Date: Mon, 28 Sep 2020 09:21:03 +0200
Subject: [PATCH] Add instructions to readme

---
 plugins/user-settings/README.md | 41 +++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 5 deletions(-)

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 [`<Sidebar>`](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';
+
+<SidebarPage>
+  <Sidebar>
+    <UserSettings />
+  </Sidebar>
+</SidebarPage>;
+```
+
+### 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 = () => (
+  <ListItem>
+    <ListItemText primary="example" />
+    <ListItemSecondaryAction={someAction}>
+  </ListItem>
+);
+
+<UserSettings providerSettings={<MyAuthProviders />} />
+```
+
+> **Note that the list of providers expects to be rendered within a MUI [`<List>`](https://material-ui.com/components/lists/)**