feat: beautify auth page after pkce login (aws#4738)

jpinkney-aws · web-flow · commit 1d7d8f8c864a · 2024-04-22T10:32:45.000-04:00
* feat: beautify auth page after pkce login

Problem:
- Old screen was ugly and basic

Solution:
- New screen is similiar to the current oidc login webpage

NOTE: We need to manually copy the html to dist because the vue loader doesn't do it for us. Also, it's a lot simpler to just serve the html rather than do server side loading for the vue component
diff --git a/packages/core/resources/css/auth.css b/packages/core/resources/css/auth.css
@@ -0,0 +1,92 @@
+@import url('./icons.css');
+
+html {
+    height: 100%;
+}
+
+body {
+    box-sizing: border-box;
+    min-height: 100%;
+    margin: 0;
+    padding: 15px 30px;
+    display: flex;
+    flex-direction: column;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 0.9rem;
+    background-color: #f2f3f3;
+    justify-content: center;
+    min-width: 400px;
+}
+
+.flex-container {
+    background-color: #ffffff;
+    width: 30%;
+    margin: 0 auto;
+    padding: 2% 2% 1% 2%;
+    max-width: 400px;
+    box-shadow: 0px 1px 1px 1px #8a969a;
+}
+
+.request {
+    border-block: 1px solid;
+    border-inline: 1px solid;
+    border-end-end-radius: 3px;
+    border-end-start-radius: 3px;
+    border-start-end-radius: 3px;
+    border-start-start-radius: 3px;
+    margin-top: 5%;
+    padding: 5%;
+    display: flex;
+    flex-direction: row;
+}
+
+.request h4 {
+    margin: 1% 1% 1% 0%;
+}
+
+.request p {
+    margin-bottom: 0;
+    margin-top: 2%;
+}
+
+.approval {
+    background-color: #f2f8f0;
+    border-color: #1d8102;
+}
+
+.denial {
+    background-color: #fff7f7;
+    border-color: #d91515;
+}
+
+.request-container {
+    width: 100%;
+}
+
+.success-icon {
+    color: #1d8102;
+    padding-right: 5px;
+}
+
+.denial-icon {
+    color: #d91515;
+    padding-right: 5px;
+}
+
+.center-icon {
+    width: 100%;
+    text-align: center;
+}
+
+.hidden {
+    display: none;
+    visibility: none;
+}
+
+.hint {
+    color: #545b64;
+}
+
+.aws-icon {
+    margin-bottom: 50px;
+}
diff --git a/packages/core/scripts/build/copyFiles.ts b/packages/core/scripts/build/copyFiles.ts
@@ -29,6 +29,7 @@ const tasks: CopyTask[] = [
     { target: path.join('src', 'test', 'shared', 'cloudformation', 'yaml') },
     { target: path.join('src', 'test', 'codewhisperer', 'service', 'resources') },
     { target: path.join('src', 'testFixtures') },
+    { target: 'src/auth/sso/vue' },
 
     // SSM
     {
diff --git a/packages/core/src/auth/sso/server.ts b/packages/core/src/auth/sso/server.ts
@@ -3,12 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as path from 'path'
 import http from 'http'
 import { getLogger } from '../../shared/logger'
 import { ToolkitError } from '../../shared/errors'
 import { Socket } from 'net'
 import globals from '../../shared/extensionGlobals'
 import { Result } from '../../shared/utilities/result'
+import { FileSystemCommon } from '../../srcShared/fs'
 
 export class MissingPortError extends ToolkitError {
     constructor() {
@@ -45,8 +47,8 @@ export class AuthError extends ToolkitError {
  * back to VSCode
  */
 export class AuthSSOServer {
-    public baseUrl = `http://127.0.0.1`
-    private oauthCallback = '/'
+    private baseUrl = `http://127.0.0.1`
+    private oauthCallback = '/oauth/callback'
     private authenticationFlowTimeoutInMs = 600000
     private authenticationWarningTimeoutInMs = 60000
 
@@ -55,14 +57,18 @@ export class AuthSSOServer {
     private server: http.Server
     private connections: Socket[]
 
-    constructor(private readonly state: string, private readonly vscodeUriPath: string) {
+    constructor(
+        private readonly state: string,
+        private readonly vscodeUriPath: string,
+        private readonly scopes: string[]
+    ) {
         this.authenticationPromise = new Promise<Result<string>>(resolve => {
             this.deferred = { resolve }
         })
 
         this.connections = []
 
-        this.server = http.createServer((req, res) => {
+        this.server = http.createServer(async (req, res) => {
             res.setHeader('Access-Control-Allow-Methods', 'GET')
 
             if (!req.url) {
@@ -76,7 +82,18 @@ export class AuthSSOServer {
                     break
                 }
                 default: {
-                    getLogger().info('AuthSSOServer: missing redirection path name')
+                    if (url.pathname.startsWith('/resources')) {
+                        const iconPath = path.join(globals.context.extensionUri.fsPath, url.pathname)
+                        await this.loadResource(res, iconPath)
+                        break
+                    }
+                    const resourcePath = path.join(
+                        globals.context.extensionUri.fsPath,
+                        'dist/src/auth/sso/vue',
+                        url.pathname
+                    )
+                    await this.loadResource(res, resourcePath)
+                    break
                 }
             }
         })
@@ -132,6 +149,10 @@ export class AuthSSOServer {
     }
 
     public get redirectUri(): string {
+        return `${this.baseLocation}${this.oauthCallback}`
+    }
+
+    private get baseLocation(): string {
         return `${this.baseUrl}:${this.getPort()}`
     }
 
@@ -150,6 +171,36 @@ export class AuthSSOServer {
         }
     }
 
+    private redirect(
+        res: http.ServerResponse,
+        params:
+            | {
+                  productName: string
+                  scopes: string
+                  redirectUri: string
+              }
+            | {
+                  error: string
+              }
+    ) {
+        const redirectUrl = `${this.baseLocation}/index.html?${new URLSearchParams(params).toString()}`
+        res.setHeader('Location', redirectUrl)
+        res.writeHead(302)
+        res.end()
+    }
+
+    private async loadResource(res: http.ServerResponse, resourcePath: string) {
+        try {
+            const file = await FileSystemCommon.instance.readFile(resourcePath)
+            res.writeHead(200)
+            res.end(file)
+        } catch (e) {
+            getLogger().error(`Unable to find ${resourcePath}`)
+            res.writeHead(404)
+            res.end()
+        }
+    }
+
     private handleAuthentication(params: URLSearchParams, res: http.ServerResponse) {
         const error = params.get('error')
         const errorDescription = params.get('error_description')
@@ -176,23 +227,19 @@ export class AuthSSOServer {
         }
 
         this.deferred?.resolve(Result.ok(code))
-        res.setHeader('Content-Type', 'text/html')
-        res.writeHead(200)
-        res.end(`
-            <html>
-                <body>
-                    <p>Authenticated successfully. You may now close this window.</p>
-                    <script>
-                        window.location.replace('${this.vscodeUriPath}')
-                    </script>
-                </body>
-            </html>`)
+
+        this.redirect(res, {
+            productName: 'AWS Toolkit for VSCode',
+            scopes: this.scopes.join(', '),
+            redirectUri: this.vscodeUriPath,
+        })
     }
 
     private handleRequestRejection(res: http.ServerResponse, error: ToolkitError) {
         // Notify the user
-        res.writeHead(400)
-        res.end(error.message)
+        this.redirect(res, {
+            error: error.message,
+        })
 
         // Send the response back to the editor
         this.deferred?.resolve(Result.err(error))
diff --git a/packages/core/src/auth/sso/ssoAccessTokenProvider.ts b/packages/core/src/auth/sso/ssoAccessTokenProvider.ts
@@ -392,7 +392,7 @@ class AuthFlowAuthorization extends SsoAccessTokenProvider {
             clientType: clientRegistrationType,
             scopes: this.profile.scopes,
             grantTypes: [authorizationGrantType, refreshGrantType],
-            redirectUris: ['http://127.0.0.1'],
+            redirectUris: ['http://127.0.0.1/oauth/callback'],
             issuerUrl: this.profile.startUrl,
         })
     }
@@ -401,7 +401,11 @@ class AuthFlowAuthorization extends SsoAccessTokenProvider {
         registration: ClientRegistration
     ): Promise<{ token: SsoToken; registration: ClientRegistration; region: string; startUrl: string }> {
         const state = randomUUID()
-        const authServer = new AuthSSOServer(state, UriHandler.buildUri(authenticationPath).toString())
+        const authServer = new AuthSSOServer(
+            state,
+            UriHandler.buildUri(authenticationPath).toString(),
+            this.profile.scopes ?? []
+        )
 
         try {
             await authServer.start()
diff --git a/packages/core/src/auth/sso/vue/index.html b/packages/core/src/auth/sso/vue/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>AWS Authentication</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" type="text/css" media="screen" href="../../../../resources/css/auth.css" />
+    </head>
+
+    <body>
+        <div class="center-wrapper">
+            <div style="font-size: 3rem" class="center-icon aws-icon">
+                <svg
+                    id="Layer_1"
+                    data-name="Layer 1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="6rem"
+                    :height="`${6 * 0.61}rem`"
+                    viewBox="0 0 50 30"
+                >
+                    <path
+                        id="logo-text"
+                        d="M14.09,10.85a4.7,4.7,0,0,0,.19,1.48,7.73,7.73,0,0,0,.54,1.19.77.77,0,0,1,.12.38.64.64,0,0,1-.32.49l-1,.7a.83.83,0,0,1-.44.15.69.69,0,0,1-.49-.23,3.8,3.8,0,0,1-.6-.77q-.25-.42-.51-1a6.14,6.14,0,0,1-4.89,2.3,4.54,4.54,0,0,1-3.32-1.19,4.27,4.27,0,0,1-1.22-3.2A4.28,4.28,0,0,1,3.61,7.75,6.06,6.06,0,0,1,7.69,6.46a12.47,12.47,0,0,1,1.76.13q.92.13,1.91.36V5.73a3.65,3.65,0,0,0-.79-2.66A3.81,3.81,0,0,0,7.86,2.3a7.71,7.71,0,0,0-1.79.22,12.78,12.78,0,0,0-1.79.57,4.55,4.55,0,0,1-.58.22l-.26,0q-.35,0-.35-.52V2a1.09,1.09,0,0,1,.12-.58,1.2,1.2,0,0,1,.47-.35A10.88,10.88,0,0,1,5.77.32,10.19,10.19,0,0,1,8.36,0a6,6,0,0,1,4.35,1.35,5.49,5.49,0,0,1,1.38,4.09ZM7.34,13.38a5.36,5.36,0,0,0,1.72-.31A3.63,3.63,0,0,0,10.63,12,2.62,2.62,0,0,0,11.19,11a5.63,5.63,0,0,0,.16-1.44v-.7a14.35,14.35,0,0,0-1.53-.28,12.37,12.37,0,0,0-1.56-.1,3.84,3.84,0,0,0-2.47.67A2.34,2.34,0,0,0,5,11a2.35,2.35,0,0,0,.61,1.76A2.4,2.4,0,0,0,7.34,13.38Zm13.35,1.8a1,1,0,0,1-.64-.16,1.3,1.3,0,0,1-.35-.65L15.81,1.51a3,3,0,0,1-.15-.67.36.36,0,0,1,.41-.41H17.7a1,1,0,0,1,.65.16,1.4,1.4,0,0,1,.33.65l2.79,11,2.59-11A1.17,1.17,0,0,1,24.39.6a1.1,1.1,0,0,1,.67-.16H26.4a1.1,1.1,0,0,1,.67.16,1.17,1.17,0,0,1,.32.65L30,12.39,32.88,1.25A1.39,1.39,0,0,1,33.22.6a1,1,0,0,1,.65-.16h1.54a.36.36,0,0,1,.41.41,1.36,1.36,0,0,1,0,.26,3.64,3.64,0,0,1-.12.41l-4,12.86a1.3,1.3,0,0,1-.35.65,1,1,0,0,1-.64.16H29.25a1,1,0,0,1-.67-.17,1.26,1.26,0,0,1-.32-.67L25.67,3.64,23.11,14.34a1.26,1.26,0,0,1-.32.67,1,1,0,0,1-.67.17Zm21.36.44a11.28,11.28,0,0,1-2.56-.29,7.44,7.44,0,0,1-1.92-.67,1,1,0,0,1-.61-.93v-.84q0-.52.38-.52a.9.9,0,0,1,.31.06l.42.17a8.77,8.77,0,0,0,1.83.58,9.78,9.78,0,0,0,2,.2,4.48,4.48,0,0,0,2.43-.55,1.76,1.76,0,0,0,.86-1.57,1.61,1.61,0,0,0-.45-1.16A4.29,4.29,0,0,0,43,9.22l-2.41-.76A5.15,5.15,0,0,1,38,6.78a3.94,3.94,0,0,1-.83-2.41,3.7,3.7,0,0,1,.45-1.85,4.47,4.47,0,0,1,1.19-1.37A5.27,5.27,0,0,1,40.51.29,7.4,7.4,0,0,1,42.6,0a8.87,8.87,0,0,1,1.12.07q.57.07,1.08.19t.95.26a4.27,4.27,0,0,1,.7.29,1.59,1.59,0,0,1,.49.41.94.94,0,0,1,.15.55v.79q0,.52-.38.52a1.76,1.76,0,0,1-.64-.2,7.74,7.74,0,0,0-3.2-.64,4.37,4.37,0,0,0-2.21.47,1.6,1.6,0,0,0-.79,1.48,1.58,1.58,0,0,0,.49,1.18,4.94,4.94,0,0,0,1.83.92L44.55,7a5.08,5.08,0,0,1,2.57,1.6A3.76,3.76,0,0,1,47.9,11a4.21,4.21,0,0,1-.44,1.93,4.4,4.4,0,0,1-1.21,1.47,5.43,5.43,0,0,1-1.85.93A8.25,8.25,0,0,1,42.05,15.62Z"
+                    />
+                    <path
+                        fill="#FF9900"
+                        class="cls-1"
+                        d="M45.19,23.81C39.72,27.85,31.78,30,25,30A36.64,36.64,0,0,1,.22,20.57c-.51-.46-.06-1.09.56-.74A49.78,49.78,0,0,0,25.53,26.4,49.23,49.23,0,0,0,44.4,22.53C45.32,22.14,46.1,23.14,45.19,23.81Z"
+                    />
+                    <path
+                        fill="#FF9900"
+                        class="cls-1"
+                        d="M47.47,21.21c-.7-.9-4.63-.42-6.39-.21-.53.06-.62-.4-.14-.74,3.13-2.2,8.27-1.57,8.86-.83s-.16,5.89-3.09,8.35c-.45.38-.88.18-.68-.32C46.69,25.8,48.17,22.11,47.47,21.21Z"
+                    />
+                </svg>
+            </div>
+            <div class="flex-container">
+                <!-- Section for request approval -->
+                <div id="approved-auth">
+                    <div class="request approval">
+                        <span class="pass-icon icon-2x icon icon-vscode-pass success-icon"></span>
+                        <div class="request-container">
+                            <h4>Request approved</h4>
+                            <p id="approvalMessage" class="hint"></p>
+                        </div>
+                    </div>
+                    <p id="footerText" class="hint"></p>
+                </div>
+
+                <!-- Section for request denial -->
+                <div id="denied-auth" class="hidden">
+                    <div class="request denial">
+                        <span class="icon-2x icon icon-vscode-error denial-icon"></span>
+                        <div class="request-container">
+                            <h4>Request denied</h4>
+                            <p id="errorMessage" class="hint"></p>
+                        </div>
+                    </div>
+                    <p class="hint">You can close this window and re-start the authorization flow</p>
+                </div>
+            </div>
+        </div>
+        <script>
+            window.onload = () => {
+                const params = new URLSearchParams(window.location.search)
+
+                const error = params.get('error')
+                if (error) {
+                    showErrorMessage(error)
+                    return
+                }
+
+                const productName = params.get('productName')
+                const scopes = params.get('scopes')
+                if (!productName || !scopes) {
+                    showErrorMessage('Unable to find productName and scopes')
+                    return
+                }
+
+                document.getElementById(
+                    'approvalMessage'
+                ).innerText = `${productName} can now access your data in ${scopes}.`
+                document.getElementById(
+                    'footerText'
+                ).innerText = `You can close this window and start using ${productName}`
+
+                const redirectUri = params.get('redirectUri')
+                if (redirectUri) {
+                    window.location.replace(redirectUri)
+                }
+
+                function showErrorMessage(errorText) {
+                    document.getElementById('approved-auth').classList.add('hidden')
+                    document.getElementById('denied-auth').classList.remove('hidden')
+                    document.getElementById('errorMessage').innerText = errorText
+                }
+            }
+        </script>
+    </body>
+</html>
diff --git a/packages/core/src/test/credentials/sso/server.test.ts b/packages/core/src/test/credentials/sso/server.test.ts
diff --git a/packages/toolkit/scripts/build/copyFiles.ts b/packages/toolkit/scripts/build/copyFiles.ts

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@ const tasks: CopyTask[] = [`
`29`	`29`	`{ target: path.join('src', 'test', 'shared', 'cloudformation', 'yaml') },`
`30`	`30`	`{ target: path.join('src', 'test', 'codewhisperer', 'service', 'resources') },`
`31`	`31`	`{ target: path.join('src', 'testFixtures') },`
	`32`	`+ { target: 'src/auth/sso/vue' },`
`32`	`33`
`33`	`34`	`// SSM`
`34`	`35`	`{`