Sharing next-auth authentication with a Chrome extension

[YannHulot]

Hi there,

I am kind of new to next-auth and to authentication flows on the web in general so please forgive me if what I am asking is evident or stupid.

I am using next-auth to authenticate users on my Nextjs app. I only use the Google provider and use the database strategy to save the sessions in my MongoDB.

I am also building a Chrome extension that ideally would be able to interact with the NextJS app.

By interact I mean, retrieve data and be able to know if a user is currently logged in to the web app and if so retrieve the profile and/ or make authenticated calls to the API functions of the web app.

I guess what I am looking for is the flow you see in many current extensions nowadays, where if you log in on the website, you are automatically logged in on the extension, and if you log out from one of them, you should be logged out as well on the other.

Currently, my approach is when a user opens the extension, I make a request to api/auth/session to retrieve the session.

When logged in, it actually works and I get the session data and when not logged it, it fails, which is expected.

With the session data, I can infer that a user is logged in.

In the session data, I add a custom JWT that I store temporarily in the state of the extension(not in local storage, just in a useState variable). When the extension popup is closed, the state is wiped, so i don't think this poses an issue security wise.

I want to use the JWT to make calls to the API functions of the web app that would verify the JWT signature before allowing the handlers to receive/send the data back to the extension.

My questions are as follows:

• Is this the way to go about it or am I making this extra complicated?
• Is passing a JWT in the session OK or should that be done another way?
• Is there any other way to know if a user is logged in on the web app instead of calling api/auth/session?

Thanks in advance for your help on this matter.

[YannHulot]

So I will answer my own question and will try to update this discussion as I make changes.
My first approach was to use the api/auth/session endpoint to get the session data containing the JWT.

Unfortunately, that approach was flawed as I got into many CORS errors as I was hitting that endpoint from the extension running in another tab with a different origin.

I needed a way to get a JWT in the extension.

So the idea is when a user log in, I redirect them to the protected route. In this case, the account page which is server side rendered.

In the getserversideprops hook, I check that the user is logged in, then generate a JWT.
Then I send the JWT using the window.postMessage function.

That message is then received in a content_script that runs only on my site and is part of the extension.
Once I have the JWT I store it into the the chrome local storage which can be accessed by the extension.

This question help me find the answer:
https://stackoverflow.com/questions/24651842/sharing-a-local-storage-object-across-a-web-app-and-a-chrome-extension

So now we have a JWT, I created a few API endpoints that validate the JWT in the headers and return the user's data.
Those endpoints can only be hit by two domains origins, my own and the domain of where the extension is supposed to be running.

So now I can retrieve the user data from the extension running in another tab from an origin that is not my domain.

For now this solution very much feels like duck tape and pieces of strings put together, but it seems to work pretty well, so I ll try to refine it and harden it.

If someone has any feedback or a better way to do things I am all hears.

[cguagenti]

@YannHulot I'm exactly in the same situation. Do you refresh the token? If yes, do you have an issue with the web app being disconnected since the JWT is not going to match?

[Dizotoff]

Here's some very bare bone implementation of what @YannHulot has suggested for the ones who new to extensions.

content.js:

window.addEventListener("message", (event) => {
  if (event.source !== window) {
    return;
  }
  const { jwt } = event.data;
  if (jwt) {
    chrome.storage.local.set({ jwt }, () => {
      console.log("JWT saved to local storage", jwt);
    });
  }
});

background.js:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "getJwt") {
    chrome.storage.local.get(["jwt"], ({ jwt }) => {
      sendResponse({ jwt });
    });

    return true;
  }
});

popup.js

const statusElement = document.getElementById('status');
const loginButton = document.getElementById('login');

chrome.runtime.sendMessage({ type: 'getJwt' }, (response) => {
  const jwt = response.jwt;

  if (jwt) {
    statusElement.textContent = 'JWT token found!';
    loginButton.style.display = 'none';
  } else {
    statusElement.textContent = 'JWT token not found.';
    loginButton.style.display = 'block';
    loginButton.addEventListener('click', () => {
      chrome.tabs.create({ url: 'http://localhost:3000/dashboard/authorize' });
    });
  }
});

manifest.js

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "tabs", "storage"],

  "content_scripts": [
    {
      "matches": ["http://localhost:3000/*"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  
</head>
<body>
  <h1>My Extension</h1>
  <p id="status">Checking for JWT token...</p>
  <button id="login">Log in</button>

  <script src="popup.js"></script>
</body>
</html>

[mustson]

I need some help here to see if I understand whats going on.

User is redirected to perform the authorization on the auth page and then the extension saves the JWT to local storage?

[guillaume-miara]

@YannHulot , @cguagenti, @Dizotoff , thanks so much for your question and comments on the topic!
Curious to know if you ended up figuring this out and if so what approach you took.
We're also trying some hacky approaches trying to pass down the auth token and csrf token cookies to the extension to set them there. But there must be a better way.

Did you guys end up figuring a better approach?

[xcaptain]

I'm facing the same problem, I use chrome.identity.launchWebAuthFlow to handle google oauth login flow, but I don't know how to integrate with my existing auth.js website.

I will try the above chrome.tabs.create({ url: 'http://localhost:3000/dashboard/authorize' }) to see if I can interact with the existing web authentication flow and store authjs-session-token in extension storage.