JavaScript¶

The basics of our app are now complete. The next thing to tackle is to fix up our HTML. It is good practise to actually remove the JavaScript code from within the HTML documents and place it in a seperate file. This way the code and content are seperate. What we will do to start is remove the get_user() function from profile.html and call it from our HTML. We will then remove the JavaScript code from sign-in.html and sign-out.html and create *.js files for the JavaScript code in each of these files. When done, all JavaScript will be moved out of the HTML files and into their own files.

Tasks:

create a js directory and a JavaScript file for our code
move the <script> code from sign-in.html into a sign-in.js file
fix the code up, so that there are no global variables, since all code must now be in functions
call the new function from sign-in.html
do the same process to sign-out.html and profile.html

Sign In Code¶

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!-- Javascript SDKs-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/amazon-cognito-auth.min.js"></script>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.596.0.min.js"></script>
    <script src="js/amazon-cognito-identity.min.js"></script>
    <script src="js/config.js"></script>
    <script type="text/javascript" src="js/sign-in.js"></script>
  </head>

  <body>
    <form>
      <h1>Please sign in</h1>

      <input type="text" id="inputUsername"  placeholder="Email address" name="username" required autofocus>
      <input type="password" id="inputPassword"  placeholder="Password" name="password" required>
      <button type="button" onclick="signInButton();">Sign in</button>
    </form>

    <br>
    <div id='logged-in'>
      <p></p>
    </div>

    <p><a href="./profile.html">Profile</a></p>

    <br>
    <div id='home'>
      <p>
        <a href='./index.html'>Home</a>
      </p>
    </div>

  </body>
</html>

// JavaScript File

function signInButton() {
  // sign-in to AWS Cognito

  var data = {
      UserPoolId : _config.cognito.userPoolId,
    ClientId : _config.cognito.clientId
  };
  var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
  var cognitoUser = userPool.getCurrentUser();

    var authenticationData = {
    Username : document.getElementById("inputUsername").value,
    Password : document.getElementById("inputPassword").value,
  };

  var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);

  var poolData = {
    UserPoolId : _config.cognito.userPoolId, // Your user pool id here
    ClientId : _config.cognito.clientId, // Your client id here
  };

  var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

  var userData = {
    Username : document.getElementById("inputUsername").value,
    Pool : userPool,
  };

  var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);

  cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess: function (result) {
      var accessToken = result.getAccessToken().getJwtToken();
      console.log(result);

      //get user info, to show that you are logged in
            cognitoUser.getUserAttributes(function(err, result) {
                if (err) {
                    console.log(err);
                    return;
                }
                console.log(result);
                document.getElementById("logged-in").innerHTML = "You are logged in as: " + result[2].getValue();

                // now auto redirect to profile page
                window.location.replace("./profile.html");
            });

    },
    onFailure: function(err) {
      alert(err.message || JSON.stringify(err));
    },
  });
}

Sign Out Code¶

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--Cognito JavaScript-->
    <script src="js/amazon-cognito-identity.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/sign-out.js"></script>
  </head>

  <body>
    <div class="container">
      <div>
        <h1>Sign Out</h1>
        <div id='sign-out'>
          <p>One moment please ...</p>
        </div>
      </div>
    <div>

    <br>
    <div id='home'>
      <p>
        <a href='./index.html'>Home</a>
      </p>
    </div>
  </body>
  <script>
    window.onload = function(){
      const temp_var = signOut();
    }
  </script>
</html>

// JavaScript File

function signOut() {
  //

  return_message = "";

  const data = {
    UserPoolId : _config.cognito.userPoolId,
    ClientId : _config.cognito.clientId
  };
  const userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
  const cognitoUser = userPool.getCurrentUser();

  if (cognitoUser != null) {
    cognitoUser.getSession(function(err, session) {
      if (err) {
        alert(err);
        return;
      }
      console.log('session validity: ' + session.isValid());

      // sign out
      cognitoUser.signOut();
      console.log("Signed-out");
      return_message = "Signed-out";
    });
  } else {
    console.log("Already signed-out")
    return_message = "Already signed-out";
  }

  const div_user_info = document.getElementById('sign-out');
  div_user_info.innerHTML = return_message;
}

Profile Code¶

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--Cognito JavaScript-->
    <script src="js/amazon-cognito-identity.min.js"></script>
    <script src="js/config.js"></script>
    <script type="text/javascript" src="js/profile.js"></script>
  </head>

  <body>
    <div class="container">
      <div>
        <h1>Profile</h1>
      </div>
      <div id='profile'>
        <p>One moment please ...</p>
      </div>
    <div>

    <br>
    <div id='home'>
      <p>
        <a href='./index.html'>Home</a>
      </p>
    </div>
  </body>
  <script>
    window.onload = function(){
      const temp_var = getUserAttributes();
    }
  </script>
</html>

// JavaScript File

async function getUser(email_address) {
    // get the user info from API Gate

    const api_url = 'https://gonvpjbyuf.execute-api.us-east-1.amazonaws.com/prod/user-profile?user_email=' + email_address;
    const api_response = await fetch(api_url);
    const api_data = await(api_response).json();
    console.log(api_data);

    const div_user_info = document.getElementById('profile');
    div_user_info.innerHTML = api_data['body'];
  }

function getUserAttributes() {
  var data = {
    UserPoolId : _config.cognito.userPoolId,
    ClientId : _config.cognito.clientId
  };
  var userPool = new AmazonCognitoIdentity.CognitoUserPool(data);
  var cognitoUser = userPool.getCurrentUser();

  if (cognitoUser != null) {
    cognitoUser.getSession(function(err, session) {
      if (err) {
        alert(err);
        return;
      }
      //console.log('session validity: ' + session.isValid());

      cognitoUser.getUserAttributes(function(err, result) {
        if (err) {
          console.log(err);
          return;
        }
        // user email address
        console.log(result[2].getValue());
        getUser(result[2].getValue())
      });

    });
  } else {
    console.log("Already signed-out")
  }
}