Handling embedded and universal login in the same client

src/__tests__/core/web_api/__snapshots__/p2_api.test.js.snap

@@ -32,6 +32,15 @@ Object {
 }
 `;
 
+exports[`Auth0APIClient logIn with credentials should call client.login when isHostedLoginPage===false 1`] = `
+Object {
+  "nonce": undefined,
+  "realm": undefined,
+  "state": undefined,
+  "username": "foo",
+}
+`;
+
 exports[`Auth0APIClient logIn with credentials should call popup.loginWithCredentials when redirect is false and sso is false 1`] = `
 Object {
   "nonce": undefined,

src/__tests__/core/web_api/p2_api.test.js

@@ -1,6 +1,6 @@
 jest.mock('auth0-js');
 
-const getClient = (options = {}) => {
+const getClient = (options = {}, isHostedLoginPage = false) => {
   const lockId = 'lockId';
   const clientId = 'cid';
   const domain = 'domain';
@@ -74,7 +74,7 @@ describe('Auth0APIClient', () => {
       });
     });
     describe('with credentials', () => {
-      it('should call client.login', () => {
+      it('should call client.login when isHostedLoginPage===false', () => {
         const client = getClient({
           redirect: true
         });
@@ -84,6 +84,19 @@ describe('Auth0APIClient', () => {
         const loginMock = mock.WebAuth.mock.instances[0].login.mock;
         assertCallWithCallback(loginMock, callback);
       });
+      it('should call _hostedPages.login when isHostedLoginPage===true', () => {
+        const client = getClient(
+          {
+            redirect: true
+          },
+          true
+        );
+        const callback = jest.fn();
+        client.logIn({ username: 'foo' }, {}, callback);
+        const mock = getAuth0ClientMock();
+        const loginMock = mock.WebAuth.mock.instances[0]._hostedPages.login.mock;
+        assertCallWithCallback(loginMock, callback);
+      });
       it('should call popup.loginWithCredentials when redirect is false and sso is false', () => {
         const client = getClient({
           redirect: false,

src/core/web_api.js

@@ -7,9 +7,9 @@ class Auth0WebAPI {
   }
 
   setupClient(lockID, clientID, domain, opts) {
-    const hostedLoginPage = window.location.host === domain;
+    const isHostedLoginPage = window.location.host === domain;
     // when it is used on on the hosted login page, it shouldn't use popup mode
-    opts.redirect = hostedLoginPage ? true : opts.redirect;
+    opts.redirect = isHostedLoginPage ? true : opts.redirect;
 
     // for cordova and electron we should force popup without SSO so it uses
     // /ro or /oauth/token for DB connections
@@ -18,7 +18,7 @@ class Auth0WebAPI {
       opts.sso = false;
     }
 
-    this.clients[lockID] = new Auth0APIClient(lockID, clientID, domain, opts);
+    this.clients[lockID] = new Auth0APIClient(lockID, clientID, domain, opts, isHostedLoginPage);
   }
 
   logIn(lockID, options, authParams, cb) {

src/core/web_api/p2_api.js

@@ -5,10 +5,11 @@ import { getEntity, read } from '../../store/index';
 import { normalizeError, loginCallback, normalizeAuthParams, webAuthOverrides } from './helper';
 
 class Auth0APIClient {
-  constructor(lockID, clientID, domain, opts) {
+  constructor(lockID, clientID, domain, opts, isHostedLoginPage) {
     this.lockID = lockID;
     this.client = null;
     this.authOpt = null;
+    this.isHostedLoginPage = isHostedLoginPage;
 
     const default_telemetry = {
       name: 'lock.js',
@@ -52,7 +53,10 @@ class Auth0APIClient {
       }
     } else if (this.authOpt.popup) {
       this.client.popup.loginWithCredentials(loginOptions, f);
+    } else if (this.isHostedLoginPage) {
+      this.client._hostedPages.login(loginOptions, f);
     } else {
+      //embedded
       loginOptions.realm = options.connection;
       this.client.login(loginOptions, f);
     }