From c2386e9e860325f43775d700a016b91ecd7053d0 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Mon, 11 Jan 2021 08:57:15 +0100
Subject: [PATCH 01/23] Modifying auth tutorial to contain different providers.
 Adding a better example repo link.

---
 docs/tutorials/quickstart-app-auth.md | 265 +++++++++++++++++++++++---
 1 file changed, 239 insertions(+), 26 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 1dcca9d7e0..ecafd47b8c 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -3,20 +3,17 @@ id: quickstart-app-auth
 title: Monorepo App Setup With Authentication
 ---
 
-###### September 15th 2020 - @backstage/create-app - v0.1.1-alpha.21
+###### January 8th 2021 - @backstage/create-app - v0.4.5
 
 <br />
 
 > This document takes you through setting up a Backstage app that runs in your
 > own environment. It starts with a skeleton install and verifying of the
-> monorepo's functionality. Next, GitHub authentication is added and tested.
+> monorepo's functionality. Next, authentication is added and tested.
 >
 > This document assumes you have Node.js 12 active along with Yarn and Python.
-> Please note, that at the time of this writing, the current version is
-> 0.1.1-alpha.21. This guide can still be used with future versions, just,
-> verify as you go. If you run into issues, you can compare your setup with mine
-> here >
-> [simple-backstage-app](https://github.com/johnson-jesse/simple-backstage-app).
+> Please note, that at the time of this writing, the current version is v0.4.5
+> This guide can still be used with future versions, just, verify as you go.
 
 # The Skeleton Application
 
@@ -55,6 +52,16 @@ guest. Let's fix that now and add auth.
 
 # The Auth Configuration
 
+Default Backstage installation includes multiple authentication providers out of
+the box. The steps to enable new authentication provider in Backstage are very
+similar to each other, the biggest difference is usually configuring the
+external authentication provider. Please see a subset of possible providers and
+instructions to integrate them below. Steps 1 & 2 are described separately for
+each provider and steps beyond that are common for all.
+
+<details><summary>Github</summary>
+<p>
+
 1. Open `app-config.yaml` and change it as follows
 
 _from:_
@@ -75,23 +82,224 @@ auth:
           $env: AUTH_GITHUB_CLIENT_ID
         clientSecret:
           $env: AUTH_GITHUB_CLIENT_SECRET
-        ## uncomment the following three lines if using enterprise
+        ## uncomment the following two lines if using enterprise
         # enterpriseInstanceUrl:
         #  $env: AUTH_GITHUB_ENTERPRISE_INSTANCE_URL
 ```
 
-2. Set environment variables in whatever fashion is easiest for you. I chose to
+2. Generate Github client id and secret
+
+- Log into http://github.com
+- Navigate to (Settings > Developer Settings > OAuth Apps > New OAuth
+  App)[https://github.com/settings/applications/new]
+- Set Homepage URL = http://localhost:3000
+- Set Callback URL = http://localhost:7000/api/auth/github
+- Click [Register application]
+- On the next page, copy and paste your new Client ID and Client Secret to
+  environment variables defined in the `app-config.yaml` file,
+  `AUTH_GITHUB_CLIENT_ID` & `AUTH_GITHUB_CLIENT_SECRET`
+
+</p>
+</details>
+
+<details><summary>Gitlab</summary>
+<p>
+
+1. Open `app-config.yaml` and change it as follows
+
+_from:_
+
+```yaml
+auth:
+  providers: {}
+```
+
+_to:_
+
+```yaml
+auth:
+  providers:
+    gitlab:
+      development:
+        clientId:
+          $env: AUTH_GITLAB_CLIENT_ID
+        clientSecret:
+          $env: AUTH_GITLAB_CLIENT_SECRET
+        audience: https://gitlab.com # Or your self-hosted Gitlab instance URL
+```
+
+2. Generate Gitlab Application for client id and secret
+
+- Log into Gitlab
+- Navigate to (Profile > Settings >
+  Applications)[https://gitlab.com/-/profile/applications]
+- Name your application
+- Set Callback URL = http://localhost:7000/api/auth/gitlab/handler/frame
+- Select the following values:
+  - `read_user (Read the authenticated user's personal information)`
+  - `read_repository (Allows read-only access to the repository)`
+  - `write_repository (Allows read-write access to the repository)`
+  - `openid (Authenticate using OpenID Connect)`
+  - `profile (Allows read-only access to the user's personal information using OpenID Connect)`
+  - `email (Allows read-only access to the user's primary email address using OpenID Connect)`
+- Click [Save application]
+- On the next page, copy and paste your new Application ID and Secret to
+  environment variables defined in the `app-config.yaml` file,
+  `AUTH_GITLAB_CLIENT_ID` & `AUTH_GITLAB_CLIENT_SECRET`
+
+</p>
+</details>
+
+<details><summary>Google</summary>
+<p>
+
+1. Open `app-config.yaml` and change it as follows
+
+_from:_
+
+```yaml
+auth:
+  providers: {}
+```
+
+_to:_
+
+```yaml
+auth:
+  providers:
+    google:
+      development:
+        clientId:
+          $env: AUTH_GOOGLE_CLIENT_ID
+        clientSecret:
+          $env: AUTH_GOOGLE_CLIENT_SECRET
+```
+
+2. Generate Google Application in Google Cloud console
+
+- Log into https://console.cloud.google.com
+- Select or create a new project from the dropdown on the top bar
+- Navigate to (APIs & Services - >
+  Credentials)[https://console.cloud.google.com/apis/credentials]
+- Add new Authorised JavaScript origin = `http://localhost:3000`
+- Add new Authorised redirect URI =
+  `http://localhost:7000/api/auth/google/handler/frame`
+- Click [Save application]
+- Google should display a modal with your Client ID and Secret. Copy and paste
+  those to environment variables defined in the `app-config.yaml` file,
+  `AUTH_GOOGLE_CLIENT_ID` & `AUTH_GOOGLE_CLIENT_SECRET`
+
+</p>
+</details>
+
+<details><summary>Microsoft</summary>
+<p>
+
+1. Open `app-config.yaml` and change it as follows
+
+_from:_
+
+```yaml
+auth:
+  providers: {}
+```
+
+_to:_
+
+```yaml
+auth:
+  providers:
+    microsoft:
+      development:
+        clientId:
+          $env: AUTH_MICROSOFT_CLIENT_ID
+        clientSecret:
+          $env: AUTH_MICROSOFT_CLIENT_SECRET
+        tenantId:
+          $env: AUTH_MICROSOFT_TENANT_ID
+```
+
+2. Create Microsoft Directory in Microsoft Portal
+
+- Log into https://portal.azure.com
+- Navigate to (Azure Active Directory -> App
+  Registrations)[https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps]
+- Create a New Registration
+- Add new Redirect URI = `http://localhost:3000`
+- Add new Authorised redirect URI =
+  `http://localhost:7000/api/auth/microsoft/handler/frame`
+- Click [Save application]
+- Set environment variable `AUTH_MICROSOFT_CLIENT_ID` from
+  `Application (client) Id` displayed on the directory page
+- Set environment variable `AUTH_MICROSOFT_TENANT_ID` from
+  `Directory (tenant) ID` displayed on the directory page
+- Navigate to Certificates & Secrets section and click [Create a new secret]
+- Set environment variable `AUTH_MICROSOFT_CLIENT_SECRET` from the `value` field
+  created.
+
+</p>
+</details>
+
+<details><summary>Auth0</summary>
+<p>
+
+1. Open `app-config.yaml` and change it as follows
+
+_from:_
+
+```yaml
+auth:
+  providers: {}
+```
+
+_to:_
+
+```yaml
+auth:
+  providers:
+    auth0:
+      development:
+        clientId:
+          $env: AUTH_AUTH0_CLIENT_ID
+        clientSecret:
+          $env: AUTH_AUTH0_CLIENT_SECRET
+        domain:
+          $env: AUTH_AUTH0_DOMAIN_ID
+```
+
+2. Create Auth0 application in Auth0 management console
+
+- Log into https://manage.auth0.com/dashboard/
+- Navigate to Applications
+- Create a New Application
+  - Select Single Page Web Application
+- Go to Settings tab
+- Add new line to Allowed Callback URLs =
+  `http://localhost:7000/api/auth/auth0/handler/frame`
+- Click [Save Changes]
+- Set environment variables displayed on the Basic Information page
+  - `AUTH_AUTH0_CLIENT_ID` from `Client ID` displayed on Auth0 application page
+  - `AUTH_AUTH0_CLIENT_SECRET` from `Client Secret` displayed on Auth0
+    application page
+  - `AUTH_AUTH0_DOMAIN_ID` from `Domain` displayed on Auth0 application page
+
+</p>
+</details>
+
+3. Set environment variables in whatever fashion is easiest for you. I chose to
    add mine to my `.zshrc` profile.
 
 ```zsh
 # For macOS Catalina & Z Shell
 # ------ simple-backstage-app GitHub
+#
+# (Change the name of the environment variables based on your auth setup above
 export AUTH_GITHUB_CLIENT_ID=xxx
 export AUTH_GITHUB_CLIENT_SECRET=xxx
 # export AUTH_GITHUB_ENTERPRISE_INSTANCE_URL=https://github.{MY_BIZ}.com
 ```
 
-3. And of course I need to source that file.
+4. And of course I need to source that file.
 
 ```zsh
 # Loading the new variables
@@ -107,26 +315,26 @@ export AUTH_GITHUB_CLIENT_SECRET=xxx
 > ...
 ```
 
-4. The values to replace `xxx` above come from your oauth app setup.
-
-```
-> Log into http://github.com
-> Navigate to (Settings > Developer Settings > OAuth Apps > New OAuth App)[https://github.com/settings/applications/new]
-> Set Homepage URL = http://localhost:3000
-> Set Callback URL = http://localhost:7000/api/auth/github
-> Click [Register application]
-> On the next page, copy and paste your new Client ID and Client Secret to the environment variables above, `AUTH_GITHUB_CLIENT_ID` & `AUTH_GITHUB_CLIENT_SECRET`
-> Don't forget to `source` that profile file again if necessary.
-```
-
-5. Open and change _root > packages > app > src >_`App.tsx` as follows
+6. Open and change _root > packages > app > src >_`App.tsx` to use correct
+   authentication provider reference
 
 ```tsx
-// Add the following imports to the existing list from core
 import { githubAuthApiRef, SignInPage } from '@backstage/core';
 ```
 
-6. In the same file, change the createApp function as follows
+Modify the imported reference based on authentication method selected above
+
+| Auth Provider | Import Name         |
+| ------------- | ------------------- |
+| Github        | githubAuthApiRef    |
+| Gitlab        | gitlabAuthApiRef    |
+| Google        | googleAuthApiRef    |
+| Microsoft     | microsoftAuthApiRef |
+| Auth0         | googleAuthApiRef    |
+
+7. In the same file, modify createApp
+
+Remeber to modify the provider information based on the table above.
 
 ```tsx
 const app = createApp({
@@ -153,12 +361,17 @@ const app = createApp({
 });
 ```
 
-7. Start the backend and frontend as before
+After finishing setting up one (or multiple) authentication providers defined
+above you can start the backend and frontend as before
 
 When the browser loads, you should be presented with a login page for GitHub.
 Login as usual with your GitHub account. If this is your first time, you will be
 asked to authorize and then are redirected to the catalog page if all is well.
 
+For more information you can clone the repository:
+https://github.com/RoadieHQ/backstage-auth-example Each authentication setting
+is set up there on a branch named after the authentication provider.
+
 # Where to go from here
 
 > You're probably eager to write your first custom plugin. Follow this next

From e9c75d64a3aff49109d8f5851d17c0f7d02455df Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Mon, 11 Jan 2021 09:02:26 +0100
Subject: [PATCH 02/23] Fix typos.

---
 docs/tutorials/quickstart-app-auth.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index ecafd47b8c..5991f626e7 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -293,7 +293,7 @@ auth:
 # For macOS Catalina & Z Shell
 # ------ simple-backstage-app GitHub
 #
-# (Change the name of the environment variables based on your auth setup above
+# (Change the name of the environment variables based on your auth setup above)
 export AUTH_GITHUB_CLIENT_ID=xxx
 export AUTH_GITHUB_CLIENT_SECRET=xxx
 # export AUTH_GITHUB_ENTERPRISE_INSTANCE_URL=https://github.{MY_BIZ}.com
@@ -315,7 +315,7 @@ export AUTH_GITHUB_CLIENT_SECRET=xxx
 > ...
 ```
 
-6. Open and change _root > packages > app > src >_`App.tsx` to use correct
+5. Open and change _root > packages > app > src >`App.tsx` to use correct
    authentication provider reference
 
 ```tsx
@@ -332,9 +332,9 @@ Modify the imported reference based on authentication method selected above
 | Microsoft     | microsoftAuthApiRef |
 | Auth0         | googleAuthApiRef    |
 
-7. In the same file, modify createApp
+6. In the same file, modify createApp
 
-Remeber to modify the provider information based on the table above.
+Remember to modify the provider information based on the table above.
 
 ```tsx
 const app = createApp({

From b62bc928de9693d2af8e7cd131018f6d522021ed Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Mon, 11 Jan 2021 09:41:06 +0100
Subject: [PATCH 03/23] Run prettier.

---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 5991f626e7..b6370fd1f9 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -315,7 +315,7 @@ export AUTH_GITHUB_CLIENT_SECRET=xxx
 > ...
 ```
 
-5. Open and change _root > packages > app > src >`App.tsx` to use correct
+5. Open and change \_root > packages > app > src >`App.tsx` to use correct
    authentication provider reference
 
 ```tsx

From 34206f81f05459a675c40e0351cdd0b0de8b97ed Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Mon, 11 Jan 2021 13:47:47 +0100
Subject: [PATCH 04/23] Adding reference to latest node LTS as well.

Resolves:
* https://github.com/backstage/backstage/pull/4003#discussion_r554920635
---
 docs/tutorials/quickstart-app-auth.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index b6370fd1f9..48b5d2b3a7 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -11,9 +11,10 @@ title: Monorepo App Setup With Authentication
 > own environment. It starts with a skeleton install and verifying of the
 > monorepo's functionality. Next, authentication is added and tested.
 >
-> This document assumes you have Node.js 12 active along with Yarn and Python.
-> Please note, that at the time of this writing, the current version is v0.4.5
-> This guide can still be used with future versions, just, verify as you go.
+> This document assumes you have Node.js 12 or 14 active along with Yarn and
+> Python. Please note, that at the time of this writing, the current version is
+> v0.4.5 This guide can still be used with future versions, just, verify as you
+> go.
 
 # The Skeleton Application
 

From 82e35cd6531b9b62d4b264dd831a5585fc2e24b0 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:57:58 +0100
Subject: [PATCH 05/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 48b5d2b3a7..88ccce6ae5 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -13,7 +13,7 @@ title: Monorepo App Setup With Authentication
 >
 > This document assumes you have Node.js 12 or 14 active along with Yarn and
 > Python. Please note, that at the time of this writing, the current version is
-> v0.4.5 This guide can still be used with future versions, just, verify as you
+> v0.4.5. This guide can still be used with future versions, just, verify as you
 > go.
 
 # The Skeleton Application

From ff4e53bd4ebb257732b0374cc6b2d19988e1cfe7 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:58:08 +0100
Subject: [PATCH 06/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 88ccce6ae5..2affcec7fc 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -53,7 +53,7 @@ guest. Let's fix that now and add auth.
 
 # The Auth Configuration
 
-Default Backstage installation includes multiple authentication providers out of
+A default Backstage installation includes multiple authentication providers out of
 the box. The steps to enable new authentication provider in Backstage are very
 similar to each other, the biggest difference is usually configuring the
 external authentication provider. Please see a subset of possible providers and

From 322b04bff7191e0f31591a9306888e140b48f7fb Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:58:14 +0100
Subject: [PATCH 07/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 2affcec7fc..12d3767791 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -54,7 +54,7 @@ guest. Let's fix that now and add auth.
 # The Auth Configuration
 
 A default Backstage installation includes multiple authentication providers out of
-the box. The steps to enable new authentication provider in Backstage are very
+the box. The steps to enable new authentication providers in Backstage are very
 similar to each other, the biggest difference is usually configuring the
 external authentication provider. Please see a subset of possible providers and
 instructions to integrate them below. Steps 1 & 2 are described separately for

From f3165cce9535a17d7698a584c90397d8ba351dfe Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:58:24 +0100
Subject: [PATCH 08/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 12d3767791..7e05a5a63d 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -88,7 +88,7 @@ auth:
         #  $env: AUTH_GITHUB_ENTERPRISE_INSTANCE_URL
 ```
 
-2. Generate Github client id and secret
+2. Generate a GitHub client ID and secret
 
 - Log into http://github.com
 - Navigate to (Settings > Developer Settings > OAuth Apps > New OAuth

From 642bf0be1a47df153704e32e8304fe98ef94ce65 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:59:17 +0100
Subject: [PATCH 09/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 7e05a5a63d..0f5e452aa5 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -103,7 +103,7 @@ auth:
 </p>
 </details>
 
-<details><summary>Gitlab</summary>
+<details><summary>GitLab</summary>
 <p>
 
 1. Open `app-config.yaml` and change it as follows

From 72399d57e5612b6198bce30efd2910ab67effef4 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:59:38 +0100
Subject: [PATCH 10/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 0f5e452aa5..2d23402edd 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -129,7 +129,7 @@ auth:
         audience: https://gitlab.com # Or your self-hosted Gitlab instance URL
 ```
 
-2. Generate Gitlab Application for client id and secret
+2. Generate a GitLab Application client ID and secret
 
 - Log into Gitlab
 - Navigate to (Profile > Settings >

From cc64069374adea4d24e4781f2ca64cb4fb8d0da5 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 16:59:51 +0100
Subject: [PATCH 11/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 2d23402edd..b58596b434 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -131,7 +131,7 @@ auth:
 
 2. Generate a GitLab Application client ID and secret
 
-- Log into Gitlab
+- Log into GitLab
 - Navigate to (Profile > Settings >
   Applications)[https://gitlab.com/-/profile/applications]
 - Name your application

From 163e263d8eb8e06868f7d464ba86b3adfaf76a23 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 17:00:35 +0100
Subject: [PATCH 12/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index b58596b434..00c97cfe4b 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -180,7 +180,7 @@ auth:
 
 - Log into https://console.cloud.google.com
 - Select or create a new project from the dropdown on the top bar
-- Navigate to (APIs & Services - >
+- Navigate to (APIs & Services >
   Credentials)[https://console.cloud.google.com/apis/credentials]
 - Add new Authorised JavaScript origin = `http://localhost:3000`
 - Add new Authorised redirect URI =

From ecba810c98a37c72a915061f5822eec338db62a2 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 17:01:32 +0100
Subject: [PATCH 13/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 00c97cfe4b..1cae03469d 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -323,7 +323,7 @@ export AUTH_GITHUB_CLIENT_SECRET=xxx
 import { githubAuthApiRef, SignInPage } from '@backstage/core';
 ```
 
-Modify the imported reference based on authentication method selected above
+Modify the imported reference based on the authentication method you selected above:
 
 | Auth Provider | Import Name         |
 | ------------- | ------------------- |

From 33267d1cb9f398153634a2dfb0851b5edfc488c8 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 17:01:39 +0100
Subject: [PATCH 14/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 1cae03469d..900c52c484 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -331,7 +331,7 @@ Modify the imported reference based on the authentication method you selected ab
 | Gitlab        | gitlabAuthApiRef    |
 | Google        | googleAuthApiRef    |
 | Microsoft     | microsoftAuthApiRef |
-| Auth0         | googleAuthApiRef    |
+| Auth0         | auth0AuthApiRef    |
 
 6. In the same file, modify createApp
 

From 39b45b62b4889953dcf8676cf61b75d5f3a51876 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Mon, 11 Jan 2021 17:01:49 +0100
Subject: [PATCH 15/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 900c52c484..db97ae5ed4 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -369,8 +369,8 @@ When the browser loads, you should be presented with a login page for GitHub.
 Login as usual with your GitHub account. If this is your first time, you will be
 asked to authorize and then are redirected to the catalog page if all is well.
 
-For more information you can clone the repository:
-https://github.com/RoadieHQ/backstage-auth-example Each authentication setting
+For more information you can clone [the backstage-auth-example repository](https://github.com/RoadieHQ/backstage-auth-example).
+ Each authentication setting
 is set up there on a branch named after the authentication provider.
 
 # Where to go from here

From dc48cfc9f2d862f8ec805ffc4fc67d0ae33b0e27 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Tue, 12 Jan 2021 08:27:31 +0100
Subject: [PATCH 16/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index db97ae5ed4..364e4a434a 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -268,7 +268,7 @@ auth:
           $env: AUTH_AUTH0_DOMAIN_ID
 ```
 
-2. Create Auth0 application in Auth0 management console
+2. Create an Auth0 application in the Auth0 management console
 
 - Log into https://manage.auth0.com/dashboard/
 - Navigate to Applications

From 4f0993407b406037d0468a77638d82da6993ed51 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Tue, 12 Jan 2021 08:31:32 +0100
Subject: [PATCH 17/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 364e4a434a..0fd48dc7bf 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -223,7 +223,7 @@ auth:
 2. Create Microsoft Directory in Microsoft Portal
 
 - Log into https://portal.azure.com
-- Navigate to (Azure Active Directory -> App
+- Navigate to (Azure Active Directory > App
   Registrations)[https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps]
 - Create a New Registration
 - Add new Redirect URI = `http://localhost:3000`

From 80619474d854e3f1e1f8205920fa43cae513fc28 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Tue, 12 Jan 2021 08:46:22 +0100
Subject: [PATCH 18/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 0fd48dc7bf..2ad2d7c900 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -220,7 +220,7 @@ auth:
           $env: AUTH_MICROSOFT_TENANT_ID
 ```
 
-2. Create Microsoft Directory in Microsoft Portal
+2. Create a Microsoft App Registration in Microsoft Portal
 
 - Log into https://portal.azure.com
 - Navigate to (Azure Active Directory > App

From 0fed686aed8791e0ce24911df04193bb44b34e3e Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@roadie.io>
Date: Tue, 12 Jan 2021 08:47:27 +0100
Subject: [PATCH 19/23] Update docs/tutorials/quickstart-app-auth.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredrik Adelöw <freben@gmail.com>
---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 2ad2d7c900..7475061b9e 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -176,7 +176,7 @@ auth:
           $env: AUTH_GOOGLE_CLIENT_SECRET
 ```
 
-2. Generate Google Application in Google Cloud console
+2. Generate Google Credentials in Google Cloud console
 
 - Log into https://console.cloud.google.com
 - Select or create a new project from the dropdown on the top bar

From 6d74776e1214f1e9ffe187f89cf909cbfdd027f1 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Tue, 12 Jan 2021 08:55:45 +0100
Subject: [PATCH 20/23] Adds in more modifications based on PR comments

Run prettier.
Add heading level for list items.
Fix styling and nomenclature.
---
 docs/tutorials/quickstart-app-auth.md | 68 +++++++++++++++------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 7475061b9e..205fcddb65 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -53,9 +53,9 @@ guest. Let's fix that now and add auth.
 
 # The Auth Configuration
 
-A default Backstage installation includes multiple authentication providers out of
-the box. The steps to enable new authentication providers in Backstage are very
-similar to each other, the biggest difference is usually configuring the
+A default Backstage installation includes multiple authentication providers out
+of the box. The steps to enable new authentication providers in Backstage are
+very similar to each other, the biggest difference is usually configuring the
 external authentication provider. Please see a subset of possible providers and
 instructions to integrate them below. Steps 1 & 2 are described separately for
 each provider and steps beyond that are common for all.
@@ -63,7 +63,7 @@ each provider and steps beyond that are common for all.
 <details><summary>Github</summary>
 <p>
 
-1. Open `app-config.yaml` and change it as follows
+### 1. Open `app-config.yaml` and change it as follows
 
 _from:_
 
@@ -88,7 +88,7 @@ auth:
         #  $env: AUTH_GITHUB_ENTERPRISE_INSTANCE_URL
 ```
 
-2. Generate a GitHub client ID and secret
+### 2. Generate a GitHub client ID and secret
 
 - Log into http://github.com
 - Navigate to (Settings > Developer Settings > OAuth Apps > New OAuth
@@ -106,7 +106,7 @@ auth:
 <details><summary>GitLab</summary>
 <p>
 
-1. Open `app-config.yaml` and change it as follows
+### 1. Open `app-config.yaml` and change it as follows
 
 _from:_
 
@@ -129,7 +129,7 @@ auth:
         audience: https://gitlab.com # Or your self-hosted Gitlab instance URL
 ```
 
-2. Generate a GitLab Application client ID and secret
+### 2. Generate a Gitlab Application client ID and secret
 
 - Log into GitLab
 - Navigate to (Profile > Settings >
@@ -137,12 +137,14 @@ auth:
 - Name your application
 - Set Callback URL = http://localhost:7000/api/auth/gitlab/handler/frame
 - Select the following values:
-  - `read_user (Read the authenticated user's personal information)`
-  - `read_repository (Allows read-only access to the repository)`
-  - `write_repository (Allows read-write access to the repository)`
-  - `openid (Authenticate using OpenID Connect)`
-  - `profile (Allows read-only access to the user's personal information using OpenID Connect)`
-  - `email (Allows read-only access to the user's primary email address using OpenID Connect)`
+  - `read_user` (Read the authenticated user's personal information)
+  - `read_repository` (Allows read-only access to the repository)
+  - `write_repository` (Allows read-write access to the repository)
+  - `openid` (Authenticate using OpenID Connect)
+  - `profile` (Allows read-only access to the user's personal information using
+    OpenID Connect)
+  - `email` (Allows read-only access to the user's primary email address using
+    OpenID Connect)
 - Click [Save application]
 - On the next page, copy and paste your new Application ID and Secret to
   environment variables defined in the `app-config.yaml` file,
@@ -154,7 +156,7 @@ auth:
 <details><summary>Google</summary>
 <p>
 
-1. Open `app-config.yaml` and change it as follows
+### 1. Open `app-config.yaml` and change it as follows
 
 _from:_
 
@@ -176,12 +178,14 @@ auth:
           $env: AUTH_GOOGLE_CLIENT_SECRET
 ```
 
-2. Generate Google Credentials in Google Cloud console
+### 2. Generate Google Credentials in Google Cloud console
 
 - Log into https://console.cloud.google.com
 - Select or create a new project from the dropdown on the top bar
 - Navigate to (APIs & Services >
   Credentials)[https://console.cloud.google.com/apis/credentials]
+- Click Create Credentials and select [OAuth client ID]
+- Select Web Application as the application type
 - Add new Authorised JavaScript origin = `http://localhost:3000`
 - Add new Authorised redirect URI =
   `http://localhost:7000/api/auth/google/handler/frame`
@@ -196,7 +200,7 @@ auth:
 <details><summary>Microsoft</summary>
 <p>
 
-1. Open `app-config.yaml` and change it as follows
+### 1. Open `app-config.yaml` and change it as follows
 
 _from:_
 
@@ -220,7 +224,7 @@ auth:
           $env: AUTH_MICROSOFT_TENANT_ID
 ```
 
-2. Create a Microsoft App Registration in Microsoft Portal
+### 2. Create a Microsoft App Registration in Microsoft Portal
 
 - Log into https://portal.azure.com
 - Navigate to (Azure Active Directory > App
@@ -244,7 +248,7 @@ auth:
 <details><summary>Auth0</summary>
 <p>
 
-1. Open `app-config.yaml` and change it as follows
+### 1. Open `app-config.yaml` and change it as follows
 
 _from:_
 
@@ -268,7 +272,7 @@ auth:
           $env: AUTH_AUTH0_DOMAIN_ID
 ```
 
-2. Create an Auth0 application in the Auth0 management console
+### 2. Create an Auth0 application in the Auth0 management console
 
 - Log into https://manage.auth0.com/dashboard/
 - Navigate to Applications
@@ -287,8 +291,9 @@ auth:
 </p>
 </details>
 
-3. Set environment variables in whatever fashion is easiest for you. I chose to
-   add mine to my `.zshrc` profile.
+### 3. Set environment variables in whatever fashion is easiest for you. I chose to
+
+add mine to my `.zshrc` profile.
 
 ```zsh
 # For macOS Catalina & Z Shell
@@ -300,7 +305,7 @@ export AUTH_GITHUB_CLIENT_SECRET=xxx
 # export AUTH_GITHUB_ENTERPRISE_INSTANCE_URL=https://github.{MY_BIZ}.com
 ```
 
-4. And of course I need to source that file.
+### 4. And of course I need to source that file.
 
 ```zsh
 # Loading the new variables
@@ -316,14 +321,16 @@ export AUTH_GITHUB_CLIENT_SECRET=xxx
 > ...
 ```
 
-5. Open and change \_root > packages > app > src >`App.tsx` to use correct
-   authentication provider reference
+### 5. Open and change _root > packages > app > src >_ `App.tsx` to use correct
+
+authentication provider reference
 
 ```tsx
 import { githubAuthApiRef, SignInPage } from '@backstage/core';
 ```
 
-Modify the imported reference based on the authentication method you selected above:
+Modify the imported reference based on the authentication method you selected
+above:
 
 | Auth Provider | Import Name         |
 | ------------- | ------------------- |
@@ -331,9 +338,9 @@ Modify the imported reference based on the authentication method you selected ab
 | Gitlab        | gitlabAuthApiRef    |
 | Google        | googleAuthApiRef    |
 | Microsoft     | microsoftAuthApiRef |
-| Auth0         | auth0AuthApiRef    |
+| Auth0         | auth0AuthApiRef     |
 
-6. In the same file, modify createApp
+### 6. In the same file, modify createApp
 
 Remember to modify the provider information based on the table above.
 
@@ -369,9 +376,10 @@ When the browser loads, you should be presented with a login page for GitHub.
 Login as usual with your GitHub account. If this is your first time, you will be
 asked to authorize and then are redirected to the catalog page if all is well.
 
-For more information you can clone [the backstage-auth-example repository](https://github.com/RoadieHQ/backstage-auth-example).
- Each authentication setting
-is set up there on a branch named after the authentication provider.
+For more information you can clone
+[the backstage-auth-example repository](https://github.com/RoadieHQ/backstage-auth-example).
+Each authentication setting is set up there on a branch named after the
+authentication provider.
 
 # Where to go from here
 

From 6dee39ebe285f4f4013fbafad683c5da0a57b68d Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Wed, 13 Jan 2021 09:16:58 +0100
Subject: [PATCH 21/23] Fix spelling.

---
 docs/tutorials/quickstart-app-auth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 205fcddb65..14ed856c96 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -103,7 +103,7 @@ auth:
 </p>
 </details>
 
-<details><summary>GitLab</summary>
+<details><summary>Gitlab</summary>
 <p>
 
 ### 1. Open `app-config.yaml` and change it as follows

From e921fb2ec7428029748ad4d5a109a32ebde437ea Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Wed, 13 Jan 2021 09:25:25 +0100
Subject: [PATCH 22/23] Fix GitHub stylization

---
 docs/tutorials/quickstart-app-auth.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 14ed856c96..4218940ef7 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -60,7 +60,7 @@ external authentication provider. Please see a subset of possible providers and
 instructions to integrate them below. Steps 1 & 2 are described separately for
 each provider and steps beyond that are common for all.
 
-<details><summary>Github</summary>
+<details><summary>GitHub</summary>
 <p>
 
 ### 1. Open `app-config.yaml` and change it as follows
@@ -334,7 +334,7 @@ above:
 
 | Auth Provider | Import Name         |
 | ------------- | ------------------- |
-| Github        | githubAuthApiRef    |
+| GitHub        | githubAuthApiRef    |
 | Gitlab        | gitlabAuthApiRef    |
 | Google        | googleAuthApiRef    |
 | Microsoft     | microsoftAuthApiRef |

From 37e4bf3473a1f399f572eb7bdcb636f57204ebd8 Mon Sep 17 00:00:00 2001
From: Jussi Hallila <jussi@hallila.com>
Date: Wed, 13 Jan 2021 10:12:40 +0100
Subject: [PATCH 23/23] Modifying GitLab text to be stylized

---
 docs/tutorials/quickstart-app-auth.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 4218940ef7..1c661d274c 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -93,8 +93,8 @@ auth:
 - Log into http://github.com
 - Navigate to (Settings > Developer Settings > OAuth Apps > New OAuth
   App)[https://github.com/settings/applications/new]
-- Set Homepage URL = http://localhost:3000
-- Set Callback URL = http://localhost:7000/api/auth/github
+- Set Homepage URL = `http://localhost:3000`
+- Set Callback URL = `http://localhost:7000/api/auth/github`
 - Click [Register application]
 - On the next page, copy and paste your new Client ID and Client Secret to
   environment variables defined in the `app-config.yaml` file,
@@ -103,7 +103,7 @@ auth:
 </p>
 </details>
 
-<details><summary>Gitlab</summary>
+<details><summary>GitLab</summary>
 <p>
 
 ### 1. Open `app-config.yaml` and change it as follows
@@ -126,16 +126,16 @@ auth:
           $env: AUTH_GITLAB_CLIENT_ID
         clientSecret:
           $env: AUTH_GITLAB_CLIENT_SECRET
-        audience: https://gitlab.com # Or your self-hosted Gitlab instance URL
+        audience: https://gitlab.com # Or your self-hosted GitLab instance URL
 ```
 
-### 2. Generate a Gitlab Application client ID and secret
+### 2. Generate a GitLab Application client ID and secret
 
 - Log into GitLab
 - Navigate to (Profile > Settings >
   Applications)[https://gitlab.com/-/profile/applications]
 - Name your application
-- Set Callback URL = http://localhost:7000/api/auth/gitlab/handler/frame
+- Set Callback URL = `http://localhost:7000/api/auth/gitlab/handler/frame`
 - Select the following values:
   - `read_user` (Read the authenticated user's personal information)
   - `read_repository` (Allows read-only access to the repository)
@@ -335,7 +335,7 @@ above:
 | Auth Provider | Import Name         |
 | ------------- | ------------------- |
 | GitHub        | githubAuthApiRef    |
-| Gitlab        | gitlabAuthApiRef    |
+| GitLab        | gitlabAuthApiRef    |
 | Google        | googleAuthApiRef    |
 | Microsoft     | microsoftAuthApiRef |
 | Auth0         | auth0AuthApiRef     |