Setting up your fiddle

  1. Go to 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

  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>
  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));