WebAuth is not a constructor - Gatsby v2

[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.

[luisrudge]

Hi, this doesn't look like a bug in the SDK. Please reach out to our amazing support team at https://support.auth0.com so they can better assist you with your scenario.

[joaquinaraujo]

Hi @imshuffling, it worked?

[hunterbecton]

@imshuffling Did you ever solve this? I'm running into the same thing.

[imshuffling]

@hunterbecton Managed to get it working in the end, do you have a test repo I can see?

[atmollohan]

@imshuffling Was there any update to this issue? Im seeing the same error when I run npm run build from my gatsby site

[astrolemonade]

I have the same error! Any information on how did you solve the problem?