antishok/auth-popup-callback.html

## auth-popup-callback.html
<!doctype html>
<html>
<head><title>Log-In</title></head>
<script>
	if (window.opener) {
		window.opener.postMessage("popup-done", "*");
		setTimeout(function() { window.close() }, 0);
	}
</script>
</head>
<body>
	{{#if user}} <h1 style="text-align: center">Logging in...</h1> {{/if}}
</body>
</html>

## auth-routes.js
// mounted on /auth/

router.get('/facebook', passport.authenticate('facebook', {
  scope: ['public_profile', 'email'],
  display: 'popup'
}));
router.get('/google', passport.authenticate('google', {
  scope: ['profile', 'email']
}));


router.get('/facebook/callback', passport.authenticate('facebook', {
  successRedirect: '/auth/popup', failureRedirect: '/auth/popup'}));
router.get('/google/callback', passport.authenticate('google',  {
  successRedirect: '/auth/popup', failureRedirect: '/auth/popup'}));


router.get('/popup', (req, res, next) => {
  res.render('auth-popup-callback', {layout: false});
});

router.get('/popup-done', (req, res, next) => {
  var url = (req.user && req.session.firstLogin) ? '/profile' : '/';
  res.redirect(url);
});

## login-page.html
<a href="/auth/facebook" class="loginLink">Login with facebook</a>
<a href="/auth/google" class="loginLink">Login with google</a>

## login-page.js
	var loginWindow;

	window.addEventListener('message', function(e) {
		if (e.data !== 'popup-done') { return; }
		window.location.replace('/auth/popup-done');
	});


	document.querySelectorAll('.loginLink').forEach(function(link) {
		link.addEventListener('click', function(e) {
			e.preventDefault();
			var url = link.getAttribute('href');
			var width = 500, height = 370;
			if (url.indexOf('/auth/google') === 0) {
				width = 470; height = 580;
			}
			var w = window.outerWidth - width, h = window.outerHeight - height;
			var left = Math.round(window.screenX + (w / 2));
			var top = Math.round(window.screenY + (h / 2.5));

			loginWindow = window.open(url, 'LogIn',
				'width='+width+',height='+height+',left='+left+',top='+top+
				',toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0');
		});
	});
	// mounted on /auth/

	router.get('/facebook', passport.authenticate('facebook', {
	scope: ['public_profile', 'email'],
	display: 'popup'
	}));
	router.get('/google', passport.authenticate('google', {
	scope: ['profile', 'email']
	}));



	router.get('/facebook/callback', passport.authenticate('facebook', {
	successRedirect: '/auth/popup', failureRedirect: '/auth/popup'}));
	router.get('/google/callback', passport.authenticate('google', {
	successRedirect: '/auth/popup', failureRedirect: '/auth/popup'}));


	router.get('/popup', (req, res, next) => {
	res.render('auth-popup-callback', {layout: false});
	});

	router.get('/popup-done', (req, res, next) => {
	var url = (req.user && req.session.firstLogin) ? '/profile' : '/';
	res.redirect(url);
	});
	<a href="/auth/facebook" class="loginLink">Login with facebook</a>
	<a href="/auth/google" class="loginLink">Login with google</a>
	var loginWindow;

	window.addEventListener('message', function(e) {
	if (e.data !== 'popup-done') { return; }
	window.location.replace('/auth/popup-done');
	});


	document.querySelectorAll('.loginLink').forEach(function(link) {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	var url = link.getAttribute('href');
	var width = 500, height = 370;
	if (url.indexOf('/auth/google') === 0) {
	width = 470; height = 580;
	}
	var w = window.outerWidth - width, h = window.outerHeight - height;
	var left = Math.round(window.screenX + (w / 2));
	var top = Math.round(window.screenY + (h / 2.5));

	loginWindow = window.open(url, 'LogIn',
	'width='+width+',height='+height+',left='+left+',top='+top+
	',toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0');
	});
	});