Closed jssuttles closed 2 years ago
amhinson
commented
3 years ago Thanks for all the info! Could you also share a code snippet of your usage? Judging from your dependencies, it looks like you might be using the Amplify UI Components for Vue, but I'd like to confirm first.
jssuttles
commented
3 years ago AmplifyModule.ts
import Amplify, {Auth} from 'aws-amplify';
import '@aws-amplify/ui-vue';
/**
* Configure Amplify
*
* @param region - AWS region
* @param poolId - id of the pool
* @param clientId - id of the client within AWS user pool
*/
export default (region:string, poolId:string, clientId:string):void => {
Amplify.configure({
aws_project_region: region,
aws_cognito_identity_pool_id: `${region}:${poolId}`,
aws_cognito_region: region,
aws_user_pools_id: `${region}_${poolId}`,
aws_user_pools_web_client_id: clientId
});
Auth.configure({
storage: sessionStorage
});
};AmplifyComponent.vue
<script lang="ts">
import {Component, Prop} from 'vue-property-decorator';
import BaseComponent from './BaseComponent.vue';
import configureAWS from '../helpers/AmplifyModule';
@Component({
name: 'AmplifyComponent'
})
export default class AmplifyComponent extends BaseComponent {
@Prop({required:true, type:String})
readonly awsRegion!:string;
@Prop({required:true, type:String})
readonly awsUserPoolId!:string;
@Prop({required:true, type:String})
readonly awsClientId!:string;
/**
* On created, run this
*/
configureCognito():void {
configureAWS(this.awsRegion, this.awsUserPoolId, this.awsClientId);
}
}
</script>Login.vue
<template>
<!-- This v-app does not need the v-application--wrap and classes since it is standalone -->
<v-app class="vue">
<v-main class="d-flex align-center">
<div class="d-flex justify-center">
<v-card
class="login-box pt-8 rounded-lg"
elevation="0"
outlined
>
<v-card-text>
<v-img
class="mx-2"
contain
max-height="30"
src="/dist/images/medicom_logo_blue.svg"
/>
<amplify-authenticator
username-alias="email"
>
<amplify-sign-in
slot="sign-in"
hide-sign-up
username-alias="email"
/>
<!-- The following does not work. it might after an update -->
<!-- <amplify-confirm-sign-in-->
<!-- slot="confirm-sign-in"-->
<!-- :header-text="labels.SignInHeaderText"-->
<!-- />-->
<amplify-forgot-password
slot="forgot-password"
:send-button-text="labels.SendResetCodeButton"
username-alias="email"
/>
<!-- The following does not work. it might after an update -->
<!-- <amplify-totp-setup-->
<!-- slot="totp-setup"-->
<!-- header-text="Setup Multi-Factor Authentication App"-->
<!-- issuer="Medicom"-->
<!-- :user.prop="user"-->
<!-- />-->
<div
v-if="authState === AuthState.SignedIn"
class="text-center mt-8"
>
<v-progress-circular
:color="colors.Primary"
indeterminate
size="70"
width="7"
/>
</div>
</amplify-authenticator>
<div
v-if="authState === AuthState.SignIn && includeFederatedSignIn"
>
<v-divider></v-divider>
<h2>{{labels.SingleSignIn}}</h2>
<v-btn
:color="colors.Primary"
text
@click="federatedSignIn"
>
{{federatedSignInDetails.label}}
</v-btn>
</div>
</v-card-text>
<v-container
v-if="this.authState === AuthState.TOTPSetup">
<h4>Instructions:</h4>
<div>1. Using your smart phone download/open an Authenticator App.</div>
<div>2. Scan the qr-code to create a new verification code.</div>
<div>3. Enter the security code provided on the app.</div>
<div>4. Click the Verify Security Token button</div>
</v-container>
</v-card>
</div>
</v-main>
</v-app>
</template>
<script lang="ts">
import {Component, Prop} from 'vue-property-decorator';
import {AuthState, onAuthUIStateChange} from '@aws-amplify/ui-components';
import {CognitoUser} from 'amazon-cognito-identity-js';
import {labels, urls} from '../helpers/LoginText';
import AmplifyComponent from '../components/AmplifyComponent.vue';
import {VViewNames} from '../helpers/names';
import {Auth} from 'aws-amplify';
type FederatedSignInDetails = {
cognitoDomain:string,
providerName:string,
label:string,
redirectUri:string,
scope:string
}
@Component({
name: VViewNames.Login,
})
export default class Login extends AmplifyComponent {
@Prop({default: false, type: Boolean})
readonly includeFederatedSignIn!: boolean;
@Prop({type: Object})
readonly federatedSignInDetails!:FederatedSignInDetails|undefined;
loaded = false;
authState: AuthState = AuthState.SignIn;
user:CognitoUser|null=null;
/**
* Const AuthState
*/
get AuthState():typeof AuthState {
return AuthState;
}
/**
* Const labels
*/
get labels():typeof labels {
return labels;
}
/**
* On created event
*/
created():void {
this.configureCognito();
// todo: remove after migration period expired.
Auth.configure( {
authenticationFlowType: 'USER_PASSWORD_AUTH'
});
onAuthUIStateChange(async (authState:AuthState, authData) => {
this.authState = authState;
this.user = authData as CognitoUser;
if(this.authState !== AuthState.SignedIn || !this.user){
return;
}
const signInUserSession = this.user.getSignInUserSession();
if (!signInUserSession) {
// TODO throw error
return;
}
const idToken = signInUserSession.getIdToken().getJwtToken();
const accessToken = signInUserSession.getAccessToken().getJwtToken();
location.replace(`/${urls.medicomSignIn}?idToken=${idToken}&accessToken=${accessToken}`);
});
}
/**
* Trigger federated sign in page
*/
federatedSignIn():void {
location.href = `https://${this.federatedSignInDetails.cognitoDomain}.auth.${this.awsRegion}.amazoncognito.com/oauth2/authorize?identity_provider=${this.federatedSignInDetails.providerName}&client_id=${this.awsClientId}&response_type=token&scope=${this.federatedSignInDetails.scope}&redirect_uri=${this.federatedSignInDetails.redirectUri}`;
}
}
</script>
<style lang="scss">
:root {
--amplify-primary-color: #002CF0;
--amplify-primary-tint: #6150F9;
--amplify-primary-shade: #0020E2;
--amplify-font-family: Roboto, sans-serif;
--amplify-text-xxs: 1rem;
--amplify-text-xs: 1rem;
--amplify-text-sm: 1rem;
--amplify-text-md: 1.25rem;
--amplify-text-lg: 1.50rem;
--amplify-text-xl: 1.75rem;
--amplify-text-xxl: 2rem;
}
amplify-authenticator {
--container-height: 0;
--box-shadow: 0;
--min-width:0;
}
.login-box {
width: 410px;
}
</style>
lorentzca
commented
3 years ago This problem is also reproduced with the @aws-amplify/ui-react 1.2.9. It seems to occur when using TOTP software token MFA. It did not occur when using SMS text message MFA.
Milan-Shah
commented
2 years ago @jssuttles We have recently launched a newer version of Authenticator UI component and a major version for @aws-amplify/ui-react@2.1.0, which has a support for custom styling, zero config, sign up attributes, parity across all web framework, social sign in, password manager support and many more. If you still have any issues, please let us know and we are here to help :)
Before opening, please confirm:
Is this a production issue?
JavaScript Framework
Vue
Amplify APIs
Authentication
Amplify Categories
storage
Environment information
Describe the bug
The user is blocked from completing the login flow after being given a temporary password and being prompted to enter a new password.
Expected behavior
The user should be allowed to continue the login flow.
Reproduction steps
A user logs in with their initial password (Password A) and logs out. An admin resets the password for the user to a new password (Password B). The user receives an email with Password B. The user enters Password B into the login screen. The user enters their new password (Password C) in the change password screen. And clicks Change. Nothing happens.
At this point, the user has changed their password but is not prompted to continue the login flow. There is an error in the console.
Code Snippet
Log output
aws-exports.js
No response
Manual configuration
No response
Additional configuration
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response