Pop up window to do authentication in?

[hyperh]

Is it possible to have a new window open when you do the /auth/facebook call, and then do the authentication in that window, have it close, then redirect your original window?

[hyperh]

Figured it out. Here's my code in case anyone wants to do the same.

// server/routes
app.get('/auth/facebook', passport.authenticate('facebook', { display: 'popup' }));
app.get('/auth/facebook/callback',
  passport.authenticate('facebook', { successRedirect: '/auth/facebook/success', failureRedirect: '/login' }),
);

// client/routes
<Route path="auth/facebook/success" component={AuthSuccess} />

// AuthSuccess.js
import React, { Component } from 'react';

export default class AuthSuccess extends Component {
  componentDidMount() {
    const url = '/private';
    window.opener.open(url, '_self');
    window.opener.focus();
    window.close();
  }

  render() {
    return (
      <div>
        AUTH SUCCESS!
      </div>
    );
  }
}

const url = '/auth/facebook';
const name = 'facebook_login';
const specs = 'width=500,height=500';
window.open(url, name, specs);

[johnandblue]

hello! in the last chunk of code... where do you define the url, name, specs...?

[pfarnach]

Nice solution @hyperh!

@johnandblue, the last four lines refer to the original "connect to facebook" button you display in your UI to kick off the auth flow. Mine looks the same, the only difference being const name = '_blank' so it opens in a new window (along with the display: 'popup' in the FacebookStrategy config)

[audupa]

Hi @hyperh @pfarnach

I am trying to do window.open with the login url and doing the authentication in the new window in React app. I dint understand as to how I could close the window or show some message to the user when the login request in the new window is successful, as I don't have any handle to it

Basically I have the reference to the new window inside my React app, but it will be helpful if you could tell me how I could use it to listen to the events or the login request success and use it to show some message to the user or close that window?

[ccampanale]

Glad I found this, it helped a lot with my OAuth integrations for Github/GHE! Thank you!

[otaree]

Thank you

[numediaweb]

What about the authorization token? where do you store it after a successful redirect?

[baranimurthy]

Thank you. Awesome solution.

[DayanaLorza]

This is a a wonderful solution, Thank you so much for this.

[Venryx]

Note that if you want the popup window to be centered on the screen, you can replace the specs variable with this:

var 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));
const specs = `width=${width},height=${height},left=${left},top=${top},toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0`;

(not sure if the other specs are needed, but I left them in, as they were part of the gist here)

Also note: If you want to use a new-tab rather than a popup, I think you just replace name = 'facebook_login' with name = '_blank', and omit the specs argument. (and maybe remove the display: 'popup' line in server code)

[Dagge11]

As of 2023 it doesn't work. No popup or anything