Ultimate Guide to Auth0 In a Chrome Extension Popup

Help
, , , ,
8

If you need to run Auth0 in Content Script or Background

Special thanks to @dhruv2204 for guiding me with this.

Use Manifest V2. Also Use @auth0/auth0-spa-js inside the background page and make the calls there.

The reason for this is because auth0 needs access to the DOM and background service workers (from manifest v3) do not have access to the DOM. Please not that manifest v2 will be deprecated soon. They just have not released an official deprecation date so for now this can work

Just use the chrome messaging API to call the the methods from content script if necessary. Doing this still works with the earlier mentioned methods.

Background.html

<script src="./background.js"></script>

Background.js:

import { Auth0Client } from '@auth0/auth0-spa-js'

const auth0 = new Auth0Client({
  domain: <YOUR_AUTH0_DOMAIN>,
  client_id: <YOUR_AUTH0_CLIENT_ID>,
  redirect_uri: <YOUR_CHROME_EXTENSION_URI> //chrome-extension:extensionid
})

const getToken = async () => {
  const token = await auth0.getTokenSilently()
  return token
}
1 Like