feat(auth): add console credentials sign-in option to login webview

Author: keenwilson

packages/core/src/auth/providers/sharedCredentialsProvider.ts

@@ -398,15 +398,16 @@ export class SharedCredentialsProvider implements CredentialsProvider {
 
     private makeConsoleSessionCredentialsProvider() {
         const defaultRegion = this.getDefaultRegion() ?? 'us-east-1'
+        const baseProvider = fromLoginCredentials({
+            profile: this.profileName,
+            clientConfig: {
+                region: this.getDefaultRegion() ?? 'us-east-1',
+            },
+        })
+
         return async () => {
             try {
-                const provider = fromLoginCredentials({
-                    profile: this.profileName,
-                    clientConfig: {
-                        region: defaultRegion,
-                    },
-                })
-                return await provider()
+                return await baseProvider()
             } catch (error) {
                 getLogger().error(
                     'Console login authentication failed for profile %s in region %s: %O',
@@ -440,14 +441,8 @@ export class SharedCredentialsProvider implements CredentialsProvider {
                         'Authentication completed for profile %s, refreshing credentials...',
                         this.profileName
                     )
-                    // Retry with fresh credentials
-                    const refreshedProvider = fromLoginCredentials({
-                        profile: this.profileName,
-                        clientConfig: {
-                            region: defaultRegion,
-                        },
-                    })
-                    return await refreshedProvider()
+                    // Use the same provider instance but get fresh credentials
+                    return await baseProvider()
                 }
                 throw ToolkitError.chain(error, `Failed to get console credentials`, {
                     code: 'FromLoginCredentialProviderError',

packages/core/src/login/webview/vue/amazonq/backend_amazonq.ts

@@ -210,6 +210,10 @@ export class AmazonQLoginWebview extends CommonAuthWebview {
         return []
     }
 
+    override startConsoleCredentialSetup(profileName: string, region: string): Promise<AuthError | undefined> {
+        throw new Error('Method not implemented.')
+    }
+
     override startIamCredentialSetup(
         profileName: string,
         accessKey: string,

packages/core/src/login/webview/vue/backend.ts

@@ -171,6 +171,8 @@ export abstract class CommonAuthWebview extends VueWebview {
         return Auth.instance.authenticateData(data)
     }
 
+    abstract startConsoleCredentialSetup(profileName: string, region: string): Promise<AuthError | undefined>
+
     abstract startIamCredentialSetup(
         profileName: string,
         accessKey: string,

packages/core/src/login/webview/vue/login.vue

@@ -123,6 +123,16 @@
                     :itemType="LoginOption.ENTERPRISE_SSO"
                     class="selectable-item bottomMargin"
                 ></SelectableItem>
+                <SelectableItem
+                    v-if="app === 'TOOLKIT'"
+                    @toggle="toggleItemSelection"
+                    :isSelected="selectedLoginOption === LoginOption.CONSOLE_CREDENTIAL"
+                    :itemId="LoginOption.CONSOLE_CREDENTIAL"
+                    :itemText="'Use credentials from the AWS Console'"
+                    :itemTitle="'Console credentials - recommended'"
+                    :itemType="LoginOption.CONSOLE_CREDENTIAL"
+                    class="selectable-item bottomMargin"
+                ></SelectableItem>
                 <SelectableItem
                     v-if="app === 'TOOLKIT'"
                     @toggle="toggleItemSelection"
@@ -220,9 +230,27 @@
 
         <template v-if="stage === 'AUTHENTICATING'">
             <div class="auth-container-section">
-                <div v-if="app === 'TOOLKIT' && profileName.length > 0" class="header bottomMargin">
+                <div
+                    v-if="app === 'TOOLKIT' && profileName.length > 0 && previousStage === 'AWS_PROFILE'"
+                    class="header bottomMargin"
+                >
                     Connecting to IAM...
                 </div>
+                <div
+                    v-else-if="app === 'TOOLKIT' && profileName.length > 0 && previousStage === 'CONSOLE_PROFILE'"
+                    class="bottomMargin"
+                >
+                    <div class="header">Opening AWS sign-in in your default browser...</div>
+                    <div class="hint">
+                        If you're already signed in to AWS Console, you can select that session. Or follow the steps to
+                        sign in with your AWS account.
+                    </div>
+                    <a
+                        class="hint"
+                        href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html#cli-configure-sign-in-prerequisites"
+                        >Need help? Check setup requirements</a
+                    >
+                </div>
                 <div v-else class="header bottomMargin">Authenticating in browser...</div>
                 <button class="continue-button" v-on:click="handleCancelButton()">Cancel</button>
             </div>
@@ -276,6 +304,56 @@
                 Continue
             </button>
         </template>
+        <template v-if="stage === 'CONSOLE_PROFILE'">
+            <button class="back-button bottomMargin" @click="handleBackButtonClick">
+                <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M4.98667 0.0933332L5.73333 0.786666L1.57333 4.94667H12.0267V5.96H1.57333L5.73333 10.0667L4.98667 10.8133L0.0266666 5.8V5.10667L4.98667 0.0933332Z"
+                        fill="#21A2FF"
+                    />
+                </svg>
+            </button>
+            <div class="header">Use your AWS Console credentials</div>
+            <div class="hint">
+                (Recommended) Use your AWS Console sign-in to get secure, temporary credentials for local development.
+                No need to create or manage access keys.
+            </div>
+            <a class="hint" href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html"
+                >Learn More</a
+            >
+            <div class="title topMargin">Profile Name</div>
+            <div class="hint">Use letters, numbers, underscores, or hyphens</div>
+            <input
+                class="iamInput bottomMargin"
+                type="text"
+                id="profileName"
+                name="profileName"
+                v-model="profileName"
+                placeholder="profile-name"
+                :pattern="'^[a-zA-Z0-9_\\-]+$'"
+                @keydown.enter="handleContinueClick()"
+                @keydown="preventInvalidChars"
+            />
+            <div class="title topMargin">(Optional) Region</div>
+            <select
+                class="regionSelect"
+                id="regions"
+                name="regions"
+                v-model="selectedRegion"
+                @change="handleRegionInput($event)"
+            >
+                <option v-for="region in regions" :key="region.id" :value="region.id">
+                    {{ `${region.name} (${region.id})` }}
+                </option>
+            </select>
+            <button
+                class="continue-button"
+                :disabled="shouldDisableConsoleSessionContinue()"
+                v-on:click="handleContinueClick()"
+            >
+                Continue
+            </button>
+        </template>
     </div>
 </template>
 <script lang="ts">
@@ -290,7 +368,7 @@ import { ssoUrlFormatRegex, ssoUrlFormatMessage, urlInvalidFormatMessage } from
 const client = WebviewClientFactory.create<CommonAuthWebview>()
 
 /** Where the user is currently in the builder id setup process */
-type Stage = 'START' | 'SSO_FORM' | 'CONNECTED' | 'AUTHENTICATING' | 'AWS_PROFILE'
+type Stage = 'START' | 'SSO_FORM' | 'CONNECTED' | 'AUTHENTICATING' | 'AWS_PROFILE' | 'CONSOLE_PROFILE'
 
 function getCredentialId(loginOption: LoginOption) {
     switch (loginOption) {
@@ -300,13 +378,16 @@ function getCredentialId(loginOption: LoginOption) {
             return 'iamIdentityCenter'
         case LoginOption.IAM_CREDENTIAL:
             return 'sharedCredentials'
+        case LoginOption.CONSOLE_CREDENTIAL:
+            return 'consoleCredentials'
         default:
             return undefined
     }
 }
 
 const authUiClickOptionMap = {
     [LoginOption.BUILDER_ID]: 'auth_builderIdOption',
+    [LoginOption.CONSOLE_CREDENTIAL]: 'auth_consoleCredentialsOption',
     [LoginOption.ENTERPRISE_SSO]: 'auth_idcOption',
     [LoginOption.IAM_CREDENTIAL]: 'auth_credentialsOption',
     [LoginOption.IMPORTED_LOGINS]: 'auth_existingAuthOption',
@@ -345,6 +426,7 @@ export default defineComponent({
             importedLogins: [] as ImportedLogin[],
             selectedLoginOption: LoginOption.NONE,
             stage: 'START' as Stage,
+            previousStage: '' as Stage,
             regions: [] as Region[],
             startUrlError: '',
             startUrlWarning: '',
@@ -445,6 +527,10 @@ export default defineComponent({
                 } else if (this.selectedLoginOption === LoginOption.IAM_CREDENTIAL) {
                     this.stage = 'AWS_PROFILE'
                     this.$nextTick(() => document.getElementById('profileName')!.focus())
+                } else if (this.selectedLoginOption === LoginOption.CONSOLE_CREDENTIAL) {
+                    this.stage = 'CONSOLE_PROFILE'
+                    this.$nextTick(() => document.getElementById('profileName')!.focus())
+                    await client.storeMetricMetadata({ awsRegion: this.selectedRegion })
                 }
             } else if (this.stage === 'SSO_FORM') {
                 if (this.shouldDisableSsoContinue()) {
@@ -463,6 +549,7 @@ export default defineComponent({
                 if (this.shouldDisableIamContinue()) {
                     return
                 }
+                this.previousStage = this.stage
                 this.stage = 'AUTHENTICATING'
                 const error = await client.startIamCredentialSetup(this.profileName, this.accessKey, this.secretKey)
                 if (error) {
@@ -471,6 +558,19 @@ export default defineComponent({
                 } else {
                     this.stage = 'CONNECTED'
                 }
+            } else if (this.stage === 'CONSOLE_PROFILE') {
+                if (this.shouldDisableConsoleSessionContinue()) {
+                    return
+                }
+                this.previousStage = this.stage
+                this.stage = 'AUTHENTICATING'
+                const error = await client.startConsoleCredentialSetup(this.profileName, this.selectedRegion)
+                if (error) {
+                    this.stage = 'START'
+                    void client.errorNotification(error)
+                } else {
+                    this.stage = 'CONNECTED'
+                }
             }
             void client.emitUiClick('auth_continueButton')
         },
@@ -584,7 +684,7 @@ export default defineComponent({
             } else if (this.app === 'AMAZONQ') {
                 this.selectedLoginOption = LoginOption.BUILDER_ID
             } else if (this.app === 'TOOLKIT') {
-                this.selectedLoginOption = LoginOption.ENTERPRISE_SSO
+                this.selectedLoginOption = LoginOption.CONSOLE_CREDENTIAL
             }
             this.$forceUpdate()
         },
@@ -594,6 +694,20 @@ export default defineComponent({
         shouldDisableIamContinue() {
             return this.profileName.length <= 0 || this.accessKey.length <= 0 || this.secretKey.length <= 0
         },
+        shouldDisableConsoleSessionContinue() {
+            const profilePattern = /^[a-zA-Z0-9_-]+$/
+            return this.profileName.length <= 0 || !this.selectedRegion || !profilePattern.test(this.profileName)
+        },
+        preventInvalidChars(event: KeyboardEvent) {
+            // Allow control keys (backspace, delete, arrows, etc)
+            if (event.key.length === 1) {
+                // Only check single characters
+                // Only allow letters, numbers, underscore, and hyphen
+                if (!/^[a-zA-Z0-9_\-]$/.test(event.key)) {
+                    event.preventDefault()
+                }
+            }
+        },
     },
 })
 

packages/core/src/login/webview/vue/selectableItem.vue

@@ -12,6 +12,21 @@
         @mouseout="isHovering = false"
     >
         <div class="icon">
+            <svg
+                v-if="itemType === LoginOption.CONSOLE_CREDENTIAL"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    class="svg-path"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M1.50024 1H14.5002L15.0002 1.5V4.5V13.5L14.5002 14H1.50024L1.00024 13.5V4.5V1.5L1.50024 1ZM2.00024 5V13H14.0002V5H2.00024ZM2.00024 4H14.0002V2H2.00024V4Z"
+                />
+            </svg>
             <svg
                 v-if="itemType === LoginOption.BUILDER_ID"
                 width="16"

packages/core/src/login/webview/vue/toolkit/backend_toolkit.ts

@@ -86,6 +86,37 @@ export class ToolkitLoginWebview extends CommonAuthWebview {
         })
     }
 
+    async startConsoleCredentialSetup(profileName: string, region: string): Promise<AuthError | undefined> {
+        getLogger().debug(`called startConsoleCredentialSetup()`)
+        const runAuth = async () => {
+            try {
+                // Execute AWS CLI login command
+                await vscode.commands.executeCommand('aws.toolkit.auth.consoleLogin', profileName, region)
+
+                // Hide auth view and show resource explorer
+                await setContext('aws.explorer.showAuthView', false)
+                await this.showResourceExplorer()
+
+                return undefined // Success case returns undefined
+            } catch (err) {
+                getLogger().error('Failed setting up authentication with console credentials : %O', err)
+                return {
+                    id: this.id,
+                    text: err instanceof Error ? err.message : String(err),
+                }
+            }
+        }
+        const result = await runAuth()
+        this.storeMetricMetadata({
+            // @ts-ignore wait for https://github.com/aws/aws-toolkit-common/pull/1108
+            credentialSourceId: 'consoleCredentials',
+            authEnabledFeatures: 'awsExplorer',
+            ...this.getResultForMetrics(result),
+        })
+        this.emitAuthMetric()
+        return result
+    }
+
     async startIamCredentialSetup(
         profileName: string,
         accessKey: string,

packages/core/src/login/webview/vue/types.ts

@@ -36,6 +36,7 @@ export type AuthFlowState = (typeof AuthFlowStates)[keyof typeof AuthFlowStates]
 export enum LoginOption {
     NONE,
     BUILDER_ID,
+    CONSOLE_CREDENTIAL,
     ENTERPRISE_SSO,
     IAM_CREDENTIAL,
     IMPORTED_LOGINS,