JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css">
<div class="p-3">
  <h1>Xbox API</h1>
  
  <div class="mb-3">
    <label for="url" class="form-label">URL</label>
    <input type="url" class="form-control" id="url" placeholder="https://login.live.com/oauth20_desktop.srf?...access_token=...&refresh_token=...">
  </div>
  
  <hr class="my-4">
  
  <div class="mb-3">
    <label for="access_token" class="form-label">Access token</label>
    <input type="text" class="form-control" id="access_token" disabled>
  </div>

  <div class="mb-3">
    <label for="refresh_token" class="form-label">Refresh token</label>
    <input type="text" class="form-control" id="refresh_token" disabled>
  </div>
</div>

JavaScript

const url = document.getElementById('url');
const access = document.getElementById('access_token');
const refresh = document.getElementById('refresh_token');

url.addEventListener('input', function(e) {
  if (!url.value.includes('#')) {
    access.value = '';
    refresh.value = '';
    return;
  }
  
  const urlParams = new URLSearchParams(url.value.split('#')[1])
  access.value = urlParams.get('access_token');
  refresh.value = urlParams.get('refresh_token');
});