Overview

The aws-amplify is the latest recommended tool.

Resources

  • amazon-cognito-auth-js example has hosted cognito ui.
  • amazon-cognito-identity-js uses SDK for interation, sample Does not have hosted UI. Now part of aws-amplify.
  • aws-amplify-workshop-react - Nader Dabit workshop. Very good.
  • ../serverless - Provider independent solutions.

Nader Dabit workshop

The aws-amplify-workshop-react Workshop Steps :

create-react-app  my-amplify-app

yarn add aws-amplify aws-amplify-react

amplify configure      # 1. Creates IAM user in cloud.
                       # 2. Creates aws profile entry with access keys

amplify init           # Creates S3 bucket and cloudformation stack.
                       # amplify status # still shows empty

# You can choose to create new environment.
# amplify env list
# amplify env remove my_env
# amplify status
# amplify env checkout other_env
# 

amplify add auth    # Creates cognito cloudformation template locally.

amplify push        # Creates auth cognito user pool.
                    # amplify status # shows new cognito resource

Note:

The App Integration domain is not auto created. Create domain
e.g. amplify-demo-thava ; This will make the hosting domain
look like: amplify-demo-thava.auth.us-east-1.amazoncognito.com

Add below:

import Amplify from 'aws-amplify'
import   { withAuthenticator } from 'aws-amplify-react'

import config from './aws-exports'

Amplify.configure(config)   // Loads config.

Internals

authState is the current authentication state (a string):

- signIn               // Displaying Login prompt
- signUp               // Display Register window
- confirmSignIn        // Prompt for MFA Challenge
- confirmSignUp        // Verification Pending
- forgotPassword       // Display Forgot Password prompt
- verifyContact        // Display for Forgot Password verification.
- signedIn             // Fully signed in.

Using the options above, to control the condition for Authenticator to render App component, simply set validAuthStates property:

this._validAuthStates = ['signedIn'];

Extra Notes

Amplify Sign-in API code is here:

https://github.com/aws-amplify/amplify-js/blob/master/packages/aws-amplify-react/src/Auth/SignIn.jsx

Official FAQ

Will Amplify automatically refresh the session?

Yes. When you call Auth.currentSession(): * Amplify will try to get a session from local storage. * If the session expired, Amplify will refresh the Cognito session

Will Amplify automatically refresh the AWS credentials?

Yes, when you call Auth.currentCredentials(), it will return credentials from local storage else will attempt to get it from cognito.

Using Storage

To workaround single bucket limitation in aws-amplify code, call this before you call storage related functions on alternate bucket:

Amplify.configure(
  Storage: {
      bucket: '', //REQUIRED -  Amazon S3 bucket
      region: 'XX-XXXX-X', //OPTIONAL -  Amazon service region
});

readFromStorage = () => {
Storage.list('javascript/')   // or Storage.get, etc
  .then(data => console.log('data from S3: ', data))
  .catch(err => console.log('error'))
}

Policy examples

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::examplebucket/*"]
    }
  ]
}

Change permission on object which already exists:

aws s3api put-object-acl --bucket MyBucket --key file.txt 
  --grant-full-control emailaddress=user1@example.com  
  --grant-read  uri=http://acs.amazonaws.com/groups/global/AllUsers

Enable Debug

Note:

Amplify.Logger.LOG_LEVEL = 'DEBUG';

const logger = new Logger('foo', 'INFO');

logger.debug('callback data', data); //  this will write the message since the global log level is 'DEBUG'
During web development, you can set global log level in browser console log:

window.LOG_LEVEL = 'DEBUG';

Importing AWS-SDK

// See    git clone git@github.com:aws/aws-sdk-js.git

// import entire SDK
var AWS = require('aws-sdk');

// import AWS object without services
var AWS = require('aws-sdk/global');

// import individual service
var S3 = require('aws-sdk/clients/s3');

var creds = new AWS.Credentials({
  accessKeyId: 'akid',
  secretAccessKey: 'secret',
  sessionToken: 'session'      // can be null
});

// Set credentials and region
var s3 = new S3({
    apiVersion: '2006-03-01',
    region: 'us-west-1',
    credentials: {YOUR_CREDENTIALS}
  });


// Load from file ~/.aws/creds file
// Can not use while loading from browser
var credentials = AWS.SharedIniFileCredentials(
            {profile: 'work-account'});
AWS.config.credentials = credentials;

// Alternatively you can do this if AWS sdk includes services
AWS.config = new AWS.Config();
AWS.config.accessKeyId = "accessKey";
AWS.config.secretAccessKey = "secretKey";
AWS.config.region = "us-east-1";

var s3 = new AWS.S3();

var s3 = new aws.S3();
s3.getObject({
  Bucket : '<my_bucket>',
  Key : '<key_to_my_file>'
}).promise().then(function (s3obj){
  console.log('successful');
}).catch(function (error) {
  console.error(error);
});

Supporting Technologies