Lock: React starter kit + auth0lock document is not defined

[AlastairTaft]

I'm still a webpack and react newbie but I was wondering if you could help me solve this error.

I've added the loaders for webpack that you mention in the README. I had to also trial and error packages and use npm install ejs-compiled-loader to get passed a webpack error.

Now everything seems to compile but it trips up on

/myproject/node_modules/auth0-lock/lib/insert-css/index.js:13
  var head = document.getElementsByTagName('head')[0];
             ^
ReferenceError: document is not defined
    at insert (/myproject/node_modules/auth0-lock/lib/insert-css/index.js:13:14)
    at Object.<anonymous> (/myproject/node_modules/auth0-lock/lib/insert-css/index.js:30:1)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/myproject/node_modules/auth0-lock/index.js:5:1)
    at Module._compile (module.js:434:26)

I'm using the React starter kit. I think due to it being an isomorphic app it doesn't run server side (on node) where the document object doesn't exist.

Is there any work around?

[AlastairTaft]

I think I understand this is a client side only package, so to get around it I made sure it was only required in the React componentDidMount function (this is only run on the client, not the server). Seems to work, however I don't like not putting all my require / import statements at the top, but it'll use this for now.

e.g.

...
  componentDidMount() {
    this.createLock();
    this.setState({idToken: this.getIdToken()})
  }

  createLock() {
    var Auth0Lock = require('auth0-lock')
    this.lock = new Auth0Lock(this.props.clientId, this.props.domain);
  }
...

On second thought this would cause the DOM to render twice, a better solution would be to check if the DOM is available and handle accordingly. React seems to have a canUseDOM method

[anomaly44]

I'm having the same problem. I feel like the auth0-lock is a bit outdated, it should have all the features to work in isomorphic settings

[stuartleylandcole]

Is there any update from the Auth0 team on this issue? Are there any plans to make the Auth0 Lock component work on isomorphic apps?

[gnandretta]

Hi, we are currently focusing in a new version of Lock and isomorphic support is not a priority right now. Once we complete the new version we'll review this and see what kind of support we could provide.

[Rohit-cheddr]

Would you guys happen to know of any workarounds for this? Perhaps some way to only initialize Auth0Lock once in the client?

[rvetere]

woaa... such bad news.. extremely disappointing!!!

well a work-around i'm already thinking of -> webpack's require.ensure

the require.ensure will pack away the inner code into a separate module - if you somehow can ask in your code for a "_CLIENT_" or "_SERVER"_ - just to know where you ware.. you can leave it completely out on the server but still lazy load/include it on the client..

it's what i have to try now for our stack (which is OF COURSE, truly isomoprhic.. it's 2016... by the way.. :P)

[majiddadashi]

This is a pretty important issue. I hope you guys prioritize this soon. I used @rvetere 's workaround and made sure I'm only initializing the Auth0Lock when my component is being rendered in the browser:

import ExecutionEnvironment from 'exenv'
...
export default class Login extends Component {
  constructor(props){
    super(props);
    if(ExecutionEnvironment.canUseViewport){
      this.lock = new Auth0Lock('...', '...');
    }
    this.showLock = this.showLock.bind(this);
  }
...

There might be better workarounds but this worked for me!

[Rohit-cheddr]

I basically did the same thing. Not much other choice.

On Wed, Jun 15, 2016, 11:34 PM Majid Dadashi [email protected]
wrote:

This is a pretty important issue. I hope you guys prioritize this soon. I
used @rvetere https://github.com/rvetere 's workaround and made sure
I'm only initializing the Auth0Lock when my component is being rendered
in the browser:

import ExecutionEnvironment from 'exenv'
...
export default class Login extends Component {
constructor(props){
super(props);
if(ExecutionEnvironment.canUseViewport){
this.lock = new Auth0Lock('i7UqKEtjTNJYfnIFCB5ThzBWV5YKIjWb', 'styx.auth0.com');
}
this.showLock = this.showLock.bind(this);
}
...

There might be better workarounds but this worked for me!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/auth0/lock/issues/242#issuecomment-226399992, or mute
the thread
https://github.com/notifications/unsubscribe/ASyCkDlHVckRYsY4vq_6UiaxghVUsDOxks5qMO56gaJpZM4GR_mH
.

[jonsharratt]

This is a real shame, looks like I am going to have to implement the raw flow instead. Really hope you can support universal / isomorphic applications soon.

[rvetere]

As i was mentioned here, i was looking again at this thread and i just wanted show you my solution i got now (looks a bit different):

if (__CLIENT__) {
      require.ensure(['auth0-lock'], (require) => {
        const Auth0Lock = require('auth0-lock');
        const localLock = new Auth0Lock('xyz', 'the-app.eu.auth0.com');
        setLock(localLock);

        const token = getAuthToken(localLock);
        if (token) {
          setAuthToken(token);

          localLock.getProfile(token, (err, profile) => {
            if (err) {
              console.warn('Error loading the Profile', err);
              return;
            }
            setAuthProfile(profile);

            // todo as we are logged-in now -> create a cookie to support SSR login with all future requests!
          });
        }
      });
    }

the "setLock", "setAuthToken" and "setAuthProfile" are passed in from my recomposing ;) we're working fully with pure-function-components and compose all the things together

[hzalaz]

Closing this one for now since it's not a priority right now and there is a workaround https://github.com/auth0/lock/issues/242#issuecomment-226399992.

We added this to our backlog to revisit in the future, basically we need to make this library and auth0.js work with server side rendering

[rkoberg]

This issue should not be closed.