Search code examples
javascriptamazon-web-servicesamazon-cognitologin-with-amazon

How to use aws cognito with web federation and javascript


I am trying to use AWS Cognito along with an identity provider (login with amazon) to provide login functionality for my javascript application. After a lot of searching, I have to ask you guys: Can you point me to a good tutorial which describes the steps? I know there is a lot of documentation out there, but either the documentation is incomplete, or it is documentation without usage of cognito. What I have so far is:

  • I have registered an application
  • I have created an identity pool with the application Id I got from (1)

I tried the following to create the login button with functionality, but this does not work:

<!DOCTYPE html>
<html>
    <head>
        <script src="aws-sdk.js" type="text/javascript"></script>
        <script>
            // Initialize the Amazon Cognito credentials provider
            AWS.config.region = 'eu-west-1'; // Region
            AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: 'xxx',
            });

        </script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <a href id="LoginWithAmazon">
            <img border="0" alt="Login with Amazon"
                 src="https://images-na.ssl-images-amazon.com/images/G/01/lwa/btnLWA_gold_156x32.png"
                 width="156" height="32" />
        </a>
<script>
document.getElementById('LoginWithAmazon').onclick = function() {
    options = { scope : 'profile' };
    amazon.Login.authorize(options, 'MY_REDIRECT_URL');
    return false;
  };
</script>
    </body>
</html>

I don´t get redirect nor I see the login popup. Thanks in advance.


Solution

  • You have mentioned in your question that you would like to give your application a login functionality using Amazon Cognito.

    Amazon Cognito supports two entites, both of which are highly decoupled by nature:

    • User Pools
    • Identity Pools

    User Pools allows you to add authentication to your web or mobile application, while Identity Pools allow verified/unverified users access to a set of AWS Resources as specified in the IAM Role in the Identity Pool Settings. Cognito Identity Pools does not serve as an authenticator, but it serves as an authorizer instead and it vends temporary AWS credentials after running the get-credentials-for-identity API call in the back-end.

    From what I understand from your use-case, you would like to have a "Login with Amazon" button in your JavaScript Web Application, that would take you to a web page after successful verification of JWT[1]. To achieve this use-case, Amazon Cognito User Pools should be utilized. Firstly, you would need to integrate Amazon as an identity provider to your created user pool[2]. After that, you need to mention the same in your code by initiating an auth object for your User Pool:

     function initCognitoSDK() {
            var authData = {
                ClientId : '<TODO: your app client ID here>', // Your client id here
                AppWebDomain : '<TODO: your app web domain here>', // Exclude the "https://" part. 
                TokenScopesArray : <TODO: your scope array here>, // like ['openid','email','phone']...
                RedirectUriSignIn : '<TODO: your redirect url when signed in here>',
                RedirectUriSignOut : '<TODO: your redirect url when signed out here>',
                IdentityProvider : '<TODO: your identity provider you want to specify here>', 
                        UserPoolId : '<TODO: your user pool id here>', 
                        AdvancedSecurityDataCollectionFlag : <TODO: boolean value indicating whether you want to enable advanced security data collection>
            }; 
    

    While developing your application, you could refer to this sample application[3] as this has the same use-case.

    I hope this answer helps you out.

    References

    [1]. https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html

    [2]. https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html

    [3]. https://github.com/aws/amazon-cognito-auth-js/tree/master/sample