index.html

<!DOCTYPE html>
<html>

<head>
	<title>Integrate Auth0 with Amazon API Gateway</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/app.css" rel="stylesheet">
  <script src="https://cdn.auth0.com/w2/auth0-7.2.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

</head>

<h3><span id="login" class="nickname"></span></h3>

<body class="home">
	<div class="login-page clearfix">
		<div class="login-box">
			<h2><b>Single Page App</h2>
      <h5>Authorize API's using Auth0 and Amazon API Gateway</h5>
    </div>
  </div>

  <a id="login1" > Login </a>

  <div id="apis">
      <table>
        <tr>
          <td><button id="btn-movie"  disabled=true >Invoke Movie API</button>
          <td><span id="movieInfo" class="nickname"></span><br>
        <tr>
          <td><button id="btn-device" disabled=true >Invoke Device API</button>
          <td><span id="deviceInfo" class="nickname"></span><br>
      <table>
  </div>


  <script>


          function genNonce(length) {
                var bytes = new Uint8Array(length);
                var random = window.crypto.getRandomValues(bytes);
                var result = [];
                var charset = '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._~'
                random.forEach(function (c) {
                    result.push(charset[c % charset.length]);
                });
                return result.join('');
          }

          function getParameterByName(name) {
            var match = RegExp('[#&]' + name + '=([^&]*)').exec(window.location.hash);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
          }

          function getAccessToken() {
            return getParameterByName('access_token');
          }

          function getIdToken() {
            return getParameterByName('id_token');
          }

          $(function () {
            var access_token = getAccessToken();


            // Optional: an id_token will be returned by Auth0
            // if your response_type argument contained id_token
            var id_token = getIdToken();

            localStorage.setItem("idToken", id_token);
            localStorage.setItem("accessToken", access_token);
            console.log("access_token = " + access_token);
            console.log("id_token = " + id_token);

            // Use the access token to make API calls
            // Verify that there's a token in localStorage
            var token = localStorage.getItem('idToken');
            if (typeof token !== 'undefined') {
              showLoggedIn();
            }

            // Display the user's profile
            function showLoggedIn() {

              document.getElementById('btn-movie').disabled=false;
              document.getElementById('btn-device').disabled=false;

              <!-- //TODO: Replace values for ClientId, CallbackURL, Domain -->
              var auth0 = new Auth0({
                    domain:       'auth0jwtdemo.auth0.com',
                    clientID:     'rasF8IRHJacMCNs',
                    callbackURL:  'http://auth0.myspa.s3-website-eu-west-1.amazonaws.com/',
                    responseType: 'token'
                  });

              auth0.getProfile(token, function (err, profile) {
                  if(err) {
                    // handle error
                    return;
                  }
                  document.getElementById('login').textContent = "Welcome " + profile.nickname + " - Logged in using Identity Provider - " + profile.identities[0].provider;
              });
            }

          });

          $(document).ready(function() {

            var match = RegExp('[#&]access_token=([^&]*)').exec(window.location.hash);
            // Generate a nonce once
            if (match === null) {

                nonce = genNonce(16);

                //TODO: Replace the URL and values for Query Parameters - audience, client_id, redirect_uri
                href="https://auth0jwtdemo.auth0.com/authorize?audience=https://StreamingResourceServer&nonce=" + nonce + "&response_type=id_token%20token&client_id=rasF8IRHJacMCNs&redirect_uri=http://auth0.myspa.s3-website-eu-west-1.amazonaws.com/";
                $("#login1").attr("href",href);

                localStorage.setItem("nonce", nonce);
            }

            /*
              By adding CORS, you're potentially accepting requests from any domain.
              In these situations, the browser checks with the server first that the server is willing to accept the request before sending it via the OPTIONS request.
              Unsolicited requests could potentially send large payloads. A pre-flight OPTIONS check verifies if the server can accept/supports them.
            */
            $('#btn-device').click(function(){
            		//TODO: Replace this URL
                    invokeAPI('https://dplbpub4h4.execute-api.us-west-2.amazonaws.com/beta/device', document.getElementById('deviceInfo'));
                });

                $('#btn-movie').click(function(){
					        //TODO: Replace this URL
                    invokeAPI('https://62d1itssug.execute-api.us-west-2.amazonaws.com/beta/movie', document.getElementById('movieInfo'));
                });

                function invokeAPI(apiUrl, element){

                    $.ajax({
                        url: apiUrl,
                        type: 'GET',

                        headers: {
                            "Authorization": localStorage.getItem('accessToken')
                        },
                        contentType: 'application/json',
                        success: function (result) {
                          element.textContent = result;
                        },
                        error: function (request, status, error) {
                            //TODO: Implement better error handling
                            element.textContent = "UnAuthorized";
                        }
                    });

                }

            });


     </script>
</body>

</html>