app.css

body {
  background-color:#263238;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

#pageSpinner{
  display: none;
}

app.js

(function () {

var facebookAppId = 'YOUR_APP_ID';
var roleArn = 'YOUR_ROLE_ARN';
AWS.config.region = 'us-east-1';
var lambda = new AWS.Lambda();
var userLoggedIn = false;
var fbUserId = '0';
var fbToken = '0';


/********************  Startup functions   ***********************************/

$.jGrowl.defaults.closerTemplate = '<div class="alert alert-info">Close All</div>';

/********************  Button Events   ***************************************/

$('#btnInvoke').on('click', function (event) {
  invokeLambda();
});

$('#btnGet').on('click', function (event) {
  getLambda();
});

/*******************  Facebook Login   ***************************************/

function statusChangeCallback(response) {
  console.log('Facebook response: ');
  console.log(response);

  if (response.status === 'connected') {
    // Logged into your app and Facebook. Pass details to app.
    testAPI();
    setupAWS(response);
  } else if (response.status === 'not_authorized') {
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this app.';
  } else {
    document.getElementById('status').innerHTML = 'Please log ' +
      'into Facebook.';
  }
}

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

window.fbAsyncInit = function() {
FB.init({
  appId      : facebookAppId,
  cookie     : true,
  xfbml      : true,
  version    : 'v2.2'
});

FB.getLoginStatus(function(response) {
  statusChangeCallback(response);
});

};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/en_US/sdk.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function testAPI() {
  console.log('Welcome!  Fetching your information.... ');
  FB.api('/me', function(response) {
    console.log('Successful login for: ' + response.name);
    document.getElementById('status').innerHTML =
      'Thanks for logging in, ' + response.name + '!';
  });
  document.getElementById('status').innerHTML = 'Logged ' +
    'into Facebook.';
}

function validLogin(){
  // Checks you have logged in and token hasn't expired
	var tempDate = new Date();
  var tempValid = true;
  if (!userLoggedIn){
    tempValid = false;
    growl('danger', 'Facebook Error', 'You are currently not logged in with Facebook!');
  }
  else if (tempDate >= fbTokenExpires){
    tempValid = false;
    growl('danger', 'Facebook Error', 'Facebook token expired. Please log in again');
  }
  return tempValid;
}

/*******************  Create temporary AWS credentials  *********************/

Date.prototype.addHours= function(h){
    this.setHours(this.getHours()+h);
    return this;
};

function setupAWS(response){
  fbToken = response.authResponse.accessToken;
  console.log('Facebook token: ' + JSON.stringify(fbToken));
  fbTokenExpires = new Date().addHours(response.authResponse.expires/3600);
  fbUserId = response.authResponse.userID;
  lambda.config.credentials = new AWS.WebIdentityCredentials({
      ProviderId: 'graph.facebook.com',
      RoleArn: roleArn,
      WebIdentityToken: fbToken
  });
  userLoggedIn = true;
  console.log('Finished creating AWS credentials for account: ' + fbUserId);
}

/***********************  Invoke AWS Lambda function  ************************/
function invokeLambda(){

}

/***********************  Get AWS Lambda function  ***************************/
function getLambda(){

}

/***********************  User Interface functions  **************************/

function growl(alertType,title,message){
  $('#jGrowl-container1').jGrowl({
      header: title,
      message: message,
      group: 'alert-' + alertType,
      life: 5000
  });
}

function showSpinner(){
  $('#pageSpinner').css('display', 'block');
}

function hideSpinner(){
  $('#pageSpinner').css('display', 'none');
}

/***************************  END  *******************************************/
})();

index.html

<!DOCTYPE html>
<html>
    <head>
      <title>BackSpace Lambda Lab</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.3/jquery.jgrowl.min.css" type="text/css"/>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="app.css"/>
    </head>
    <body>
      <div id="jGrowl-container1" class="jGrowl top-right"></div>
      <!-- Main page -->
      <div class="container">
        <div class="page-header">
          <h1 style="color:#ddd">BackSpace Lambda Lab  <small style="color:#eee">Get our hands dirty with Lambda!</small></h1>
        </div>
        <div class="jumbotron">
          <h1>Welcome to the BackSpace Lambda Test App</h1>
          <p>Use NodeJS on the server on demand.</p>
          <br>
          <!-- Facebook Login Button and Status -->
          <fb:login-button scope="public_profile,email" onlogin="checkLoginState();" data-size="xlarge">
          </fb:login-button>
          <div id="status"></div>
          <div id="fb-root"></div>
          <hr>
          <!-- Buttons -->
          <p>
            <button id="btnInvoke" type="button" class="btn btn-success btn-lg">
              Invoke Lambda Function
            </button>
            <button id="btnGet" type="button" class="btn btn-default btn-lg">
              Get Lambda Function
            </button>
            <div id= "pageSpinner" class="alert alert-info" role="alert">
              <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Working, please wait...
            </div>
          </p>
        </div>
      </div>
      <!-- External libraries (JQuery, Bootstrap & AWS Javascript SDK) -->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.43.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/async/1.4.2/async.min.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>
      <script src="app.js" type="text/javascript"></script>
    </body>
</html>