Using passportJS or everyauth in single page application

Question

Using passportJS or everyauth in single page application

1.7k Views Asked by Naor At 06 April 2025 at 05:42

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.

Original Q&A

There are 2 best solutions below

**Guy Korland** · Answer 1

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>

**Mr. Goferito** · Answer 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.

Using passportJS or everyauth in single page application

There are 2 best solutions below

Related Questions in NODE.JS

Related Questions in EXPRESS

Related Questions in PASSPORT.JS

Related Questions in EVERYAUTH

Trending Questions

Popular # Hahtags

Popular Questions