next-auth + Chrome extension - google-chrome-extension

Question

I would like to use next-auth on a site that has a front-end as well as a backend. That is easy with next-auth, however, I can't figure out a way of authenticating users from a Chrome extension that would communicate with the backend.
The idea is to create data on the site and be able to use it with the Chrome extension for the user that created it.
I can't store secrets on the Chrome extension.
Any ideas?
I have an idea of authenticating users like on TVs and other devices.. they generate a code on the site and insert it on the Chrome extension. Of course, it would be valid for a short time.
But before I go on that road I would like to hear if someone has a better solution.

Answer 1

What worked for me was to make a request from the extension to the next-auth session endpoint: /api/auth/session
If a session doesn't exist, I'll open a new tab with the login page then go from there.
Here's what my manifest.json looks like:
{
"manifest_version": 3,
"name": "Timer Extension",
"version": "1.0.0",
"description": "Hello Chrome World!",
"icons": {
"16": "grin.png",
"48": "grin.png",
"128": "grin.png"
},
"action": {
"default_icon": {
"16": "grin.png",
"24": "grin.png",
"32": "grin.png"
},
"default_title": "Timer Extension Action Title",
"default_popup": "popup.html"
},
"background": {
"service_worker": "authCheck.js"
},
"host_permissions": [
"https://*/"
]
}
Here's the authCheck.js service worker:
chrome.runtime.onMessage.addListener(
function (request, sender, onSuccess) {
console.log("running check")
fetch("<your-domain>/api/auth/session", {
mode: 'cors',
})
.then(response => response.json())
.then((session) => {
if (Object.keys(session).length > 0) {
onSuccess(session)
} else {
onSuccess(null)
}
})
.catch(err => {
console.error(err);
onSuccess(null)
})
return true; // Will respond asynchronously.
}
);
Then in the js file for the default_popup html I have this:
chrome.runtime.sendMessage(
{action: 'AUTH_CHECK'},
(session) => {
if (session) {
//user is logged in
} else {
//no session means user not logged in
chrome.tabs.create({
url: '<link to your login page>'
});
}
}
);