title: Github Login (oAuth ) from react- chrome extension
body: <p>I am building a simple chrome extension which will make some simple API calls.</p>
  <p>For this, I need the user to be logged in with a Github Account, however, if I set up a new oAuth app on github, I need to add <code>Homepage URL</code> and <code>Authorization callback URL</code> which, as far as I understand, we don't have from a Chrome Extension popup.</p>
  <p>IMPORTANT: I don't want to use firebase. All I need is to be able to get the user code, which I can process in my backend after to get the token and all the rest.</p>
  <p>Need you help here ! :-)</p>
  <p>Here is my background file</p>
  <pre><code>const GITHUB_AUTHORIZATION_UL = &quot;https://github.com/login/oauth/authorize&quot;;
  const CLIENT_ID = encodeURIComponent(&quot;xxxx&quot;);
  const SCOPE = encodeURIComponent(&quot;user:email&quot;);
  
  let user_signed_in = false;
  
  function create_auth_endpoint() {
    let endpoint_url = `${GITHUB_AUTHORIZATION_UL}
  ?client_id=${CLIENT_ID}
  &amp;scope=${SCOPE}`;
  
    return endpoint_url;
  }
  
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) =&gt; {
  
    if (request.message === 'login') {
        chrome.identity.launchWebAuthFlow({
            url: create_auth_endpoint(),
            interactive: true
        }, (response) =&gt; {
          console.log(response)
            if (chrome.runtime.lastError) {
                console.log(chrome.runtime.lastError)
                console.log(&quot;Could not authenticate.&quot;);
                sendResponse('fail');
            } else {
                user_signed_in = true;
                sendResponse('success');
            }
        });
  
        return true;
    } else if (request.message === 'logout') {
        user_signed_in = false;
  
        sendResponse('success');
    }
  });
  </code></pre>
  <p>And my login handler from popup.tsx</p>
  <pre><code>  const handleLogin = () =&gt; {
      chrome.runtime.sendMessage({ message: 'login' }, function (response) {
        console.log(response)
        if (response === &quot;success&quot;) {
          window.close();
        }
    });
  </code></pre>
  <p>Manifest:</p>
  <pre><code>{
    &quot;name&quot;: &quot;test ext&quot;,
    &quot;description&quot;: &quot;test ext&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;manifest_version&quot;: 3,
    &quot;icons&quot;: {
      &quot;16&quot;: &quot;favicon-32.png&quot;,
      &quot;48&quot;: &quot;favicon-32.png&quot;,
      &quot;128&quot;: &quot;favicon-32.png&quot;
    },
    &quot;action&quot;: {
      &quot;default_popup&quot;: &quot;popup.html&quot;,
      &quot;default_title&quot;: &quot;test ext&quot;,
      &quot;default_icon&quot;: &quot;favicon-32.png&quot;
    },
    &quot;permissions&quot;: [&quot;storage&quot;, &quot;identity&quot;],
    &quot;options_page&quot;: &quot;options.html&quot;,
    &quot;background&quot;: {
      &quot;service_worker&quot;: &quot;background.js&quot;
    },
    &quot;content_scripts&quot;: [
      {
        &quot;matches&quot;: [&quot;&lt;all_urls&gt;&quot;],
        &quot;js&quot;: [&quot;contentScript.js&quot;]
      }
    ]
  }
  
  </code></pre>
  <p>I tried with various options for the requested url for github such as : http://chrome-extension://CHROME_ID/popup.html
  =&gt; This fails directly.</p>
  <p>Interestingly, if I just input <a href="https://www.google.com" rel="nofollow noreferrer">https://www.google.com</a>, I have a popup with the github login, then I am directly to google and it fail.
  However, the extension authorization is added as &quot;accepted&quot; in my github account.</p>
  <p>Here is my log from the background for response :
  <code>{message: 'The user did not approve access.'}</code>eventhough I approved it. Once I am redirected to the popup with <a href="http://www.google.com" rel="nofollow noreferrer">www.google.com</a> it fails</p>