Spioune•7h ago

Chrome Extension Auth

Hi guys, I have a chrome extension that is injected into a website and I have my main web application. Users can login to the main application with Google (using Convex Auth https://labs.convex.dev/auth) I am trying to share auth tokens with my extension. When users click "Login" on the extension, I open the main app in another tab, they sign in with google, I use window.sendMessage to send the token to the extension background script and get the token on the extension. Now that I have the token, I cannot get convex on the extension to authenticate. I tried client.setAuth(FetcherFunction, onChange). OnChange callback returns isAuthenticated=true but my react app is not rerendering and if I refresh the page the token is gone. I also tried sending the JWT+Refresh token from the web app localstorage to my extension storage. This works but I need to hard refresh the page to get my react app to rerender and force convex to get the tokens from extension storage. Any idea why client.setAuth(FetcherFunction, onChange) doesn't save token to storage and rerender my react app? How can I authenticate the 2nd convex app using the 1st convex app jwt token (without having to hard refresh the page)?

2 Replies

Sara•7h ago

Hi! can you share some sort of repository to this? I'm interested to see how you achieved the real time updates with the extension from my experience with making chrome extensions. you should point the user to your web application to signup/sign-in and then in the chrome extension you do something like this, where you grab the cookie from the domain, and you use it to fetch user information etc in the background script:

const getUserStatus = ({ callback }: GetUserStatusArg) => {
  chrome.cookies.getAll({ domain: domain }).then((cookies) => {
    const cookieString = cookies.map((cookie) => `${cookie.name}=${cookie.value}`).join('; ')
    const params = {
      headers: {
        cookies: cookieString,
      },
      method: 'GET',
    }

    fetch(`${domain}/api/user`, params)
      .then((response) => response.json())
      .then((data) => {
        callback({
          data,
        })
      })
      .catch((err) => {
        console.log('err', err)
      })
  })
}

const getUserStatus = ({ callback }: GetUserStatusArg) => {
  chrome.cookies.getAll({ domain: domain }).then((cookies) => {
    const cookieString = cookies.map((cookie) => `${cookie.name}=${cookie.value}`).join('; ')
    const params = {
      headers: {
        cookies: cookieString,
      },
      method: 'GET',
    }

    fetch(`${domain}/api/user`, params)
      .then((response) => response.json())
      .then((data) => {
        callback({
          data,
        })
      })
      .catch((err) => {
        console.log('err', err)
      })
  })
}

(I've never made an extension with convex before, I'll search up if someone has done this before, I remember @Barrel Of Lube once sent a resource)

Barrel Of Lube•3h ago

which convex client are you using there r 3 clients http, react, n just client i think

Chrome Extension Auth

Did you find this page helpful?