Using passportJS or everyauth in single page application

Question

I am using node with express as a server for my single page application (I am using AngularJS but this isn't related to the question). I need to add authentication abilities using passportJS or everyauth. I cannot use other package. I tried a many times to make the authentication work on my single page application but I didn't managed to do it without page refreshes. I am looking for a way to connect with facebook and this is the my front-end code:

function facebookLogin(callback) {
    FB.login(function (response) {
        if (!response.authResponse) {
            console.log('Facebook login failed', response);
            callback(false, response);
        } else {
            console.log('Facebook login complete', response);
            callback(true, response);
        }
    });
}

facebookLogin(function(isConnected, response) {
    if (isConnected) {
        // HERE I NEED TO CALL SERVER SIDE AND CONNECT USING PASSPORT OR EVERYAUTH
        // I WANT TO DO IT WITHOUT PAGE REFRESH
    }
});

Any idea how can I do it? Or somewhere with an example? Remember, I need to connect without page refresh.

I'm looking for similar solution, I guess the only way to do it, is using bearer strategy (passport-http-bearer), did you try it? — Guy Korland, Aug 27 '13 at 16:22

score 3 · Answer 1 · answered Aug 27 '13 at 19:12

The solution I set was to popup another window (like FB.login) which calls passport.js then when the process ends the window is closes it self and the main window monitor it. (BTW, it's very similar to FB.login code but it still utilize passport.js easy integration)

Set standard passport.js

meaning:

app.get('/auth/facebook', passport.authenticate('facebook', { scope:['email']}));
app.get('/auth/facebook/callback', passport.authenticate('facebook', {failureRedirect:'/'}), successRedirect);

passport.use(new FacebookStrategy({
    clientID: Settings.FB.CLIENT_ID,
    clientSecret: Settings.FB.CLIENT_SECRET,
        callbackURL: Settings.FB.CALLBACK_URL
    },myHandler;
    }
));

function successRedirect(){
    res.send('<html><head><script type="text/javascript">window.close();</script></head></html>');   
}

On the

client side:

<a onclick="loginShopetti('/auth/google')"><img src="/imgs/FB-button.png"></a>

<script>
function loginShopetti(url){
    var win = window.open(url,'popUpWindow','centerscreen=true');
    var intervalID = setInterval(function(){
        if (win.closed) {

            //***** DO MY after login code.********

            clearInterval(intervalID);
        }
    }, 100);
}
</script>

Is this still the best way to do it? In your code, I think if the user doesn't log in, you would still execute the login code right? — fsljfke, Jul 13 '20 at 00:29

score 2 · Answer 2 · answered May 09 '17 at 21:53

2

This comes a bit late, but I just had the same issue.

My solution was to use Fb.login() to request the token from the browser without any redirection (just the FB small popup if the user has not yet accepted the app). Then I make another request to my server app (ajax call, so again no redirection) to validate the token, create the session, etc with passport-facebook-token.

answered May 09 '17 at 21:53

Mr. Goferito

6,391
4
26
27

2

I can elaborate a bit more if someone would need me to :+1: – Mr. Goferito May 09 '17 at 21:54

Using passportJS or everyauth in single page application

2 Answers2