16

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?

Jan Vorcak
  • 19,261
  • 14
  • 54
  • 90
  • 1
    Maybe [JWT](https://jwt.io/) tokens will suit you. I use it in couple extensions. – Denis L Sep 01 '17 at 08:25
  • Thanks for your comment @Deliaz, but can you please elaborate how exactly? I want to 'reuse' my browser session in my extension, so I would need to save JWT in cookies either way right? – Jan Vorcak Sep 01 '17 at 08:34
  • 2
    Am I right that after login on your website you also want to see that you are signed in the extension? In this case, I guess, you can send a JWT token to the extension using [External Message Passing](https://developer.chrome.com/apps/messaging#external-webpage) (after succeeding auth, obviously). And you can put JWT to the cookies, but I prefer headers for that. – Denis L Sep 01 '17 at 09:28
  • It is not an answer or advice, just my thoughts. – Denis L Sep 01 '17 at 09:29
  • 1
    @JanVorcak, could you please summarize what you ended up doing in the answer and post it here? It would be really helpful – Vladyslav Zavalykhatko Feb 25 '19 at 09:28
  • @VladyslavZavalykhatko I'm sorry, but I don't really remember which option I've used in the end and I can't check the source code anymore. – Jan Vorcak Feb 25 '19 at 13:03
  • Grammarly does this by listening for all cookie changes https://stackoverflow.com/a/64414204/3574379 – srghma Oct 19 '20 at 05:11

2 Answers2

3

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
}
akkhil
  • 359
  • 4
  • 14
0

Like you noticed, launchWebAuthFlow will not leverage your existing browser session. If you have the tabs permission, you can read the oauth grant from the window.title using urn:ietf:wg:oauth:2.0:oob:aut as your redirect URL. See my other answer for more information about it. This SA answer has example code.

kzahel
  • 2,765
  • 1
  • 22
  • 31