Auth0 Lock Show not working reactjs

Help
, , ,
1

I have implemented auth0 with my project according to the guide here. It works perfectly except I’m now needing the functionalities from auth0-lock. I’ve changed it to use auth0-lock. Instead of .authorize() with auth0, I am using .show() with lock and I’m getting these error:

TransitionGroup.js:127 Uncaught TypeError: Cannot convert undefined or null to object
at values (<anonymous>)
at TransitionGroup.render (TransitionGroup.js:127)
at ReactCompositeComponent.js:793
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:234)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:701)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:520)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
at Object.mountComponent (ReactReconciler.js:43)

render @ TransitionGroup.js:127
(anonymous) @ ReactCompositeComponent.js:793
measureLifeCyclePerf @ ReactCompositeComponent.js:73
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:792
_renderValidatedComponent @ ReactCompositeComponent.js:819
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
mountChildren @ ReactMultiChild.js:234
_createInitialChildren @ ReactDOMComponent.js:701
mountComponent @ ReactDOMComponent.js:520
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountComponentIntoNode @ ReactMount.js:102
perform @ Transaction.js:141
batchedMountComponentIntoNode @ ReactMount.js:124
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
_renderNewRootComponent @ ReactMount.js:317
_renderSubtreeIntoContainer @ ReactMount.js:399
render @ ReactMount.js:420
render @ box.js:68
render @ box.js:113
(anonymous) @ core.js:175
(anonymous) @ index.js:32
(anonymous) @ atom.js:54
_change @ atom.js:53
swap @ atom.js:25
swap @ index.js:46
openLock @ actions.js:126
show @ core.js:208
login @ Auth2.js:31
PageContextProvider._this.login @ PageContext.js:24
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:307
executeDispatch @ react-dom.development.js:390
executeDispatchesInOrder @ react-dom.development.js:415
executeDispatchesAndRelease @ react-dom.development.js:3279
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3288
forEachAccumulated @ react-dom.development.js:3260
runEventsInBatch @ react-dom.development.js:3305
runExtractedPluginEventsInBatch @ react-dom.development.js:3515
handleTopLevel @ react-dom.development.js:3559
batchedEventUpdates$1 @ react-dom.development.js:21872
batchedEventUpdates @ react-dom.development.js:796
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3569
attemptToDispatchEvent @ react-dom.development.js:4268
dispatchEvent @ react-dom.development.js:4190
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11040
discreteUpdates$1 @ react-dom.development.js:21888
discreteUpdates @ react-dom.development.js:807
dispatchDiscreteEvent @ react-dom.development.js:4169
Show 62 more frames
ReactDOMComponentTree.js:111 Uncaught TypeError: Cannot read property ‘__reactInternalInstance$ej88c45iaam’ of null
at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:111)
at findParent (ReactEventListener.js:36)
at handleTopLevelImpl (ReactEventListener.js:65)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
at Object.batchedUpdates (ReactUpdates.js:95)
at dispatchEvent (ReactEventListener.js:145)

My code that calls auth0Lock.show() is as follows:

export const lock =  new Auth0Lock('my-client-id', 'domain-name', {

          auth: {
              audience: 'audience-url',
              redirectUrl: 'http://localhost:8000/us/callback',
              responseType: 'token id_token',
              params: {
                  scope: 'openid email profile'
              }
          }
      }
  ).on('authenticated', function(authResult) {
      if (authResult && authResult.accessToken && authResult.idToken) {
          setSession(authResult);
          // use authResult.idTokenPayload for profile information
      }
  }) : {};

export const login = () => {

lock.show()
}

I do not get any authorization errors when lock is initialized but I get the above reactjs error when I call lock.show(). What does .show() do that it would cause this reactjs error?

1 Like
2

I am having the same issue. I would appreciate any and all help solving this.

3

I have the same issue with my Gatsby site…

I tried using lock as instructed in the docs and it does not work and I tried using the npm package auth0-lock but everytime I install that and try to use it, I get all kinds of errors pointing to stuff in my node_modules folders related to auth0-lock so I don’t think I can use that in its current state.

All I am trying to do is display/update my users user_metadata, is this what I need? I already have login/logout working and figured out how to use rules to add persistent data to user_metadata when a users login but I can’t figure out how to do anything with each users user_metadata on my site.

Can anyone help me with this please?