How I Added Auth0 Authentication to a Chrome Extension (Manifest V3) Without Using a Backend

I needed to add authentication to my Chrome extension. But I didn’t want to deal with a separate website, a backend server, or a redirect handler. So I built the entire authentication flow inside the extension using Auth0, Chrome’s APIs, PKCE, and an offscreen document.

Architecture diagram showing Auth0 authentication inside a Chrome extension using Manifest V3, PKCE, offscreen document, and chrome.identity.launchWebAuthFlow without a backend server.

Step 1: Create an Application in Auth0

Go to your Auth0 dashboard. Create a new application and choose Single Page Application.

Auth0 dashboard screenshot showing how to create a Single Page Application for Chrome extension authentication using OAuth 2.0.

After creating it, copy your Domain and Client ID.

Auth0 application settings displaying Domain and Client ID used for Manifest V3 Chrome extension authentication.

Then add https://<extension-id>.chromiumapp.org/ to your Allowed Callback URLs.

Auth0 Allowed Callback URL configuration with chromiumapp.org redirect URL for Chrome extension OAuth flow.

Step 2: Set Up Your MV3 Manifest

Add these permissions to your manifest.json:

{
  "permissions": ["storage", "identity", "offscreen"],
  "host_permissions": ["https://your-tenant.us.auth0.com/*"]
}

Step 3: Pin Your Extension ID

Chrome assigns a random extension ID every time you load an unpacked extension. To fix it, generate an extension key and add it to your manifest.

Chrome extensions page showing Pack Extension option used to generate a fixed extension ID for OAuth callback stability.

Step 4: Use PKCE

Chrome extensions cannot safely store a client secret, so we use Authorization Code Flow with PKCE.

PKCE OAuth 2.0 flow diagram showing code_verifier generation, SHA-256 hashing to code_challenge, and verification in Auth0 for Chrome extension authentication.

Step 5: Create an Offscreen Document for Crypto

Manifest V3 service workers do NOT reliably support crypto.subtle. Use Chrome’s Offscreen Documents API to handle PKCE generation safely.

Manifest V3 architecture diagram showing background service worker communicating with offscreen document to generate PKCE values using crypto.subtle.

Step 6: Launch the Auth Window

Call chrome.identity.launchWebAuthFlow(). Chrome handles the redirect internally.

Auth0 Universal Login screen opened using chrome.identity.launchWebAuthFlow in a Manifest V3 Chrome extension.

Conclusion

Everything lives inside the extension. No backend, no external website, no redirect page. Implementation becomes straightforward once you handle the MV3 quirks.