Lock not hitting lock.on after login

I’m using the lock widget for logging in, but the lock.on function to getUserInfo is never being hit, so nothing is being stored to localStorage.
I feel like I’m simply missing something in the flow.
Here is the code I’m currently working with for my LogIn component:

import React from 'react'
import { useAuth0 } from '../react-auth0-wrapper'
import { withRouter, Redirect } from 'react-router-dom'
import Auth0Lock from 'auth0-lock'

import '../style_sheets/LogIn.css'

const LogIn = () => {
    const { isAuthenticated } = useAuth0()

    var options = {
        theme: {
            logo: 'https://i.imgur.com/mQWWPgC.png',
            primaryColor: '#2975a6'
        },
        auth: {
            redirectUrl: 'http://localhost:3000/artisthome',
            responseType: 'token',
        },
        scope: "openid user_metadata",
        allowedConnections: ['GigMeSignup'],
        allowShowPassword: true,
        autofocus: true,
        
        allowSignUp: false
    }
    var lock = new Auth0Lock(
        '<ClientId>',
        '<Domain>', options
      )

    var Auth = (function() {

    var wm = new WeakMap();
    var privateStore = {};
    var lock;
    
    function Auth() {
        this.lock = new Auth0Lock(
        '<ClientId>',
        '<Domain>', options
        );
        wm.set(privateStore, {
        appName: "Gig-Me"
        });
    }
    
    Auth.prototype.getProfile = function() {
        return wm.get(privateStore).profile;
    };
    
    Auth.prototype.authn = function() {
        this.lock.on("authenticated", function(authResult) {
        this.getUserInfo(authResult.accessToken, function(error, profile) {
            if (error) {
            // Handle error
            return;
            }
    
            wm.set(privateStore, {
            accessToken: authResult.accessToken
            });
    
            wm.set(privateStore, {
            profile: profile
            });
    
        });
        });
    };
    return Auth;
    }());

    const Button = withRouter(({history}) => (
        <button
            className="button" 
            onClick={() => {history.push('/signup')}}>
            Sign Up
        </button>
    ))

    return (isAuthenticated
        ?   <Redirect to="/artisthome"/>
        :   <div className="log-in">
                <div className="headers">
                    <h4>Welcome To</h4>
                    <img className="login-logo" src="https://i.imgur.com/mQWWPgC.png" alt="logo" />
                </div>
                <div className="choices">
                    <button 
                    className="button"
                        onClick={() => lock.show()}
                    >
                        Log In
                    </button>
                    Or
                    <Button />
                </div>
            </div>
    )
}

export default LogIn
1 Like

I’m also seeing this same issue.
we’ve placed both these and only the signup success fires, while authenticated does not

    lock.on('authenticated', (authResult) => {
      console.log('authenticated');
      lock.getUserInfo(authResult.accessToken, function (error, profile) {
        console.log({error, profile});
        if (error) return
        const { email, ...rest } = profile
      });
    })
    lock.on("signup success", () => {
      console.log('signup success');
    })