Lock not hitting lock.on after login

Help
,
1

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
3 Likes
2

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');
    })