Auth0 authentication with Gridsome server side rendering breaks with window is undefined

Question

I've implemented the auth0 Vuejs according to their tutorial with Gridsome, and it worked fine in develop. However, when I run gridsome build the build fails because window is undefined in a server context.

I've found a few issues in Auth0-js lib that claim that Auth0 should only be used in client side, however, due to the way Gridsome works, I can't seem to find a way to only load the Auth0-js in client side.

Gridsome has main.js where I would add plugins, and in there, I define the routing for authentication.

Main.js

import AuthServicePlugin from '~/plugins/auth0.plugin'
import auth from '~/auth/auth.service'

export default function (Vue, { router, head, isClient }) {
  ...
  Vue.use(AuthServicePlugin)
  //Handle Authentication
  router.beforeEach((to, from, next) => {
    if (to.path === "/auth/logout" || to.path === "/auth/callback" || auth.isAuthenticated()) {
      return next();
    }

    // Specify the current path as the customState parameter, meaning it
    // will be returned to the application after auth
      auth.login({ target: to.path });

  })

Based on a Gatsbyb.js auth0 implementation tutorial, I've tried to exlude auth0-js from webpack loading with null-loader

gridsome.config.js

configureWebpack: {
    /*
     * During the build step, `auth0-js` will break because it relies on
     * browser-specific APIs. Fortunately, we don’t need it during the build.
     * Using Webpack’s null loader, we’re able to effectively ignore `auth0-js`
     * during the build. (See `src/utils/auth.js` to see how we prevent this
     * from breaking the app.)
    */
    module: {
      rules: [
        {
          test: /auth0-js/,
          use: 'null-loader',
        },
      ],
    },

I would love to get some ideas about how to include and load Auth0 only in client side context with Gridsome

From your second code snippet `(See src/utils/auth.js to see how we prevent this from breaking the app.)` Go [here](https://auth0.com/blog/securing-gatsby-with-auth0/) and search the page for `// src/utils/auth.js` - about 1/4 of the way down the page they supply code for how they prevent this from breaking the app (did you read those comments?) — Matt Oestreich, May 25 '19 at 22:00
I followed that exact tutorial, and couldn't get the auth.js from their example match with the auth.js from their VUE example. For vue, you need to create a vue plugin. And apparently this creates the difference, since the webpack config imports all of the plugin requirements at build time on the server, and auth0-js code has references to window objects — Altryne, May 28 '19 at 18:57
@HelderLucas actually moved to nuxtjs and it's much simpler with @nuxtjs/auth module, took me half a day without issues — Altryne, Sep 28 '20 at 16:45
@Altryne thanks for the reply. Exactly the same route I'm inclined to take — Helder Lucas, Sep 28 '20 at 20:25

score 3 · Answer 1 · answered Oct 02 '19 at 10:15

I had the same problem with using Firebase Authentication with Gridsome.

It seems that code in the created() lifecycle hook gets executed in the Gridsome build process (which is a server environment), but code in the mounted() lifecycle hook only executes in the browser!

The solution was to put all the code that should only run in the client in the mounted lifecycle hook.

mounted() {
  // load the `auth0-js` here
  ...
}

In my instance (with Firebase Auth) this was the solution:

In the Default Layout component:

const app = import("firebase/app");
    const auth = import("firebase/auth");
    const database = import("firebase/firestore");
    const storage = import("firebase/storage");

    Promise.all([app, auth, database, storage]).then(values => {
      // now we can access the loaded libraries !
    });
}

Auth0 authentication with Gridsome server side rendering breaks with window is undefined

1 Answers1