This tutorial demonstrates how to use the Auth0-Chrome SDK to add authentication and authorization to your Chrome extension. We recommend you to Log in to follow this quickstart with examples configured for your account.
I want to integrate with my app15 minutes
I want to explore a sample app2 minutes
Get a sample configured with your account settings or check it out on Github.
Get Your Application Keys
When you signed up for Auth0, a new application was created for you, or you could have created a new one.
You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
You need the following information:
- Client ID
Install the Dependencies
The tutorial is based on a sample application which uses Universal Login and Chrome's
jwt-decode with npm. The
jwt-decode library is useful for decoding JSON Web Tokens and will be used to check the expiry time in this example.
dist folder of
Auth0Chrome contains a webpack bundle for the package, including a minified version.
manifest.json file to run the
auth0chrome script, along with an
main.js script for your project. The
default_popup should be set to a file called
browser_action.html which will be used to provide a view to the popup.
Integrate Auth0 in your Application
The client ID and domain for your application are used to connect to Auth0 and these will be required when instantiating
Auth0Chrome. Create an
env.js file and populate it with your application keys. Alternatively, you can pass these keys to the
Auth0Chrome constructor directly.
Create the Main Popup
browser_action.html file in
src/browser_action and provide a view for your extension's popup. In this example the view has controls for allowing the user to log in and log out, as well as an area for displaying the user's profile after authentication.
jwt-decode library is included within a
script tag, as is a
browser_action.js file. It's the
browser_action.js file that will be used to control the view.
At a minimum, the Chrome extension needs to have views and logic to handle two cases: when the user is authenticated and when they are not. JWT authentication is stateless by nature, so the best indication we have that the user is authenticated is whether they have an unexpired token saved.
When the user is authenticated, a profile area should be displayed. When they aren't authenticated (they don't have a JWT or it becomes expired), the "Log In" button should be shown.
Two functions are provided to handle the scenarios described above. The
renderProfileView function fetches the user's profile from Auth0's API at the
/userinfo endpoint and shows the profile in the popup. The
renderDefaultView function displays the Log In button and emits a message to trigger the authentication flow when clicked. Note that the user's Access Token is attached as an
Authorization header in the call to the
main function takes the
authResult object saved in local storage and renders the profile view if the user's ID Token is unexpired, or the default view if it is expired.
Initiate the Authentication Flow
browser_action.js file controls the popup view and responds to button clicks, but the logic for the authentication flow still needs to be implemented.
main.js file in the
src directory and set it up to listen for the
authenticate message that is emitted when the Log In button is clicked.
authenticate message is received, an
Auth0Chrome instance is created and its
authenticate method is called, which opens a new window showing Auth0's hosted Lock.
Auth0Chrome constructor takes the domain and client ID for your application, and the
authenticate method takes an
options object which allows you to customize the authentication flow. The
authenticate method returns a promise and the result from the authentication process can be retrieved when it resolves. In this example, the result is saved in local storage immediately for future use and a Chrome notification is created to let the user know they have successfully logged in.
Configure Auth0 Application Settings
Chrome extensions are packaged as
.crx files for distribution but may be loaded "unpacked" for development. For more information on how to load an unpacked extension, see the Chrome extension docs.
When loading your application as an unpacked extension, a unique ID will be generated for it. In your application settings, you must whitelist your callback URL (the URL that Auth0 will return to once authentication is complete), logout URL and the allowed origin URL.
In the Allowed Callback URLs section, whitelist your callback URL.
In the Allowed Logout URLs section, whitelist your
In the Allowed Origins (CORS) section, whitelist your chrome extension as an origin.
Once the extension is published in the Chrome Web Store the Callback URL and the CORS origins used for development must be changed.