Chrome extension: best practise when it comes to authentication

Question

I'm developing a chrome extension based on Extension API and I need to authenticate against my own online service. I've read lots of documentation, I know that I need to use OAuth2 and that I should probably use chrome.identity.launchWebAuthFlow https://developer.chrome.com/apps/app_identity#update_manifest

I managed to get login working using launchWebAuthFlow. The only problem is that it wants to authenticate even though I'm already logged in using a browser session. So extension's auth system is separated from the one in a browser.

Extensions like Grammarly can detect whether I'm logged in Grammarly in a browser and adjust popup content based on that. From what I had a look at their source code, it seems like they're using cookies to detect the session. An extension can access cookies using

chrome.cookies.get({ url: 'http://localhost:8777', name: 'sessionid' },
    function (cookie) {
      if (cookie) {
        console.log(cookie.value);
      }
      else {
        console.log('Can\'t get cookie! Check the name!');
      }
    })

Is this really the way Extension API works? Can't I use (IMHO) more secure Identity API and re-use browser session?

Answer 1

The best practice for authentication is to manage it using cookies - this way, the web app and the extension can have a common session.

You would send the jwt token as a cookie with these options (javascript)

{
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        maxAge: 1000 * 60 * 60 * 24 * 60, // 60 days,
        sameSite: 'None'
}

(You might want to check your chrome://flags)

And this cookie will automatically be stored for subsequent requests.

In the client -

You should create a new cookie variable.

        document.cookie = "signedin=true"

import Cookies from 'js-cookie'

if(Cookies.get('signedin') {
  // ... redirect to dashboard
}
else {
  // ... show login
}