Setting up your fiddle

  1. Go to https://jsfiddle.net and create new fiddle to test integration with your Cognito resources from the SDK
  2. Setup your new fiddle by adding these dependencies and libraries to resource section
https://www.w3schools.com/w3css/4/w3.css
https://demowebapp.s3-us-west-2.amazonaws.com/amazon-cognito-identity.js
https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js
https://code.jquery.com/jquery-3.4.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.850.0/aws-sdk.min.js

  1. Create your HTML layout and the sign-up in the HTML tab using this sample code
<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openTab('signup')">Sign-up</button>
  <button class="w3-bar-item w3-button" onclick="openTab('signin')">Sign-in</button>
  <button class="w3-bar-item w3-button" onclick="openTab('managemfa')">Manage MFA</button>
  <button class="w3-bar-item w3-button" onclick="openTab('callapis')">Call APIs</button>
  <button class="w3-bar-item w3-button" onclick="openTab('accesss3')">Access S3</button>
</div>
  1. Add helper JS functions and settings to your fiddle, make sure you provide the user-pool-id and app-client-id from previous exercise
/**
 * Configure user pool and client
 */
var poolData = {
  UserPoolId: "___TYPE_YOUR_USER_POOL_ID___",
  ClientId: "___TYPE_YOUR_APP_CLIENT_ID___"
};

var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
var cognitoUser;

/**
 * Helpers
 */
function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tabName).style.display = "block";
}

function parseJwt (token) {
  var base64Url = token.split('.')[1];
  var base64 = base64Url.replace('-', '+').replace('_', '/');
  return JSON.parse(window.atob(base64));
};