No refresh page and search after Passport JS login in Node/Express?

Question

I am making a venues search app using the Yelp API and the MEAN stack. You can add and remove yourself from going to a venue, after you login with Facebook using Passport JS.

In the case a user entered a search and the results are shown on the page (as an unauthenticated user), you login and are redirected to the homepage, the search results are refreshed.

What I want is that the user does not have to search again. So basically no refresh of the page OR no refresh of $scope.venues in Angular that is an object holding all the venues data.

For example:

• I search for Amsterdam
• I get a list of all the venues in Amsterdam
• I login
• The search results of Amsterdam are still there

How can I do that?

These are the Passport JS routes in Node/Express:

var passport = require('passport');

var FacebookStrategy = require('passport-facebook').Strategy;

var session = require('express-session');

passport.serializeUser(function(user, done) {

done(null, user);

});

passport.deserializeUser(function(id, done) {

done(null, id);

});

app.get('/auth/facebook', passport.authenticate('facebook'));
//Authenticate with Passport when hitting this route

app.get('/auth/facebook/callback', passport.authenticate('facebook', {
//Handle callback after successfully authenticated woth Facebook  

successRedirect: '#/reload/' + searchQuery,
failureRedirect: '/error'

}));

This is what I have in Angular:

angular.module("popperooApp", ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when("/", {
        templateUrl: "list.html",
        controller: "ListController"
      }).when("/reload/:query", {

        templateUrl: "list.html",
        controller: "ReloadController"

    })
      .otherwise({

        redirectTo: "/"

      });
  })
  .service("Venues", function($http) {

    this.getVenues = function(location) {

      var url = "search/" + location;

      return $http.get(url);

    };


  })
  .controller('ListController', function($scope, Venues) {

    $scope.searchLocation = function(location) {

      Venues.getVenues(location)
        .then(function(response) {

          $scope.venues = response.data;

        }, function(response) {

          alert("Error retrieving venues");

          console.log(response);

        });

    };

  })
  .controller('ReloadController', function($scope,Venues,$routeParams){

        Venues.getVenues($routeParams.query)
            .then(function(response){

                $scope.venues = response.data;

            }, function(response){

               alert("Error retrieving venues"); 

               console.log(response);

            });


})

Should I store sessions in the MongoDB database? Should I not redirect to the '/' route in Angular and make something custom?

Thanks for the help!

Answer 1

You should redirect to a search URL like you have already implemented indeed, no need to store the info on the session.

I think the best way in your case is to redirect the user to the page that is currently loaded, so it does not apply only to searches.

It, of course, assumes that you can access your app via this URL and that the app will automatically reload the search results based on the URL.

Good luck.