Login with AWS Cognito

From @jayair on Mon Apr 10 2017 01:03:26 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/login-with-aws-cognito.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/38

From @auz1111 on Thu Jun 01 2017 23:05:41 GMT+0000 (UTC)

I would love it if you added a chapter on logging in with facebook account. Do you guys know of any good tuts that would help walk us through this?

From @jayair on Sat Jun 03 2017 11:48:16 GMT+0000 (UTC)

@auz1111 Yeah it has been on our list.

For the tutorial, Iā€™d have to look for one. You need to use Cognito Federated Identities instead of the User Pool to manage your user accounts.

From @rogueturnip on Thu Jun 08 2017 15:33:21 GMT+0000 (UTC)

Iā€™m starting to look into this also. It seems that there is a mapping ability to map the different federated identities together but Iā€™m not exactly sure yet how to do this in a way that makes sense.

From @jayair on Thu Jun 08 2017 15:49:34 GMT+0000 (UTC)

@rogueturnip Yeah it is quite confusing to wrap your head around the set up. But that is how it is supposed to work. Federated identities pulls all your different identity sources together to give you a consolidated view of all your users, regardless of where they are coming from.

From @rogueturnip on Thu Jun 08 2017 15:51:40 GMT+0000 (UTC)

If Iā€™m understanding it correctly it seems you login the first time and that caches the credentials. Then when a login is done using something like facebook you would do a credentials.get to see if there are existing credentials and then when you do the Login Map you would send in both. Am I following the flow right or completely off base? I canā€™t find an example so Iā€™m piecing together things from the AWS docs.

From @jayair on Fri Jun 09 2017 15:39:06 GMT+0000 (UTC)

Hmm Iā€™m not completely sure if I follow the flow you are talking about. It is a bit complicated and not super well documented.

From @rogueturnip on Fri Jun 09 2017 15:59:50 GMT+0000 (UTC)

Itā€™s possible I"m messing up what I think the process is. No where is this documented very well.

From @ffmike on Tue Jul 11 2017 15:04:00 GMT+0000 (UTC)

Getting ā€œError: Network Failureā€ out of the AWS xhr.js at this point. Have verified the correct username & password, they work from the console with aws cognito-idep admin-initiate-auth. Have verified the right user pool & client IDs in config.js. Not sure what to look at nextā€¦

1 Like

From @ffmike on Tue Jul 11 2017 15:34:07 GMT+0000 (UTC)

Figured it out. NoScript stepped in to block amazonaws.com. Thatā€™d do it.

From @exbarboss on Tue Aug 22 2017 06:19:12 GMT+0000 (UTC)

+1 for Federated Identities chapter.

From @triunm on Tue Oct 17 2017 22:55:28 GMT+0000 (UTC)

Great tutorial! Iā€™ve been through all the content and now building my app by customising the code produced in this tutorial. I just have question on how we can dynamically configure the app to use specific config.js file for different stages. Iā€™m using the created config.js in this tutorial for production environment. Config.js should be different on dev or test environment like the user pool & app client id. It should be somewhere in build time, right?

Thanks in advance!

From @jayair on Thu Oct 19 2017 17:23:47 GMT+0000 (UTC)

@triunm I was planning on writing on this but a simple way to handle this is as follows.

In your config.js use something like this:

const dev = {
  apiGateway: {
    REGION: 'us-east-1',
    URL: 'https://12345678.execute-api.us-east-1.amazonaws.com/staging',
  },
  cognito: {
    REGION: 'us-east-1',
    USER_POOL_ID : 'us-east-1_123456678',
    APP_CLIENT_ID : '4xxxxxxxxxxxxxxxxxxxx',
    IDENTITY_POOL_ID: 'us-east-1:12345678-1234-1233-9387-1234567890123',
  }
};

const prod = {
  apiGateway: {
    REGION: 'us-east-1',
    URL: 'https://567890.execute-api.us-east-1.amazonaws.com/prod',
  },
  cognito: {
    REGION: 'us-east-1',
    USER_POOL_ID : 'us-east-1_4444444',
    APP_CLIENT_ID : '5xxxxxxxxxxxxxxxxxx',
    IDENTITY_POOL_ID: 'us-east-1:456789-1234-1234-4567-123456789',
  }
};

const config = process.env.REACT_APP_STAGE === 'production'
  ? prod
  : dev;

export default {
  ...config
};

And in your package.json set your scripts as:

  "scripts": {
    "start": "REACT_APP_STAGE=dev react-scripts start",
    "build": "REACT_APP_STAGE=production react-scripts build"
  }

You can extend this idea to have other environments. This is based on the idea of custom environment variables in Create React App.

From @leejh3224 on Tue Nov 28 2017 16:19:26 GMT+0000 (UTC)

Iā€™m leaving this comment just because I had a hard time finding out what was a problem when I faced 502 error(cors problem).

In that case, there are three possible options.
Firstly, you can look at ā€˜/libs/response-lib.jsā€™ and check whether the function contains ā€˜Access-Control-Allow-Originā€™ header or not.
Secondly, you may have miss indented serverless.yml.
Or lastly, you may have forgotten deploying your functions as I did ā€¦

I could see my notes after deploying the functions.
If you have same issue like me, you can re-deploy your functions and it might help you get out of trouble.

From @jayair on Tue Nov 28 2017 20:35:27 GMT+0000 (UTC)

@leejh3224 Thanks for leaving your comment here.

From @ohenneken on Thu Dec 14 2017 19:51:27 GMT+0000 (UTC)

Hi,

I have reached a point in the splendid tutorial where a first time app-client user should login in for the first time, having his email already verified.

The login function from the Login.js is executed and comes back with a new challenge ā€˜NEW_PASSWORD_REQUIREDā€™.

The tutorial says nothing about this and assumes the login succeeds?

So I added a function newPasswordRequired: function(userAttributes, requiredAttributes)

-according to http://docs.aws.amazon.com/cognito/latest/developerguide/using-amazon-cognito-identity-user-pools-javascript-example-authenticating-admin-created-user.html-

but i can not get that to work. How should i proceed?

Is the tutorial somewhat outdated regarding this feature? The Login.js in the tutorial does not have the newPasswordRequired method nor are there any problems mentioned at the end of the chapter.

Thnx,

Oscar Henneken

From @jayair on Fri Dec 15 2017 17:17:55 GMT+0000 (UTC)

@ohenneken Hmm you shouldnā€™t need to do this. If youā€™ve followed this chapter - https://serverless-stack.com/chapters/create-a-cognito-test-user.html

Then you user should be able to login without having to set a new password.

From @ohenneken on Fri Dec 15 2017 21:54:28 GMT+0000 (UTC)

Hi Jay,

Thnx for responding!

I am impressed with the amount of information yet clarity you guys have
composed these tutorials, it helps a lot!

I followed the chapter, but i guess something went wrong in the part where
i had to do:

aws cognito-idp admin-confirm-sign-up
ā€“region us-east-1
ā€“user-pool-id YOUR_USER_POOL_ID
ā€“username admin@example.com

I started on a windows computer behind a proxy and had problems, Then
switched to a MacBook Pro where i had problems installing pip. So somewhere
in that hussle i must have missed i made a mistake.

I can continue with the tutorials because the signup works fine so i can
create and authenticated end users.

I receive an error with the list.js component (error 500, status: false), i
have yet to find out why, but i learned enough already to keep digging into
aws and serverless framework for new applications.

Kind regards,
Oscar Henneken

From @mdhendri on Sat Dec 23 2017 15:09:28 GMT+0000 (UTC)

With cognito how would you setup up the ability to reset ones password if the user forgot the password or even within the app?

-Michael

From @ohenneken on Sun Dec 24 2017 10:18:44 GMT+0000 (UTC)

Hi Jay,

Merry X-mas!

I worked through the tutorial but i did not get a ā€œcreateā€ call to work
decently on the server.

I only got the ā€œcreateā€ for the notes-scratch application to work via the
serveless invoke local, but never via the apig test. That returns an

500, Internal Server Error

If the serverless invoke local is capable of creating an item in the
DynamoDb on the server, apparently all the building blovks are there, so
why wouldnā€™t this work on the server itself?

I also created another request call ā€œcreate_favoriteā€, to create a favorite.

I deployed it apparently correctly, but it states:

app.js:100242 Uncaught (in promise) TypeError: Failed to execute ā€˜fetchā€™ on
ā€˜Windowā€™: Request with GET/HEAD method cannot have body.

serverless.yml maps it to a ā€œPOSTā€, like so

create_favorite:
handler: create_favorite.main
events:
- http:
path: favorites
method: post
cors: true
authorizer: aws_iam

What could it be?

Kind regards,
Oscar Henneken