10.9.* results in getProfile is not a function with webpack

[sinkpoint]

auth0-lock results in
platform.bundle.js:136 Uncaught TypeError: f.default.getProfile is not a function
When bundled with webpack 1

With release 10.9. Problems does not exist with 10.8.1 and earlier

Code snippet:

        let LOCK = new Auth0Lock(AUTH_CLIENT_ID, AUTH_DOMAIN, Auth0Options)
        // define the auth event here to pass dispatch into it
        LOCK.on('authenticated',(authRes)=>{
            LOCK.getProfile(authRes.idToken, function(err, profile) {
                if (err) {
                    dispatch(loginError(err))  
                }
                else {
                    dispatch(receiveLogin(profile, authRes.idToken))
                }
            })
            LOCK.hide()
        })

        LOCK.show()        
    }

[hzalaz]

@sinkpoint we might need how you are bundling lock or a sample we can debug to see why is not a function.

[cuongquay]

The same result when building with bower

bower auth0-lock#>= 10.0.0         not-cached https://github.com/auth0/lock.git#>= 10.0.0
bower auth0-lock#>= 10.0.0            resolve https://github.com/auth0/lock.git#>= 10.0.0
bower angular-material#~1.0.9         extract archive.tar.gz
bower auth0-lock#>= 10.0.0           download https://github.com/auth0/lock/archive/v10.9.1.tar.gz

TypeError: f.default.getProfile is not a function
    at t.getProfile (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:23:6505)
    at Object.t [as getProfile] (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:41:953)
    at t.<anonymous> (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:42:6932)
    at http://192.168.99.100/js/app.min.js?r=R1-ba026f2:41:694
    at f.$eval (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:28:5581)
    at f.$apply (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:28:5814)
    at t (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:41:570)
    at t.function.e.(anonymous function) (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:41:679)
    at t.n.emit (http://192.168.99.100/js/app.min.js?r=R1-ba026f2:22:12416)
    at http://192.168.99.100/js/app.min.js?r=R1-ba026f2:8:13980

Linked versions

angular-lock#1.0.5 bower_components/angular-lock
├── angular#1.6.1
└── auth0-lock#10.9.1

I bundle it all into one single file app.min.js

[glena]

Hi @cuongquay, what @hzalaz meant is that we don't have enough context from your comments to assess what is the issue.

Since our blundle is bundling it correctly and the code published in NPM, CDN and Bower exposes that method, we think there might be an issue with your bundler configuration and how are you requiring lock in your app.

Can you provide a sample project which only contains the lock usage that reproduces the issue?

[petrvolny]

Same problem here.
Bundling with webpack (almost unchanged config from create-react-app)

[glena]

I was able to repro, thx @petrvolny.

I will push a fix and will release a patch version.

Anyway, I suggest you both to use getUserInfo (it receives the access token, not the id_token) instead:

    LOCK.on('authenticated',(authRes)=>{
        LOCK.getUserInfo(authRes.accessToken, function(err, profile) {
            console.log(err,profile);
        })
        LOCK.hide()
    })

[petrvolny]

@glena Thanks for quick response and for the getUserInfo suggestion.

[cuongquay]

I wrote my own $http.get("../tokeninfo?id_token=") to retrieve its profile object.

Anyway, thanks for your quick fix.

[glena]

we will release the patch soon tho, I will let you know

[glena]

Hi, 10.9.2 was release with the fix.

[elnobun]

Please could the Auth0 team update their website to reflect these changes? The documentation there is outdated, and very misleading. I had this same issue, and by trial and error, made it work by changing the lock version to 10.9.2. I never knew that this version was already out, until i searched and got to this page.

For example, in the Quick Start section, we still have this:

<script src="https://cdn.auth0.com/js/lock/10.9.1/lock.min.js"></script>

instead of this:

<script src="https://cdn.auth0.com/js/lock/10.9.2/lock.min.js"></script>

Again,

Since the upgrade to Angular 2.4.x, & Angular-cli 1.0.0-beta.25.5, this DOES no longer work for Webpack:

import { AUTH_PROVIDERS } from 'angular2-jwt';

providers: [
    // ...
    AUTH_PROVIDERS,
    // ...
  ],

Interestingly, there is a workaround that issue by the team, but it is not reflected on the site.

angular2-jwt recently updated to 0.1.27, and yet nothing has changed. I hope the team update their site to reflect the changes they suggest to people here and everywhere else.

Thanks for your understanding.