authWebview: Builder Id sign in for CC + CW (#3465)

What this change includes

    Users can signup/signin to builder ID for CC or CW

    They will be guided through the existing signin flow

    CC and CW signin must be done individually. User will
    need to complete signin for each.

    When signed in, a 'signout' option is shown, and if
    clicked all of BuilderID will be signed out and
    CC + CW will be updated in the UI

    Listening to events from the backend. Eg: when
    a user interacts with builder id auth using an
    alternative to the webview, the webview will
    update with the latest status.


Signed-off-by: Nikolas Komonen <[email protected]>

Author: nkomonen-amazon

src/codecatalyst/auth.ts

@@ -70,6 +70,10 @@ export class CodeCatalystAuthenticationProvider {
         return this.secondaryAuth.isUsingSavedConnection
     }
 
+    public isConnectionValid(): boolean {
+        return this.activeConnection !== undefined && !this.secondaryAuth.isConnectionExpired
+    }
+
     // Get rid of this? Not sure where to put PAT code.
     public async getPat(client: CodeCatalystClient, username = client.identity.name): Promise<string> {
         const stored = await this.storage.getPat(username)
@@ -225,9 +229,13 @@ export class CodeCatalystAuthenticationProvider {
         }
     }
 
-    private static instance: CodeCatalystAuthenticationProvider
+    static #instance: CodeCatalystAuthenticationProvider | undefined
+
+    public static get instance(): CodeCatalystAuthenticationProvider | undefined {
+        return CodeCatalystAuthenticationProvider.#instance
+    }
 
     public static fromContext(ctx: Pick<vscode.ExtensionContext, 'secrets' | 'globalState'>) {
-        return (this.instance ??= new this(new CodeCatalystAuthStorage(ctx.secrets), ctx.globalState))
+        return (this.#instance ??= new this(new CodeCatalystAuthStorage(ctx.secrets), ctx.globalState))
     }
 }

src/codecatalyst/explorer.ts

@@ -17,7 +17,7 @@ import { ConnectedDevEnv, getDevfileLocation, getThisDevEnv } from './model'
 import * as codecatalyst from './model'
 import { getLogger } from '../shared/logger'
 
-const getStartedCommand = Commands.register(
+export const getStartedCommand = Commands.register(
     'aws.codecatalyst.getStarted',
     async (authProvider: CodeCatalystAuthenticationProvider) => {
         const conn = authProvider.activeConnection ?? (await authProvider.promptNotConnected())

src/codewhisperer/util/authUtil.ts

@@ -92,21 +92,24 @@ export class AuthUtil {
         return this.conn !== undefined && this.usingEnterpriseSSO
     }
 
+    public isBuilderIdInUse(): boolean {
+        return this.conn !== undefined && isBuilderIdConnection(this.conn)
+    }
+
     public async connectToAwsBuilderId() {
-        const existingConn = (await this.auth.listConnections()).find(isBuilderIdConnection)
-        if (!existingConn) {
-            const newConn = await this.auth.createConnection(awsBuilderIdSsoProfile)
-            await this.secondaryAuth.useNewConnection(newConn)
+        let conn = (await this.auth.listConnections()).find(isBuilderIdConnection)
 
-            return newConn
+        if (!conn) {
+            conn = await this.auth.createConnection(awsBuilderIdSsoProfile)
+        } else if (!isValidCodeWhispererConnection(conn)) {
+            conn = await this.secondaryAuth.addScopes(conn, defaultScopes)
         }
 
-        if (isValidCodeWhispererConnection(existingConn)) {
-            await this.secondaryAuth.useNewConnection(existingConn)
-            return existingConn
+        if (this.auth.getConnectionState(conn) === 'invalid') {
+            conn = await this.auth.reauthenticate(conn)
         }
 
-        return this.secondaryAuth.addScopes(existingConn, defaultScopes)
+        return this.secondaryAuth.useNewConnection(conn)
     }
 
     public async connectToEnterpriseSso(startUrl: string, region: string) {

src/credentials/auth.ts

@@ -1061,7 +1061,7 @@ const switchConnections = Commands.register('aws.auth.switchConnections', (auth:
     }
 })
 
-async function signout(auth: Auth, conn: Connection | undefined = auth.activeConnection) {
+export async function signout(auth: Auth, conn: Connection | undefined = auth.activeConnection) {
     if (conn?.type === 'sso') {
         // TODO: does deleting the connection make sense UX-wise?
         // this makes it disappear from the list of available connections

src/credentials/vue/authForms/baseAuth.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { AuthStatus } from './shared.vue'
+import { AuthFormId } from './types.vue'
 
 export default defineComponent({
     emits: ['auth-connection-updated'],
@@ -10,22 +12,9 @@ export default defineComponent({
     },
 })
 
-export interface AuthStatus {
-    /**
-     * Returns true if the auth is successfully connected.
-     */
-    isAuthConnected(): Promise<boolean>
-}
-
 export class UnimplementedAuthStatus implements AuthStatus {
     isAuthConnected(): Promise<boolean> {
         return Promise.resolve(false)
     }
 }
-
-export const authForms = {
-    CREDENTIALS: 'CREDENTIALS',
-} as const
-
-export type AuthFormId = (typeof authForms)[keyof typeof authForms]
 </script>

src/credentials/vue/authForms/manageBuilderId.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="auth-form container-background border-common" id="builder-id-form">
+        <div v-show="canShowAll">
+            <FormTitle :isConnected="isConnected">AWS Builder ID</FormTitle>
+
+            <div v-if="stage === stages.START">
+                <div class="form-section">
+                    <div>
+                        With AWS Builder ID, sign in for free without an AWS account.
+                        <a href="https://docs.aws.amazon.com/signin/latest/userguide/sign-in-aws_builder_id.html"
+                            >Read more.</a
+                        >
+                    </div>
+                </div>
+
+                <div class="form-section">
+                    <button v-on:click="startSignIn()">Sign up or Sign in</button>
+                </div>
+            </div>
+
+            <div v-if="stage === stages.WAITING_ON_USER">
+                <div class="form-section">
+                    <div>Follow instructions...</div>
+                </div>
+            </div>
+
+            <div v-if="stage === stages.CONNECTED">
+                <div class="form-section">
+                    <div v-on:click="signout()" style="cursor: pointer; color: #75beff">Sign out</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { PropType, defineComponent } from 'vue'
+import BaseAuthForm from './baseAuth.vue'
+import FormTitle from './formTitle.vue'
+import { AuthStatus } from './shared.vue'
+import { WebviewClientFactory } from '../../../webviews/client'
+import { AuthWebview } from '../show'
+import authForms, { AuthFormId } from './types.vue'
+
+const client = WebviewClientFactory.create<AuthWebview>()
+
+/** Where the user is currently in the builder id setup process */
+export const stages = {
+    START: 'START',
+    WAITING_ON_USER: 'WAITING_ON_USER',
+    CONNECTED: 'CONNECTED',
+} as const
+type BuilderIdStage = (typeof stages)[keyof typeof stages]
+
+export default defineComponent({
+    name: 'CredentialsForm',
+    extends: BaseAuthForm,
+    components: { FormTitle },
+    props: {
+        state: {
+            type: Object as PropType<BaseBuilderIdState>,
+            required: true,
+        },
+        stages: {
+            type: Object as PropType<typeof stages>,
+            default: stages,
+        },
+    },
+    data() {
+        return {
+            stage: stages.START as BuilderIdStage,
+            isConnected: false,
+            builderIdCode: '',
+            canShowAll: false,
+        }
+    },
+    async created() {
+        await this.update()
+        this.canShowAll = true
+    },
+    methods: {
+        async startSignIn() {
+            this.stage = this.stages.WAITING_ON_USER
+            await this.state.startBuilderIdSetup()
+            await this.update()
+        },
+        async update() {
+            this.stage = await this.state.stage()
+            this.isConnected = await this.state.isAuthConnected()
+            this.emitAuthConnectionUpdated(this.state.id)
+        },
+        async signout() {
+            await this.state.signout()
+
+            this.update()
+        },
+    },
+})
+
+/**
+ * Manages the state of Builder ID.
+ */
+abstract class BaseBuilderIdState implements AuthStatus {
+    protected _stage: BuilderIdStage = stages.START
+
+    abstract get id(): AuthFormId
+    protected abstract _startBuilderIdSetup(): Promise<void>
+    abstract isAuthConnected(): Promise<boolean>
+
+    async startBuilderIdSetup(): Promise<void> {
+        this._stage = stages.WAITING_ON_USER
+        return this._startBuilderIdSetup()
+    }
+
+    async stage(): Promise<BuilderIdStage> {
+        const isAuthConnected = await this.isAuthConnected()
+        this._stage = isAuthConnected ? stages.CONNECTED : stages.START
+        return this._stage
+    }
+
+    async signout(): Promise<void> {
+        await client.signoutBuilderId()
+    }
+}
+
+export class CodeWhispererBuilderIdState extends BaseBuilderIdState {
+    override get id(): AuthFormId {
+        return authForms.BUILDER_ID_CODE_WHISPERER
+    }
+
+    override isAuthConnected(): Promise<boolean> {
+        return client.isCodeWhispererBuilderIdConnected()
+    }
+
+    protected override _startBuilderIdSetup(): Promise<void> {
+        return client.startCodeWhispererBuilderIdSetup()
+    }
+}
+
+export class CodeCatalystBuilderIdState extends BaseBuilderIdState {
+    override get id(): AuthFormId {
+        return authForms.BUILDER_ID_CODE_CATALYST
+    }
+
+    override isAuthConnected(): Promise<boolean> {
+        return client.isCodeCatalystBuilderIdConnected()
+    }
+
+    protected override _startBuilderIdSetup(): Promise<void> {
+        return client.startCodeCatalystBuilderIdSetup()
+    }
+}
+</script>
+<style>
+@import './sharedAuthForms.css';
+@import '../shared.css';
+
+#builder-id-form {
+    width: 250px;
+    height: fit-content;
+}
+</style>

src/credentials/vue/authForms/manageCredentials.vue

@@ -50,11 +50,12 @@
 </template>
 <script lang="ts">
 import { PropType, defineComponent } from 'vue'
-import BaseAuthForm, { AuthStatus } from './baseAuth.vue'
+import BaseAuthForm from './baseAuth.vue'
 import FormTitle from './formTitle.vue'
 import { SectionName, StaticProfile } from '../../types'
 import { WebviewClientFactory } from '../../../webviews/client'
 import { AuthWebview } from '../show'
+import { AuthStatus } from './shared.vue'
 
 const client = WebviewClientFactory.create<AuthWebview>()
 

src/credentials/vue/authForms/shared.vue

@@ -1,13 +1,23 @@
 <script lang="ts">
+import { CodeCatalystBuilderIdState, CodeWhispererBuilderIdState } from './manageBuilderId.vue'
 import { CredentialsState } from './manageCredentials.vue'
-import { authForms } from './baseAuth.vue'
+import authForms from './types.vue'
 
 /**
  * The state instance of all auth forms
  */
 const authFormsState = {
     [authForms.CREDENTIALS]: new CredentialsState(),
+    [authForms.BUILDER_ID_CODE_WHISPERER]: new CodeWhispererBuilderIdState(),
+    [authForms.BUILDER_ID_CODE_CATALYST]: new CodeCatalystBuilderIdState(),
 } as const
 
+export interface AuthStatus {
+    /**
+     * Returns true if the auth is successfully connected.
+     */
+    isAuthConnected(): Promise<boolean>
+}
+
 export default authFormsState
 </script>

src/credentials/vue/authForms/sharedAuthForms.css

@@ -21,6 +21,7 @@
 
 .auth-form-title {
     font-size: 14px;
+    font-weight: bold;
     color: #ffffff;
 }
 
@@ -54,3 +55,8 @@ input[data-invalid='true']:focus {
     /* Ensures the border stays red even when selected */
     outline: none !important;
 }
+
+/* Remove underline from anchor elements */
+a {
+    text-decoration: none;
+}

src/credentials/vue/authForms/types.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+export const authForms = {
+    CREDENTIALS: 'CREDENTIALS',
+    BUILDER_ID_CODE_WHISPERER: 'BUILDER_ID_CODE_WHISPERER',
+    BUILDER_ID_CODE_CATALYST: 'BUILDER_ID_CODE_CATALYST',
+} as const
+
+export type AuthFormId = (typeof authForms)[keyof typeof authForms]
+
+export default authForms
+</script>