Gatsby: WebAuth is not a constructor - Gatsby v2 using Auth0

[imshuffling]

Having some problems running gatsby build command, see below.

I've been following along with this blog post here - https://auth0.com/blog/building-a-blog-with-gatsby-react-and-webtask/ (i know its for version Gatsby V1 but it has got me this far.)

All is working fine except for when I run gatsby build command - this might have something to do with SSR but not sure.

Here is my auth.js file.

import auth0 from 'auth0-js';
import { navigateTo } from "gatsby-link";

export default class Auth {
  auth0 = new auth0.WebAuth({
    domain: process.env.AUTH0_DOMAIN,
    clientID: process.env.AUTH0_CLIENT_ID,
    redirectUri: process.env.AUTH0_CALLBACK,
    audience: `https://${process.env.AUTH0_DOMAIN}/api/v2/`,
    responseType: 'token id_token',
    scope: 'openid profile email'
  });

  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
  }

  login() {
    this.auth0.authorize();
  }

  logout() {
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    localStorage.removeItem('user');
    // remove once dev is complete
    localStorage.setItem('logged_out', 1);
  }

  handleAuthentication() {
    if (typeof window !== 'undefined') {
      this.auth0.parseHash((err, authResult) => {
        if (authResult && authResult.accessToken && authResult.idToken) {
          this.setSession(authResult);
        } else if (err) {
          console.log(err);
        }
        // Return to the homepage after authentication.
        navigateTo('/');
      });
    }
  }

  isAuthenticated() {
    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }

  setSession(authResult) {
    const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);

    this.auth0.client.userInfo(authResult.accessToken, (err, user) => {
      localStorage.setItem('user', JSON.stringify(user));
    })

    // remove once dev is Complete
    localStorage.removeItem('logged_out');
  }

  getUser() {
    if (localStorage.getItem('user')) {
      return JSON.parse(localStorage.getItem('user'));
    }
  }

  getUserName() {
    if (this.getUser()) {
      return this.getUser().name;
    }
  }
}

I'm using auth0-js version 9.8.2.

Not sure where I'm going wrong here.

System:
    OS: macOS 10.14.2
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 9.2.0 - ~/.nvm/versions/node/v9.2.0/bin/node
    Yarn: 1.6.0 - ~/.nvm/versions/node/v9.2.0/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v9.2.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0
    Safari: 12.0.2
  npmPackages:
    gatsby: 2.0.0-beta.59 => 2.0.0-beta.59
    gatsby-image: next => 2.0.0-beta.7
    gatsby-plugin-google-analytics: ^1.0.31 => 1.0.31
    gatsby-plugin-google-tagmanager: ^1.0.19 => 1.0.19
    gatsby-plugin-manifest: next => 2.0.2-beta.5
    gatsby-plugin-offline: next => 2.0.0-beta.9
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
    gatsby-plugin-sass: next => 2.0.0-beta.10
    gatsby-plugin-sharp: next => 2.0.0-beta.7
    gatsby-source-contentful: next => 2.0.1-beta.15
    gatsby-transformer-remark: next => 2.1.1-beta.6
    gatsby-transformer-sharp: next => 2.1.1-beta.6
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[sidharthachatterjee]

Hey @imshuffling

Can't seem to reproduce this, can you please link to a reproduction repo?

On a side note, your auth.js file does happen to have an import { navigateTo } from "gatsby-link"; which is deprecated in v2. You may replace that with import { navigate } from "gatsby"!

[imshuffling]

Thanks @sidharthachatterjee

I've added the repo here - https://github.com/imshuffling/auth0-test

[sidharthachatterjee]

Thanks @imshuffling

I've sent you a pull request fixing the issues at https://github.com/imshuffling/auth0-test/pull/1

Here were the problems

• the webpack config was being overridden to ignore auth0-js, I removed that because it is not necessary (please correct me if I am wrong)
• some code in Layout was trying to access localStorage in the render function which was breaking during build because browser APIs aren't available at build time (this works in develop because we currently don't do any SSR in development)

We're working on converging behaviour in develop and build at https://github.com/gatsbyjs/gatsby/issues/10706 so that one is able to catch these issues _earlier_ (during develop) in the future.

In the mean time, I hope this solves your issue

[imshuffling]

Thanks @sidharthachatterjee

Getting this error now when i run gatsby develop

[sidharthachatterjee]

@imshuffling Can you please clear the .cache directory and try again?

[imshuffling]

Whey thanks gatsby develop works.

Though when I goto gatsby build i see this.

[sidharthachatterjee]

I can't seem to reproduce this @imshuffling

master in your repository works fine for me after the merge

Could you clear .cache, delete node_modules, run npm install and try again?

[jonniebigodes]

@imshuffling i've been browsing your code and you could do the same sanity checks you're doing in the method handleAuthentication() to the one you're experiencing with isAuthenticated and so on, namely

if (typeof window !== 'undefined') {
.....
}

This might be cumbersome, but it can be a bug saver.

[imshuffling]

That was strange - working now.

Thanks