Auth0 in Firefox Add on

Question

I have a react application with authentication managed by Auth0.

I want to create browser extensions with users sharing their sessions between the web app and the extension.

I successfully followed this guide and it works well for google chrome and firefox in development. However, the callback_uri needs to be whitelisted in my Auth0 dashboard, and this is going to be a problem for firefox since uuid are non deterministic in firefox and change at every install, so the url moz-extensions://uuid cannot be used as a callback_uri

I can't seem to find a solution, any advice ?

Cheers

Answer 1

I managed to do it, it's working for both Chrome and Firefox and I think it is even cleaner than the solution I was trying to work with.

Instead of using browser.runtime.getURL("") which translate to something like moz-extension://[uuid] or chrome-extension://[uuid] as redirect uri, and high level Auth0 helpers like getAccessTokenSilently, one need to use the identity api and Auth0 low level functions.

Here's a minimal working example:

• Step 1:

Get an extension uuid for chrome

• Step 2:

In your Auth0 application dashboard:

Add to Allow Origins (CORS) chrome-extension://YOU_UNIQ_UUID

Add to Allowed Callback URLs https://UNIQ_ID_CHROME.chromiumapp.org/, https://UNIQ_ID_FIREFOX.extensions.allizom.org/

The way to retrieve those URLS is described here

• Step 3: (pseudo code):

manifest.json:

...
"permissions": [
    "cookies",
    "identity",
    "http://YOUR_API.com/*",
    "https://YOUR_AUTH0_TENANT.auth0.com/*" // ! required for firefox
  ]

Configure Auth0 (in my case using an Auth0-react Provider):

<Auth0Provider
      domain={YOUR_AUTH0_DOMAIN}
      clientId={YOUR_AUTH0_CLIENT_ID}
      redirectUri={browser.identity.getRedirectURL()} // the important bit
      scope={YOUR_AUTH0_SCOPES}
      cacheLocation={"localstorage"}
      useRefreshTokens={true}
>
    <Popup />
<Auth0Provider>

Popup:

const {
    buildAuthorizeUrl,
    handleRedirectCallback,
    logout,
} = useAuth0();

const cookie = await browser.cookies.get({
    url: https://YOUR_APP_URL.com,
    name: `auth0.${YOUR_AUTH0_CLIENT_ID}.is.authenticated`,
});
if (cookie?.["value"] === "true") {
    const authUrl = await buildAuthorizeUrl();
    const redirectCallback = await browser.identity.launchWebAuthFlow({
        interactive: false,
        url: authUrl,
    });
    await handleRedirectCallback(redirectCallback);
} else {
    // ! we use localOnly because we are already logged out from the app.
    logout({ localOnly: true });
}

From there, you can use other Auth0 methods like isAuthenticated, isLoading or getIdTokenClaims if you need.

I hope this will help someone in my situation.