Merge pull request #245 from auth0/v8-popup

V8 Popup mode

example/index.html

@@ -110,6 +110,13 @@ <h2>Login with database connection:</h2>
           <input type="button" class="login-db" value="login" />
         </div>
 
+        <div>
+          <h2>Login with database connection (popup):</h2>
+          <input class="popup-login-username" value="[email protected]" />
+          <input type="password" class="popup-login-password" value="1234" />
+          <input type="button" class="popup-login-db" value="login" />
+        </div>
+
         <div>
           <h2>Login with database connection (client login):</h2>
           <input class="client-login-username" value="[email protected]" />
@@ -118,12 +125,21 @@ <h2>Login with database connection (client login):</h2>
         </div>
 
         <div>
-          <h2>Login with social connections:</h2>
+          <h2>Login with /authorize:</h2>
+          <input type="button" class="login-hosted" value="Hosted login page" />
           <input type="button" class="login-facebook" value="Facebook" />
           <input type="button" class="login-twitter" value="Twitter" />
           <input type="button" class="login-github" value="Github" />
         </div>
 
+        <div>
+          <h2>Login with /authorize (popup):</h2>
+          <input type="button" class="popup-login-hosted" value="Hosted login page" />
+          <input type="button" class="popup-login-facebook" value="Facebook" />
+          <input type="button" class="popup-login-twitter" value="Twitter" />
+          <input type="button" class="popup-login-github" value="Github" />
+        </div>
+
         <div>
           <h2>Renew authentication:</h2>
           <input type="button" class="renew-auth" value="Renew" />
@@ -151,13 +167,14 @@ <h2>Console:</h2>
       domain: 'auth0-tests-auth0js.auth0.com',
       redirectUri: 'http://localhost:3000/example',
       clientID: '3GGMIEuBPZ28lb6NBDNARaEZisqFakAs',
-      responseType: 'id_token'
+      responseType: 'token'
     });
 
     var hash = webAuth.parseHash();
     if (hash) {
       htmlConsole.dumpCallback(hash.error ? hash : null, hash.error ? null : hash);
       window.location.hash = '';
+      webAuth.client.userInfo(hash.accessToken, htmlConsole.dumpCallback.bind(htmlConsole));
     }
 
     $('#clear-console').click(function () {
@@ -182,6 +199,16 @@ <h2>Console:</h2>
       }, htmlConsole.dumpCallback.bind(htmlConsole));
     });
 
+    $('.popup-login-db').click(function (e) {
+      e.preventDefault();
+      webAuth.popup.login({
+        connection: 'tests',
+        username: $('.popup-login-username').val(),
+        password: $('.popup-login-password').val(),
+        scope: 'openid'
+      }, htmlConsole.dumpCallback.bind(htmlConsole));
+    });
+
     $('.client-login-db').click(function (e) {
       e.preventDefault();
       webAuth.client.login({
@@ -197,6 +224,11 @@ <h2>Console:</h2>
       webAuth.login({ connection: 'facebook' });
     });
 
+    $('.login-hosted').click(function (e) {
+      e.preventDefault();
+      webAuth.login({ });
+    });
+
     $('.login-twitter').click(function (e) {
       e.preventDefault();
       webAuth.login({ connection: 'twitter' });
@@ -207,6 +239,26 @@ <h2>Console:</h2>
       webAuth.login({ connection: 'github' });
     });
 
+    $('.popup-login-facebook').click(function (e) {
+      e.preventDefault();
+      webAuth.popup.authorize({ connection: 'facebook' }, htmlConsole.dumpCallback.bind(htmlConsole));
+    });
+
+    $('.popup-login-hosted').click(function (e) {
+      e.preventDefault();
+      webAuth.popup.authorize({ }, htmlConsole.dumpCallback.bind(htmlConsole));
+    });
+
+    $('.popup-login-twitter').click(function (e) {
+      e.preventDefault();
+      webAuth.popup.authorize({ connection: 'twitter' }, htmlConsole.dumpCallback.bind(htmlConsole));
+    });
+
+    $('.popup-login-github').click(function (e) {
+      e.preventDefault();
+      webAuth.popup.authorize({ connection: 'github' }, htmlConsole.dumpCallback.bind(htmlConsole));
+    });
+
     $('.logout').click(function (e) {
       e.preventDefault();
       webAuth.logout({ returnTo: 'http://localhost:3000/example' });

package.json

@@ -31,7 +31,8 @@
   "dependencies": {
     "Base64": "~0.1.3",
     "superagent": "^2.3.0",
-    "url-join": "^1.1.0"
+    "url-join": "^1.1.0",
+    "winchan": "^0.1.4"
   },
   "devDependencies": {
     "codecov": "^1.0.1",

src/authentication/index.js

@@ -48,7 +48,7 @@ Authentication.prototype.buildAuthorizeUrl = function (options) {
     'redirectUri',
     'scope',
     'audience'
-  ]).with(options || {});
+  ]).with(options);
 
   /* eslint-disable */
   assert.check(params, { type: 'object', message: 'options parameter is not valid' }, {
@@ -138,7 +138,7 @@ Authentication.prototype.oauthToken = function (options, cb) {
 
   body = objectHelper.toSnakeCase(body, ['auth0Client']);
 
-  body.grant_type = body.grant_type || 'password';
+  body.grant_type = body.grant_type;
 
   return this.request
     .post(url)

src/helper/popup-handler.js

@@ -0,0 +1,64 @@
+var WinChan = require('winchan');
+
+var windowHandler = require('../helper/window');
+var objectHelper = require('../helper/object');
+
+function PopupHandler() {
+  this._current_popup = null;
+}
+
+PopupHandler.prototype.stringifyPopupSettings = function (options) {
+  var settings = '';
+
+  for (var key in options) {
+    settings += key + '=' + options[key] + ',';
+  }
+
+  return settings.slice(0, -1);
+};
+
+PopupHandler.prototype.calculatePosition = function (options) {
+  var width = options.width || 500;
+  var height = options.height || 600;
+  var _window = windowHandler.getWindow();
+
+  var screenX = typeof _window.screenX !== 'undefined' ? _window.screenX : _window.screenLeft;
+  var screenY = typeof _window.screenY !== 'undefined' ? _window.screenY : _window.screenTop;
+
+  var outerWidth = typeof _window.outerWidth !== 'undefined'
+    ? _window.outerWidth
+    : _window.document.body.clientWidth;
+
+  var outerHeight = typeof _window.outerHeight !== 'undefined'
+    ? _window.outerHeight
+    : _window.document.body.clientHeight;
+
+  var left = screenX + ((outerWidth - width) / 2);
+  var top = screenY + ((outerHeight - height) / 2);
+
+  return { width: width, height: height, left: left, top: top };
+};
+
+PopupHandler.prototype.load = function (url, relayUrl, options, cb) {
+  var popupPosition = this.calculatePosition(options.popupOptions || {});
+  var popupOptions = objectHelper.merge(popupPosition).with(options.popupOptions);
+
+  var winchanOptions = {
+    url: url,
+    relay_url: relayUrl,
+    window_features: this.stringifyPopupSettings(popupOptions),
+    popup: this._current_popup,
+    params: options
+  };
+
+  var popup = WinChan.open(winchanOptions, function (err, data) {
+    this._current_popup = null;
+    return cb(err, data);
+  });
+
+  popup.focus();
+
+  return popup;
+};
+
+module.exports = PopupHandler;

src/helper/response-handler.js

@@ -1,34 +1,45 @@
+var error = require('./error');
+
 function wrapCallback(cb) {
   return function (err, data) {
+    var errObj;
+
+    if (!err && !data) {
+      return cb(error.buildResponse('generic_error', 'Something went wrong'));
+    }
 
     if (err) {
-      var data = {
+      errObj = {
         original: err
       };
 
       if (err.response && err.response.statusCode) {
-        data.status_code = err.response.statusCode;
+        errObj.status_code = err.response.statusCode;
       }
 
       if (err.response && err.response.statusText) {
-        data.status_text = err.response.statusText;
+        errObj.status_text = err.response.statusText;
       }
 
       if (err.response && err.response.body) {
         err = err.response.body;
       }
 
-      data.code = err.error || err.code || err.error_code || null;
-      data.description = err.error_description || err.description || null;
+      if (err.err) {
+        err = err.err;
+      }
+
+      errObj.code = err.error || err.code || err.error_code || err.status || null;
+      errObj.description = err.error_description || err.description || err.error || err.details || err.err || null;
 
       if (err.name) {
-        data.name = err.name;
+        errObj.name = err.name;
       }
 
-      return cb(data);
+      return cb(errObj);
     }
 
-    return cb(null, data.body || data.text);
+    return cb(null, data.body || data.text || data);
   };
 }
 

src/web-auth/index.js

@@ -7,6 +7,7 @@ var objectHelper = require('../helper/object');
 var TransactionManager = require('./transaction-manager');
 var Authentication = require('../authentication');
 var Redirect = require('./redirect');
+var Popup = require('./popup');
 var SilentAuthenticationHandler = require('./silent-authentication-handler');
 
 function WebAuth(options) {
@@ -35,6 +36,7 @@ function WebAuth(options) {
 
   this.client = new Authentication(this.baseOptions);
   this.redirect = new Redirect(this.client, this.baseOptions);
+  this.popup = new Popup(this.client, this.baseOptions);
 }
 
 WebAuth.prototype.parseHash = function (hash, options) {
@@ -77,7 +79,7 @@ WebAuth.prototype.parseHash = function (hash, options) {
   return {
     accessToken: parsedQs.access_token,
     idToken: parsedQs.id_token || null,
-    idTokenPayload: token ? token.payload || null : null,
+    idTokenPayload: token && token.payload ? token.payload : null,
     appStatus: token ? token.appStatus || null : null,
     refreshToken: parsedQs.refresh_token,
     state: parsedQs.state
@@ -121,6 +123,7 @@ WebAuth.prototype.renewAuth = function (options, cb) {
   var handler;
   var prof;
   var usePostMessage = !!options.usePostMessage;
+  var _this = this;
 
   var params = objectHelper.merge(this.baseOptions, [
     'clientID',
@@ -149,7 +152,7 @@ WebAuth.prototype.renewAuth = function (options, cb) {
     }
 
     if (data.id_token) {
-      prof = this.validateToken(data.id_token, options);
+      prof = _this.validateToken(data.id_token, options);
       if (prof.error) {
         cb(prof);
       }
@@ -179,7 +182,7 @@ WebAuth.prototype.login = function (options) {
     'redirectUri',
     'scope',
     'audience'
-  ]).with(options || {});
+  ]).with(options);
 
   params = this.transactionManager.process(params);
 
@@ -200,10 +203,4 @@ WebAuth.prototype.passwordlessVerify = function (options, cb) {
   });
 };
 
-
-// popup.login
-// popup.authorize
-// popup.passwordlessVerify
-// popup.signupAndLogin
-
 module.exports = WebAuth;