Serverless AWS Cognito Facebook Login

README.md

README

This gist was created after spending too much time figuring out how to setup serverless authentication using AWS Cognito and Facebook login. Hope you find it useful!

DISCLAIMER: I have not re-tested the steps but wrote them afterwards. Therefore, it is very likely to contain some issues.

Steps

• Login to AWS and Cognito service

• Create user pool in Cognito

• Collect Pool Id (needed later)

• Define domain in Open App integration > Domain name, say: servicex

• Navigate to Facebook: https://developers.facebook.com/

• Create new app in My Apps

• Add Facebook Login in Products

• Collect Facebook app id and secret (needed later)

• Use specificed domain name in Valid OAuth redirect: https://servicex.auth.eu-central-1.amazoncognito.com/

• Navigate back to AWS Cognito

• Enable Facebook in Facebook in Federation > Identity providers

• Create client in App clients (no secret needed)

• Open App client settings

• Collect app id (needed later)

• Enable identity providers

• Define callback & sign out urls. Example: https://localhost:3000/

• Select Allowed OAuth Flows: Implicit grant

• Select Allowed Oauth Scopes: email, openid

• Create new identity pool in Cognito, say: servicex

• Open user pool and Edit identity pool

• Collect the identity pool id

• Create role for unauthenticated and authenticated (see policy examples)

• Select Authentication providers and set user Pool id and app client id

• Write app.js (see attached example) and host it in https://localhost:3000/

anonymous-policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "mobileanalytics:PutEvents",
                "cognito-sync:*"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}

app.js

import AWS from 'aws-sdk';
import 'amazon-cognito-auth-js/dist/aws-cognito-sdk';
import { CognitoAuth } from 'amazon-cognito-auth-js/dist/amazon-cognito-auth';


const COGNITO_POOL_ID = 'poolid';
const COGNITO_IDENTITY_POOL_ID = 'identitypoolid';
const COGNITO_APP_CLIENT_ID = 'appclientid';

function initCognito(opts = {}) {
  const noop = () => {};

  const authData = {
    ClientId: COGNITO_APP_CLIENT_ID,
    AppWebDomain: 'servicex.auth.eu-central-1.amazoncognito.com',
    TokenScopesArray: ['email', 'openid'],
    RedirectUriSignIn: 'https://localhost:3000/',
    RedirectUriSignOut: 'https://localhost:3000/',
  };

  const auth = new CognitoAuth(authData);
  auth.userhandler = {
    onSuccess: opts.onSuccess || noop,
    onFailure: opts.onFailure || noop,
  };

  return auth;
}

const auth = initCognito({
  onSuccess: (session) => {
    // Cleanup hash
    window.location = window.location.pathname;
  },
  onFailure: (err) => {
    console.error('Failed to login', err);
  },
});

auth.parseCognitoWebResponse(window.location.href);
const session = this.auth.getCachedSession();
const accessToken = this.auth.getCachedSession().getAccessToken();

AWS.config.region = 'eu-central-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: COGNITO_IDENTITY_POOL_ID,
  Logins: {
    [`cognito-idp.eu-central-1.amazonaws.com/${COGNITO_POOL_ID}`]: session.getIdToken().getJwtToken()
  }
});

const s3 = new AWS.S3({
  region: 'eu-central-1',
});

s3.listObjectsV2({
  Bucket: 'mybucket',
  MaxKeys: 2,
})
.promise()
.then(res => {
  console.log('buckets', res);
});

authenticated-policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "mobileanalytics:PutEvents",
                "cognito-sync:*",
                "cognito-identity:*"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::mybucket/*",
                "arn:aws:s3:::mybucket"
            ]
        }
    ]
}