From 50bcba0f204d12c1d75146e7f7ffc3b50875a1ff Mon Sep 17 00:00:00 2001
From: Adrian Cerbaro <adriancerbaro@gmail.com>
Date: Sat, 3 Dec 2022 21:41:22 -0300
Subject: [PATCH] docs(example): add `.well-known` link in home page

---
 example/src/app.controller.ts | 34 ++++++++------
 example/views/index.ejs       | 88 +++++++++++++++++++++++------------
 2 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/example/src/app.controller.ts b/example/src/app.controller.ts
index 90aa58e..12f3be3 100644
--- a/example/src/app.controller.ts
+++ b/example/src/app.controller.ts
@@ -8,35 +8,37 @@ import {
   Res,
 } from '@nestjs/common';
 import { Response } from 'express';
-import { Oidc } from 'nest-oidc-provider'
+import { Oidc } from 'nest-oidc-provider';
 import { KoaContextWithOIDC } from 'oidc-provider';
 import axios from 'axios';
 import qs from 'query-string';
 
 @Controller()
 export class AppController {
-  private readonly logger = new Logger(AppController.name)
+  private readonly logger = new Logger(AppController.name);
 
   @Get('/')
   @Render('index')
   async index(@Oidc.Context() ctx: KoaContextWithOIDC) {
-    const { oidc: { provider } } = ctx;
+    const {
+      oidc: { provider },
+    } = ctx;
     const session = await provider.Session.get(ctx);
 
+    const res: Record<string, any> = {
+      query: ctx.query,
+      accountId: null,
+      scopes: null,
+      origin: ctx.URL.origin,
+    };
+
     if (session?.accountId) {
       const grant = await provider.Grant.find(session.grantIdFor('test'));
-      return {
-        query: ctx.query,
-        accountId: session.accountId,
-        scopes: grant?.getOIDCScopeEncountered()
-      }
+      res.accountId = session.accountId;
+      res.scopes = grant?.getOIDCScopeEncountered();
     }
 
-    return {
-      query: ctx.query,
-      accountId: null,
-      scopes: null
-    }
+    return res;
   }
 
   @Get('/callback')
@@ -44,7 +46,9 @@ export class AppController {
     const { code, error, error_description } = query;
 
     if (error) {
-      return res.redirect(`/?error=${error}&error_description=${error_description}`);
+      return res.redirect(
+        `/?error=${error}&error_description=${error_description}`,
+      );
     }
 
     if (!code) {
@@ -69,7 +73,7 @@ export class AppController {
         },
       );
 
-      res.redirect('/')
+      res.redirect('/');
     } catch (err) {
       this.logger.error('Could not get token:', err);
       res
diff --git a/example/views/index.ejs b/example/views/index.ejs
index 6303ec7..8267533 100644
--- a/example/views/index.ejs
+++ b/example/views/index.ejs
@@ -28,65 +28,91 @@
             </div>
           </div>
 
-          <%
-            if (query.error || query.error_description) { %>
-              <div class="row">
-                <div class="col">
-                  <div class="alert alert-danger mx-auto" style="max-width: 500px;">
-                    <p class="m-0"><strong>error:</strong> <%= query.error %></p>
-                    <p class="m-0"><strong>error_description:</strong> <%= query.error_description %></p>
-                  </div>
-                </div>
+          <% if (query.error || query.error_description) { %>
+          <div class="row">
+            <div class="col">
+              <div class="alert alert-danger mx-auto" style="max-width: 500px">
+                <p class="m-0"><strong>error:</strong> <%= query.error %></p>
+                <p class="m-0">
+                  <strong>error_description:</strong> <%=
+                  query.error_description %>
+                </p>
               </div>
-            <% } %>
-          %>
+            </div>
+          </div>
+          <% } %> %>
 
           <div class="row">
             <div class="col">
               <div class="card mx-auto" style="width: 300px">
                 <div class="card-body text-center">
                   <div class="mb-3 pb-2 border-bottom">
-                    <h5 class="card-title mb-0">Welcome<% if (accountId) {%> <strong><%= accountId %></strong> <%} %>!</h5>
+                    <h5 class="card-title mb-0">
+                      Welcome<% if (accountId) {%>
+                      <strong><%= accountId %></strong> <%} %>!
+                    </h5>
 
                     <% if (scopes) { %>
-                      <div class="text-start mt-4">
-                        <h6 class="mb-0">Granted scopes:</h6>
-                        <ul>
-                          <% for (const scopeName of scopes.trim().replace(/\s+/, ' ').split(' ')) { %>
-                            <li><%= scopeName %></li>
-                          <% } %>
-                        </ul>
-                      </div>
-                    <% } %>
-
-                    <% if (accountId) { %>
-                      <a href="http://localhost:3001/oidc/session/end" class="btn btn-warning w-100">Logout</a>
+                    <div class="text-start mt-4">
+                      <h6 class="mb-0">Granted scopes:</h6>
+                      <ul>
+                        <% for (const scopeName of scopes.trim().replace(/\s+/,
+                        ' ').split(' ')) { %>
+                        <li><%= scopeName %></li>
+                        <% } %>
+                      </ul>
+                    </div>
+                    <% } %> <% if (accountId) { %>
+                    <a
+                      href="<%= origin %>/oidc/session/end"
+                      class="btn btn-warning w-100"
+                      >Logout</a
+                    >
                     <% } %>
                   </div>
 
                   <div class="mb-4 text-start">
                     <label for="scopes">Scopes:</label>
-                    <input class="form-control" type="text" id="scopes" placeholder="openid email" value="openid email">
+                    <input
+                      class="form-control"
+                      type="text"
+                      id="scopes"
+                      placeholder="openid email"
+                      value="openid email"
+                    />
                   </div>
 
-                  <button id="signin" class="btn btn-success w-100">Click here to authenticate</button>
+                  <button id="signin" class="btn btn-success w-100">
+                    Click here to authenticate
+                  </button>
                 </div>
               </div>
             </div>
           </div>
+
+          <div class="row mt-3">
+            <div class="col text-center">
+              <a
+                href="<%= origin %>/oidc/.well-known/openid-configuration"
+                target="_blank"
+                >.well-known/openid-configuration</a
+              >
+            </div>
+          </div>
         </div>
       </div>
     </div>
 
     <script>
-      const btn = document.getElementById('signin')
+      const btn = document.getElementById('signin');
       const scopesInput = document.getElementById('scopes');
-      const baseUrl = '/oidc/auth?client_id=test&response_type=code&redirect_uri=http://localhost:3001/callback'
+      const baseUrl =
+        '/oidc/auth?client_id=test&response_type=code&redirect_uri=<%= origin %>/callback';
 
       btn.onclick = () => {
-        const scopes = scopesInput.value.replace(/\s+/, ' ')
-        window.location = `${baseUrl}&scope=${scopes || 'openid email'}`
-      }
+        const scopes = scopesInput.value.replace(/\s+/, ' ');
+        window.location = `${baseUrl}&scope=${scopes || 'openid email'}`;
+      };
     </script>
 
     <script