Auth0 Home Blog Docs

Embedded lock in Angular not working async

embedded-lock

#1

I’m trying to implement Auth0 for the first time. I’m trying to use the embedded login in an Angular project and downloaded the git repo with the example. When I set it up and run it, the page redirects rather than working async. Looking at the code in the repo, I see a handleAuthentication method, which seems to indicate it should work async. Am I wrong in this? I also see the method called on page load, but I assumed that was for when someone visited the app having the token stored.

In general, I don’t really seem to get what’s going in the repo; I see the callback-cross-auth.htmlfile, but I don’t see it included anywhere, and I’m not sure how it’s working.

Hope someone can lend me some advice?


#2

Hi,

Browser based OAuth is implemented using the OAuth Implicit Grant, which requires invoking a callback that is registered with for your application in the authorization server. This implies there’s always a redirect to the callback url after logging-in. The handleAuthentication() method will get called after the redirect.

You can use:

var lock = new Auth0Lock(clientId, domain,   {
    auth: {
      redirect: false
    }
  }
);

to avoid the redirect. In this case Lock will open a hidden iframe where it performs the authentication flow, and will post the access_token and id_token to the parent frame, which will end up calling handleAuthentication().