Integrating Auth0 into a Webpack Project

I’ve got a nice webpack-based React application moving towards “completion” (and I put that in quotes because I think a project is never really completed). One of the things I want to do is to integrate Auth0 – I like the presentation of the sign-in project. This article is not about how to configure Auth0 – they do an excellent job of that. Rather, it is about how to get Auth0 working in a Webpack environment. The example webpack project that they provide is, quite simply, wrong (UPDATE: Auth0 corrected the issues within 2 days of this blog being written. Another thing to love about Auth0 – a responsive team!). Here is how to really do it.

Install required components

Along with webpack, you also need a few uncommon loaders:

npm install --save-dev auth0-lock transform-loader json-loader brfs packageify ejsify

The auth0-lock package is the actual Auth0 UI. The json-loader is for including JSON files in the package. The final three packages (brfs, packageify and ejsify) are the same packages used by the Browserify version of the auth0-lock build. That leaves transform-loader, which allows you to use any browserify plugin within webpack. This basically allows you to use code designed for browserify within webpack.

Wondering where Auth0 went wrong with the sample? They left off brfs, packageify and ejsify from the devDependencies in the package.json file.

Adjust the webpack.config.js to compile Auth0

I work on a PC, not a Mac. As a result, the loaders provided within the sample did not work. The path separator is different between a PC and a Mac. Here are my loaders:

loaders: [
    // Javascript & React JSX Files
    { test: /\.jsx?$/, loader: jsxLoader, exclude: /node_modules/ },

    // Auth0-Lock Build
        test: /node_modules[\\\/]auth0-lock[\\\/].*\.js$/, 
        loaders: [ 'transform-loader/cacheable?brfs', 'transform-loader/cacheable?packageify' ]
        test: /node_modules[\\\/]auth0-lock[\\\/].*\.ejs$/, 
        loader: 'transform-loader/cacheable?ejsify' 
        test: /\.json$/, 
        loader: 'json' 

Note that my standard loader excludes the node_modules directory. The auth0-lock build explicitly maps the build.

Use Auth0Lock in your React code

I have the following in a React login controller:

import Auth0Lock from 'auth0-lock';

// and later, within the component

     * Lifecycle event - called when the component is about to mount -
     *  creates the Auth0 Lock Object
    componentWillMount() {
        if (!this.lock)
            this.lock = new Auth0Lock('rKxvwIoKdij6mwpsSvqi7doafDiGR3LA', '');

     * Event Handler to handle when the user clicks on Sign In button
     * @param {SyntheticEvent} event the button click
     * @returns {boolean} the result
    onClickedLogin(event) {
        const authOptions = {
            closable: true,
            socialBigButtons: true,
            popup: true,
            rememberLastLogin: true,
            authParams: {
                scope: 'openid email name'

         * Callback for the authentication pop-up
         * @param {Error} err - the error (or null)
         * @param {Object} profile - the user profile
         * @param {string} token - the JWT token
        const authCallback = (err, profile, token) => {
            this.lock.hide();       // Hide the auth0 lock after the callback

            if (err) {
                console.error('Auth0 Error: ', err);
                this.setState({ error: err });

  'token = ', token);
  'profile = ', profile);
        };, authCallback);

        // Click is handled here - nowhere else.
        return false;

Obviously, this does not actually do anything other than print stuff on the console. You will want to store the token and use that to access any resources you want. I’ve got a full redux store update happening when I get a valid login back.

One thought

Comments are closed.