app/index.html

<!DOCTYPE html>
<html>

<head>
    <title>GrabID Sample Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./style.css"/>
</head>

<body class="text-center">
<div class="card" style="width: 60rem">
    <div class="card-info">
        <textarea class="form-control" id="result" rows="30">Output</textarea>
    </div>
    <div class="card-body">
        <button type="button" class="btn btn-primary btn-block" id="cleanup">CleanUp</button>
        <button type="button" class="btn btn-primary btn-block" id="makeAuthorizationRequest">Make Authorization
            Request
        </button>
        <button type="button" class="btn btn-primary btn-block" id="makeTokenRequest">Make Token Request</button>
        <button type="button" class="btn btn-primary btn-block" id="makeImplicitAuthorizationRequest">Make Implicit
            Authorization Request
        </button>
        <button type="button" class="btn btn-primary btn-block" id="makeTestEndpointRequest">Make Test Endpoint
            Request
        </button>
    </div>
</div>

<script type="text/javascript" src="../dist/bundle.js"></script>
<script type="text/javascript">
    const openIdUrl = GrabID.GrabUrls.PRODUCTION

    let appConfig = {
      clientId: '08044981144746ec80a870c605fe705b',
      redirectUri: 'https://public.grab.com/app/redirect.html',
      scope: ['openid', 'gid_test_scope_1', 'gid_test_scope_2', 'gid_test_scope_3'].join(' '),
      acrValues: {
        service: 'PASSENGER',
        consentContext: {
          countryCode: 'SG'
        }
      },
    }

    $(function () {
      let application = new GrabID(openIdUrl, appConfig)

      // authorize request handler
      $('#makeAuthorizationRequest').on('click', function () {
        application.makeAuthorizationRequest()
      })

      // token request handler
      $('#makeTokenRequest').on('click', function () {
        application.makeTokenRequest()
          .then(() => {prettyPrint(GrabID.getResult())})
          .catch(error => alert(error.toString()))
      })

      // implicit authorization request handler
      $('#makeImplicitAuthorizationRequest').on('click', function () {
        application.makeImplicitAuthorizationRequest()
      })

      // test endpoint request handler
      $('#makeTestEndpointRequest').on('click', function () {
        let tokenResult = GrabID.getResult();
        window.fetch("https://grab.api.com/grabid/v1/oauth2/userinfo", {
          method: 'GET',
          headers: {
            'Accept-Content': 'application/json; charset=utf-8',
            Authorization: "Bearer " + tokenResult.accessToken,
          },
          mode: 'cors',
        })
        .then((response) => { 
          response.json().then((userInfo) => {
            console.log(userInfo);
          });
        })
      })

      // cleanup handler
      $('#cleanup').on('click', function () {
        window.localStorage.clear()
        window.location = '/app'
      })
    })

    function prettyPrint (s) {
      let pretty = JSON.stringify(s, undefined, 4)
      $('#result').text(pretty)
    }
</script>
</body>
</html>