title: The given origin is not allowed for the given client ID (GSI)
body: <p>I was refactoring my &quot;Sign in with Google&quot; by replacing <code>gapi</code> with <code>gsi</code> on <code>http://localhost:8080</code>.</p>
  <p>How can <code>gapi</code> work without problems while <code>gsi</code> claims that <code>The given origin is not allowed for the given client ID</code>.</p>
  <p><a href="https://i.stack.imgur.com/LKQYG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LKQYG.png" alt="enter image description here" /></a></p>
  <h2 id="gapi-lpyo">gapi</h2>
  <pre><code>&lt;script src=&quot;https://apis.google.com/js/api:client.js&quot; async defer&gt;&lt;/script&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>window.gapi.load('auth2', () =&gt; {
    const auth2 = window.gapi.auth2.init({ client_id })
    auth2.signIn().then(console.log)
  })
  </code></pre>
  <h2 id="gsi-4pbw">gsi</h2>
  <pre><code>&lt;script src=&quot;https://accounts.google.com/gsi/client&quot; async defer&gt;&lt;/script&gt;
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;g_id_onload&quot;
       :data-client_id=&quot;client_id&quot;
       data-login_uri=&quot;http://localhost:8080&quot;
       data-auto_prompt=&quot;false&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;g_id_signin&quot;
       data-type=&quot;standard&quot;
       data-size=&quot;large&quot;
       data-theme=&quot;outline&quot;
       data-text=&quot;sign_in_with&quot;
       data-shape=&quot;rectangular&quot;
       data-logo_alignment=&quot;left&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Errors out with: <code>The given origin is not allowed for the given client ID</code></p>