DEV Community

The Complete Guide to User Authentication with the Amplify Framework

Nader Dabit on May 01, 2019

The AWS Amplify Authentication modules provide Authentication APIs and building blocks for developers who want to create apps with real-world pro...
Collapse
 
chrismowbray92 profile image
Chris Mowbray

Hey, great article! any news on the react native version?

Collapse
 
dabit3 profile image
Nader Dabit

React Native article is way late, but available at dev.to/dabit3/the-complete-react-n...

Collapse
 
pperron profile image
pperron

Any update on the React Native version ?

Been trying to make it work but stuck at when the hosted UI (using withOAuth + Amplify) get me back to my app (hard link), Hub.Listen doesn't seems to fire with the signIn event, so my app doesn't know that the user is logged or not. If I check on Amazon Incognito, the Facebook user as been added to the pool, so that part seems ok.

Thanks !

Collapse
 
dabit3 profile image
Nader Dabit
Collapse
 
josephgoksu profile image
Joseph Goksu

If you get an error for Auth.federatedSignIn({ provider: 'Google' })

try this ⬇️
import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";

Auth.federatedSignIn({
provider: CognitoHostedUIIdentityProvider.Google
});

Collapse
 
padunk profile image
Abraham A. Agung

Hi Nader,
This is awesome, just like what we need in time.
But I encounter some problems, why is the CLI not working in Git Bash?
And when I use windows command prompt, and type amplify add auth it will always return to my prompt after the first step.
I use windows 10 and latest CLI.

Thanks.

Collapse
 
dabit3 profile image
Nader Dabit

Hi Abraham, I'm sorry you're having issues with the CLI in that environment. I would suggest opening a GitHub issue at github.com/aws-amplify/amplify-cli... & giving us your system & env info to see if we can figure out what issue you're having.

Collapse
 
padunk profile image
Abraham A. Agung

Hello again,
I check Github and found the answer.
Turns out I need to update NodeJS to version 11 or 12.
I don't know why this is not working with Node10, but everything seems good now.

Thanks.

Collapse
 
lanceharper profile image
Lance Harper

Does Amplify support Cognito + a custom OIDC provider (e.g. yahoo/twitch/salesforce?) such that the access token from the OIDC provider (not Cognito) will be returned for interacting with said OIDC's API? I only receive tokens for use with Cognito which is only half of what I'm trying to obtain.

Collapse
 
arelaxtest profile image
arelaxtest

No, you also have to create your own Lambda function to do that: such that github.com/arelaxend/fays-openid

Collapse
 
dancouper profile image
Dan Couper

Cheers for this: I hadn't thought to look at Hub to support Auth, it very neatly solves one of the problems I'm working on at the minute, this came at just the right time!

I've found Amplify very useful so far: only major pain point has been that the CLI has proven effectively useless for me, as the way we have our resources set up means I never want automatic provisioning -- being able to say to the CLI "I want to use this AppSync API + this Cognito Pool + etc etc" would be incredibly useful (particularly w/r/t generating the configs + the AppSync GQL codegen functionality).

Collapse
 
dabit3 profile image
Nader Dabit

Hey Dan, thanks for the feedback, this is great! I'm passing this on directly to the team. Hopefully we can get something figured out & on our roadmap that will address this.

Collapse
 
syang profile image
syang

Hi Nader, thanks a lot for providing the simple/short article to bring beginner up to speed.

Can you give a detailed under the hood mechanism explanation to how 'the redirect signin URI: localhost:3000/' is used during the sign-in process? In a production code, I assume this URI should be changed, right? But to be changed to what?

I guess I would like to understand how the following three URL and web app / web browser interact during the Oauth signed process to fully understand it.

Can you give a detailed walk through of how each URI during a life of Social Sign In process.

Thanks

Collapse
 
arelaxtest profile image
arelaxtest

For those who have issue with the redirect URLs or want to add more than one redirect URLs for dev, prod, localhost, here is a closed topic: github.com/aws-amplify/amplify-js/...

You can find a demo here that also work in localhost / online: master.d3h5j4begww46c.amplifyapp.com/
And a github fork (from dabit3): github.com/arelaxtest/amplify-auth...

Collapse
 
adrienfabre profile image
Adrien Fabre

Hi Nader,

Thank you for this article, it helped me a lot.

I am trying to adapt it, sign up with Google (OAuth) or with Cognito (email + password).

My issue is that if I sign up with Google and then Cognito, I create a duplicate in my User Pool. Also, if I sign up with Cognito and then Google, it also create a duplicate in my User Pool.

However, if I try to sign up twice with Cognito, it would notice the email already exist.

I am trying to find a good way to prevent those duplicate, or by raising an error or by merging the duplicate but I have not found out, would you have suggestions?

Thank you

Collapse
 
rudyhadoux profile image
rudyhadoux

If you use Auth.federatedSignIn({provider: 'Google'}), you don't have to use anything else.
Why twice ?

Collapse
 
indrajitb profile image
indrajitb

Hi rudyhadoux,
If you sign in with Facebook and Google with same email, it creates two identities.
Thanks.

Thread Thread
 
rudyhadoux profile image
rudyhadoux

Two Cognito identities with the same email ?
Is it possible ?

Collapse
 
indrajitb profile image
indrajitb

Hi Adrien,

Did you find a solution to this problem?

Thanks.

Collapse
 
alsmith808 profile image
Alan Smith

Hi Nader,

Thanks for all your Amplify material, really helping me a lot.  Quick question, this could possibly be a problem on my end as I was having an issue with css not loading correctly in another project also.  Anyway I have added Cognito to my local project which I'm mocking, but my Cognito login screen is appearing with no css, have you or anyone come across this problem, the signup has no link so I cant signup, thank you!

Alan

Collapse
 
pandaa880 profile image
Prashant Chaudhari • Edited

Great article !
Is there any way so that i don't have to use Amazon Cognito ? We have separate user authentication system and I need to upload files from frontend to s3 directly.

If I don't add auth in the configure part then i am getting No Credentials. So Can i use normal aws IAM user to access S3 using Amplify ?

Collapse
 
kalinchernev profile image
Kalin Chernev

Hi Nader,

Thank you for the detailed tutorial and your hard on making AWS Amplify more accessible for developers with so many examples on the web!

I want to ask if it's possible and how to take the results from this tutorial and add a GraphQL api which can be accessed by any authenticated user?

I am able to provide a repository with current state of a working project: github.com/kalinchernev/knowledge-...

The problem I'm having here is that when I change the security scheme of the API from API key to Cognito user pool, I'm getting "No current user" on users authenticated with the Google login.

I found an older issue here github.com/aws-amplify/amplify-js/... which feels like an important thread, but with unclear solution or best practice at the moment.

Is it that manual updates are still needed in the console and configuration files? Is it that we need to rely on multiple authentication schemes on AppSync GraphQL layer? How to make use of that through the Amplify CLI if it's the case? Maybe I need to use GraphQL transform, but as far as I read @auth is not match for both api key and user pools neither...

Any guidance is welcome!

Collapse
 
ankurzibo profile image
ankur-zibo • Edited

Hi Nader,
It was really helpful. Thanks

I tried to integrate my React code to Cognito User Pool through Amplify SDK.
I have a question around the security of the password we are passing to Cognito during SignUp and Reset Password flow. I see that during the SignIn flow, SRP is used while for signUp and reset password it is passed as plain text. Is there a way to encode and send it to Cognito?

Collapse
 
valenciahq profile image
Alejandro Valencia

hi! is there a way to avoid "uncaught (in promise) not authenticated" error being showed in console on:

await Auth.currentAuthenticatedUser()
.then(user => {
...some stuff
})
.catch(e => {
history.push("/auth");
});

The app will redirect to /auth each time is not authenticated but we dont want to see not authenticated error in console in production

Collapse
 
rtdemetri profile image
Demetrios Christopher

In your .then(), provide an onRejected clause:

Auth.currentAuthenticatedUser().then((user) => { ... }, (error) => { ... }).catch((error) => { ... })

The catch is there to catch something wrong that you did in your onResolved or onRejected clauses, not to catch the fact that the promise was rejected and never resolved. I hope this helps!

Alternatively, you can turn the promises into observables and deal with them as such.

Collapse
 
mrichman profile image
Mark Richman

Did you ever figure this out? I get that same error.

Collapse
 
lanceharper profile image
Lance Harper

There seems to be a serious bug w/ amplify. When I go through the steps in your tutorial, I get to the step where it asks "What domain name prefix you want us to create for you?" and it provides a default. Hitting enter to accept the default tells me there is an error where the value must be a valid domain name format.

Collapse
 
dabit3 profile image
Nader Dabit

Hey, thanks what version of the CLI are you using?

Collapse
 
lanceharper profile image
Lance Harper • Edited

The latest. It turns out that the prefix that is generated by the CLI is not permitted. My repo had dashes and the name of the host prefix had dashes but it wouldn't validate the underscores that amplify swapped my dashes out with for some reason. Pretty confusing but I figured it out. Thanks for the quick reply.

Collapse
 
rudyhadoux profile image
rudyhadoux

Hi, it seems impossible to create both API_KEY and Cognito User Pool in the same amplify project. So, how to achieve that ?

Collapse
 
dabit3 profile image
Nader Dabit • Edited

You can set multiple auth types in the CLI when initializing or running amplify update auth, just make sure you are on the latest version of the CLI. You can then make requests using either the base authentication type, or passing in a custom type aws-amplify.github.io/docs/js/api#...

Collapse
 
rudyhadoux profile image
rudyhadoux

A lot of changes indeed. Thanks.

With authMode: 'AMAZON_COGNITO_USER_POOLS', there is a JWT verification for each request ?

Collapse
 
gvdonovan profile image
Greg Donovan

I'm a bit late to the party but am wondering how signin will work if the user was created by an admin with a temporary password. Will Amplify automatically handle this? If we go the SDK route and roll our own will there be something in the response after signinWithEmail is called indicating we need to capture a new password?

Collapse
 
ajrnriguy profile image
ajrn-riguy

Thanks, Nader! Really looking forward to the RN version of this. Seems to be some confusing info around federated logins and refreshing those tokens (one place in the Amplify docs says that it handles the refresh for you and another place says you need to do it on your own). Can't wait to see your approach to it all!

Collapse
 
dfang profile image
fang duan

hi, how to put sign up link and sign in link in the navbar with hosted ui, when user click sign up, redirect to or show sign up page, when click sign in, redirect to or show sign in page.

@aws-amplify/ui-react

Collapse
 
brentgreeff profile image
Brent Greeff

Nice article. I am just getting started, but is this the same as the hosted-UI or are these login/ register components inline on the same page as the rest of the app? - Cognito hosted-ui has limited styling options, and you would not be able to have navigation or other elements from my app on the login/ register page.

I have some experience with React, but we have an existing Rails app. Should I look at modifying your code or is there a better starting point for a Rails app that uses plain html backend server?

Collapse
 
ttngocthao profile image
Thao Thi Ngoc Truong

How can we add an user to the group of users pool during sign up? For example, buyer, seller and admin group? I’m totally beginner to Aws, It would be great if anyone could please to advise me.?! Thanks

Collapse
 
rcmlee99 profile image
Roger Lee

Hi Nader, great write up. If I want to redirect to the page I came from using state variable. How can I customise or set the OpenID AuthCode state variable using Auth.federatedSignIn()? Alternatively, do you have any suggestion to redirect to the page I came from assuming that redirect path is fixed and I cannot append to it.

Collapse
 
mersmith profile image
Mersmith

@dabit3
Because there is duplication of users in AWS Cognito

Register a user with name, email and cell phone. After that, log in with Facebook. And I register another user with the same email.

I have two users with the same email.

How do I solve that problem?
AWS AMPLIFY AND COGNITO

Image:
dev-to-uploads.s3.amazonaws.com/i/...

aws #amplify #cognito

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
indrajitb profile image
indrajitb

Hey @mersmith

  • Did you find a solution to this problem?
Collapse
 
alexandervu profile image
alexanderVu

Hi Nader,

Thank you for the hard work on this very helpful and detailed tutorial. I have one point I can't figure out. How to add existing Cognito to project auth local resources? I created a Cognito User Pool and create also Federated Identity Pool. But how to add it project local resources? Configuring manually, is an option, but like to see the more elegant way, using the cli.

Thanks

Collapse
 
alberto58065054 profile image
alberto

Great job Nader!

I'm looking forward to the RN version!!!

Will you use Auth0 + Amplify?

Collapse
 
irfanonk profile image
irfan önk • Edited

please help it is getting bothering
i have always got invalid_request

here is the question
invali_request

Collapse
 
earlpond profile image
EarlPond • Edited

How to: Use my OIDC provider like a Google/Facebook?

(great article)
export default withAuthenticator(App, { federated: {provider: 'myNamefor company SSO provider OIDC' } });

I'm trying to use with Authenticator to wrap a React web app. It feels like I should be able to use the syntax in the article in withAuthenticator as a federated object. Since there will only be one, really no reason to stop on the Hosted UI page. Would like it to continue past the Hosted UI with the one button directly to the Idp.

Think the functionality probably there, I'm just missing the setup & syntax.
docs.amplify.aws/lib/auth/advanced...
The example in Advanced Workflows of the Amplify docs is close, but no mention of tapping into OIDC created providers in Cognito.

========================
I found a good article about being able to bypass directly to the Idp, but I think there may be a better way using withAuthenticator.
spin.atomicobject.com/2021/11/02/b...

Thanks for any insights.

Collapse
 
nanditareshamwala profile image
NanditaReshamwala

hi Nader,
Great useful article and example.

I have configured SAML IP in my cognito user pool by following the instruction on medium.com/@zippicoder/setup-aws-c...

Next, I need to make my react application to sign in with this SAMl IP. I am using amplify in my react application. How to use Auth.federatedSignIn with SAML provider?

Also, I did not understand the use of following in your example.

"aws_cognito_identity_pool_id": "us-east-2:cec55e7d-2e27-4e4d-800a-8924b3d36eb8",

Collapse
 
mersmith profile image
Mersmith • Edited

Register a user with name, email and cell phone. After that, log in with Facebook. And I register another user with the same email.

I have two users with the same email.

How do I solve that problem?
AWS AMPLIFY AND COGNITO

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
damianesteban profile image
Damian Esteban

Thanks Nader, this is a great resource.

Collapse
 
dabit3 profile image
Nader Dabit

Glad you found it useful Damien!

Collapse
 
dimerman profile image
Dan Dimerman

thanks!

Collapse
 
mersmith profile image
Mersmith

How can we modify the user registration?????
Template UI AWS amplify register.
Video tutorial please.

Collapse
 
ca513zn profile image
CarlosZ92

This is an awesome article!

Collapse
 
hoanghai31299 profile image
hoanghai31299

Hi, great post.
Just a question, there is any way to signin with cognito credentials?
In my case, android call the webview (using amplify auth) and send credentials to it.

Collapse
 
thmdesign profile image
Tony Meyer

This was super helpful, thank you!

Collapse
 
irfanonk profile image
irfan önk

please help it is getting bothering!
i have always got invalid_request:

stackoverflow.com/questions/761288...