How to add auth-flow between your webapp and extension

#extensions #nextjs #jwt #plasmo

Hey everyone! 👋

So I just wrapped up this really cool project and wanted to share what I learned. I got to work on a fullstack Chrome extension for a US company, and honestly, it was such a fun challenge!

The Challenge

They needed a Chrome extension with some pretty neat features:

Auto-apply to LinkedIn jobs
AI integration for those tricky application questions
Auto-fill for external job forms
Smart keyword matching
And a bunch of other cool stuff

We ended up going with Plasmo for the extension framework - honestly its the best out there to build chrome extensions: https://www.plasmo.com/

The Real Fun Part

Here's where things got interesting. After building the extension, they wanted it to sync seamlessly with their main website through JWT auth. The tricky part? How do we actually know if someone's logged in on the website from inside the extension?

My Solution (Pretty Simple Actually)

So Plasmo gives you these two main pieces to work with:

content.tsx
background.ts

Step 1: Capture the token in your webapp
In your React/Next.js app, find where you're handling the login POST request. If you're using Zustand or any global store, even better - just grab it from there.

Once you have the authToken, create a 'use client' component and add this:

window.postMessage(
  {
    source: "your-webapp-name",
    type: "AUTH_TOKEN",
    token: authToken // Your actual token here
  },
  "*"
)

This basically broadcasts the token from your webapp to the extension.

Step 2: Listen in the content script
In your extension's content.tsx, set up a listener:

const postMessageListener = (event: MessageEvent) => {
  if (
    event.source !== window ||
    !event.data ||
    event.data.source !== "your-webapp-name" ||
    event.data.type !== "AUTH_TOKEN"
  ) {
    return
  }

  const token = event.data.token
  chrome.runtime.sendMessage({
    type: "SAVE_AUTH_TOKEN",
    token
  })
}

Step 3: Store it in the background
Finally, in your background.ts:

if (message.type === "SAVE_AUTH_TOKEN") {
  console.log("Got the token!", message)
  chrome.storage.local.set({ authToken: message.token }, () => {
    console.log("Token safely stored:", message.token)
    sendResponse({ success: true })
  })
  return true // Keep the response channel open
}

And That's It! 🎉

Three simple steps and voila - your extension and webapp are synced seamlessly.
The cool part is you can extend this pattern for logout events, profile updates, or really anything you need to sync between the two.

I'm honestly still amazed at how clean this solution turned out. Sometimes the simplest approaches work the best!

If you have any suggestions or feedback, please comment below, would love to know and learn more about this!

Happy coding guys :)

btw this is me debugging the code ai generates🙂