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
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?
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./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?
Share Improve this question asked Sep 1, 2017 at 7:34 Jan VorcakJan Vorcak 20k15 gold badges56 silver badges90 bronze badges 7- 1 Maybe JWT tokens will suit you. I use it in couple extensions. – Denis L Commented Sep 1, 2017 at 8:25
- Thanks for your ment @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 Commented Sep 1, 2017 at 8: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 (after succeeding auth, obviously). And you can put JWT to the cookies, but I prefer headers for that. – Denis L Commented Sep 1, 2017 at 9:28
- It is not an answer or advice, just my thoughts. – Denis L Commented Sep 1, 2017 at 9: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 Commented Feb 25, 2019 at 9:28
2 Answers
Reset to default 6The best practice for authentication is to manage it using cookies - this way, the web app and the extension can have a mon 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
}
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.