daikiojm / angular-aws-amplify Goto Github PK
View Code? Open in Web Editor NEWSample implementation for AWS Amplify in Angular project
Sample implementation for AWS Amplify in Angular project
First of all, I would like to thank you for this great simple code, I am wondering about the authorization workflow, when the user sign up and confirm his account, he must be redirected to the login page and login into his account which I think is an unnecessary step, how can I make the user get signed in after the confirmation without having to type the user name and password and be redirected to the login page?
There is an issue where if Cognito presents the user with an authorization challenge, such as "NEW_PASSWORD_REQUIRED", the user will not be fully authenticated but the application incorrectly believes a user is logged in until it is reloaded/refreshed.
Problem starts here (auth.service.ts line 34):
public signIn(email, password): Observable<any> {
return fromPromise(Auth.signIn(email, password))
.pipe(
tap(() => this.loggedIn.next(true))
);
}
If there is a challenge like "NEW_PASSWORD_REQUIRED", loggedIn is still set to true even though the authentication process has not completed.
Then, here (login.component.ts line 31):
onSubmitLogin(value: any) {
const email = value.email, password = value.password;
this.auth.signIn(email, password)
.subscribe(
result => {
this.router.navigate(['/']);
},
error => {
console.log(error);
});
}
When onSubmitLogin gets the result from the auth service signIn function, there is no error, so the login component also continues on as though the user authentication was successful.
This is particularly critical when building a site with Cognito user pools where there is no open registration and/or admins create users manually. All new Cognito users created manually will encounter a NEW_PASSWORD_REQUIRED challenge upon attempting to authenticate.
Here is a suggestion...
My auth service signIn function:
public signIn(email, password): Observable<any> {
return fromPromise(Auth.signIn(email, password)).pipe(
tap((result) => {
if(result.constructor.name === "CognitoUser") {
this.loggedIn.next(true);
}
else {
//Rise to the challenge
}
}, (error) => {
//Handle any errors.
})
);
}
And my login component onSubmit:
onSubmitLogin(value: any) {
const email = value.email, password = value.password;
this.auth.signIn(email, password)
.subscribe(
result => {
if(result.constructor.name === "CognitoUser") {
this.messenger.add("Congrats! You've been authenticated", "success");
}
else {
//Rise to the challenge
}
},
error => {
console.log(error);
});
}
When a result is received without error, it now checks to ensure there is a CognitoUser returned. If not, then code can be implemented to deal with challenge scenarios.
Can update the example to angular 6 ?
I noticed the environment file but how did you generate it and how can the angular app protect this environment file from the public, since it contains sensitive keys.
Hi.
I would appreciate it if you also create unit tests for services, components and modules so that I can use it as a baseline.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.