I'm trying to test a basic authentication module on my web app using auth0 and Lock v1 login form. This is a snapshot of the code I'm using: The problem is that I'm not able to get the auth0 modal since I'm getting the following error: I don't understand if I'm configuring in a wrong way my application on Auth0

Issue with Auth0 and javascript Lock v11

I’m trying to test a basic authentication module on my web app using auth0 and Lock v1 login form.
This is a snapshot of the code I’m using:

<script src="https://cdn.auth0.com/js/lock/11.23.1/lock.min.js"></script>
<script type="text/javascript" src="js/auth0variables.js"></script>
<script type="text/javascript" src="js/auth0app.js"></script>
<script>
$( document ).ready(function() {
    console.log("start");
    var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN, {
        auth: {
            redirectUrl: 'undefined',
            responseType: 'code',
            params: {
                scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
            }
        }
    });
    lock.show();
});
</script>

The problem is that I’m not able to get the auth0 modal since I’m getting the following error:

Uncaught TypeError: Cannot read property 'protocol' of null
    at Object.getOriginFromUrl (auth0.min.esm.js:8)
    at G.run (auth0.min.esm.js:8)
    at $.checkSession (auth0.min.esm.js:8)
    at nt.getSSOData (auth0.min.esm.js:8)
    at t.getSSOData (p2_api.js:190)
    at t.getSSOData (web_api.js:64)
    at t.fetchFn (data.js:4)
    at t.fetch (cache.js:17)
    at t.get (cache.js:13)
    at r (data.js:7)

I don’t understand if I’m configuring in a wrong way my application on Auth0 dashboard, if I’m missing some configuration parameter calling the the Auth0Lock method or if the issue is somewhere else.
Can anybody help me with this? Thanks!

Answer

I found a workaround looking at the following discussion hosted on ath0 github repo:

https://github.com/auth0/lock/issues/1638

In order to avoid getLocationFromUrl returning null value I set the redirectUrl option in Auth0Lock constructor

<script src="https://cdn.auth0.com/js/lock/11.23.1/lock.min.js"></script>
<script type="text/javascript" src="js/auth0variables.js"></script>
<script type="text/javascript" src="js/auth0app.js"></script>
<script>
$( document ).ready(function() {
    console.log("start");
    var lock = new Auth0Lock(AUTH0_CLIENT_ID, AUTH0_DOMAIN, {
        auth: {
            redirectUrl: 'http://localhost',
            //redirectUrl: 'file://',
            responseType: 'code',
            params: {
                scope: 'openid email' // Learn about scopes: https://auth0.com/docs/scopes
            }
        }
    });
    lock.show();
});
</script>

Both redirectUrl: 'http://localhost' or redirectUrl: 'file://' options are working fine for my development purposes.

Advertisement

Answer