Last active
May 20, 2023 09:23
-
-
Save antishok/bf38a1be865f52935fd7d2b922a90b43 to your computer and use it in GitHub Desktop.
passport popup login
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="/auth/facebook" class="loginLink">Login with facebook</a> | |
<a href="/auth/google" class="loginLink">Login with google</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks