Passport-Facebook works in localhost but not in production (Heroku)

Passport-Facebook works in localhost but not in production (Heroku)
0.0 0

#1

Hi guys!

I’ve been stuck on this for a long time and have tried everything. :frowning:
I’m starting the Voting App project and I’m using passport-facebook for authentication. Logging in and out works great in development but after deploying it Heroku, it stops working. The URL goes to /auth/facebook but it doesn’t not get redirected. I’m not sure what I did wrong… please help! There is also no error in the console so I’m not sure where to look for mistakes. I’ve also added the heroku domain to facebook redirect urls so that shouldn’t be the problem.

My passport.js

passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id).then(user => done(null, user));
});

passport.use(
  new FacebookStrategy(
    {
      clientID: keys.facebookClientID,
      clientSecret: keys.facebookClientSecret,
      callbackURL: '/auth/facebook/callback',
      profileFields: ['id', 'name'],
      proxy: true
    },
    (accessToken, refreshToken, profile, done) => {
      User.findOne({ facebookId: profile.id }).then(user => {
        if (user) {
          return done(null, user);
        } else {
          new User({ facebookId: profile.id })
            .save()
            .then(user => done(null, user));
        }
      });
    }
  )
);

My authRoutes.js

  app.get('/auth/facebook', passport.authenticate('facebook'));

  app.get(
    '/auth/facebook/callback',
    passport.authenticate('facebook'),
    (req, res) => {
      res.redirect('/');
    }
  );

Here is my Github repo and the Heroku app so you can see what I mean.

Thanks in advance!


#2

I don’t have time to tr your code atm, but one thing I would check is if the app is set up properly on th FB developer’s page. I seem to remember that you need to tell it what url is calling, etc.


#3

Hi Kevin,

Thanks for responding! I’ve looked into that as well. I think my fb developer settings should be correct. I’ve added my heroku domain to all the urls and have whitelisted them for ‘Share Redirect WhiteList’. I’ve also followed another solution on Stack Overflow and added the Client OAuth settings as pictured below.

However, it’s still not working and I’m completely out of ideas… please help if you have any ideas to what’s causing the issue! :tired_face:


#4

OK, take a deep breath. I’ll try to take a closer look at this after I make dinner.

This is confusing stuff. I remember being really frustrated trying to get this to work. But I eventually got it to work and so will you.


#5

Yea I might have spent the entire day working on this… thank you so much!


#6

Cool. As I download this, a few more things occur to me -

Is this your first time deploying to heroku?

One of the things that tripped me up were getting the environment variables set up properly in heroku.

The other thing is that of course server errors won’t show up in your browser console. And since you don’t have a server console, you can’t see them. I think you log into heroku and do heroku logs. They are long and complicated, but there is a lot of info in there.


#7

Hi Kevin,

I’ve deployed to heroku a few times before and the variables are set up in there!

The only odd part of my heroku logs is below but I’m not too sure what it means.

2018-06-25T00:03:40.890122+00:00 heroku[web.1]: Idling
2018-06-25T00:03:40.890122+00:00 heroku[web.1]: State changed from up to down
2018-06-25T00:03:41.564376+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-06-25T00:03:41.686763+00:00 heroku[web.1]: Process exited with status 143
2018-06-25T00:20:41.709137+00:00 heroku[web.1]: Unidling
2018-06-25T00:20:41.709519+00:00 heroku[web.1]: State changed from down to starting
2018-06-25T00:20:50.619562+00:00 heroku[web.1]: Starting process with command `npm start`
2018-06-25T00:20:53.340762+00:00 app[web.1]: 
2018-06-25T00:20:53.340790+00:00 app[web.1]: > voting-app@1.0.0 start /app
2018-06-25T00:20:53.340792+00:00 app[web.1]: > node index.js
2018-06-25T00:20:53.340793+00:00 app[web.1]: 
2018-06-25T00:20:53.990944+00:00 app[web.1]: MongoDB connected
2018-06-25T00:20:54.459544+00:00 heroku[web.1]: State changed from starting to up

Thanks for looking over my code!


#8

Yeah, that doesn’t look weird to me. I’m not sure.


#9

No worries, I’ll keep trying. I appreciate you trying to help! :slight_smile:


#10

OK, looking over your code, do you not have a working client? All I see is the header.

That being said, I was able to get the local version of the client to connect to FB and do an auth, but that’s it - I don’t see any code for anything else. So I guess you’re just trying to check to see if you can deploy. I usually went the other way, got a fully functioning local app and then did what I needed to get the thing deployed to heroku. This included adding up some dotenv support (I’m not clear how you got your variables into process.env), commenting out everything but the second line in config/keys.js. I also added a line to one of your routes:

  app.get(
    '/auth/facebook/callback',
    passport.authenticate('facebook'),
    (req, res) => {
      console.log('logged in, ', req.user)
      res.redirect('/dashboard');
    }
  );

so I could see the login.

In any case, when I do that, and set up FB, it runs. Then I set up an mlab DB and connected to that, and that worked. But when I deployed to Heroku, there was a problem.

I still think the problem is with the FB auth, especially with the “redirect URI” - if I remember correctly, this has to be correctly configured both on FB but also in the server. I notice that you just have a relative URL in the server code - I think it has to be the complete path - set it like an env variale like the others. You also need to make sure that at the top of the FB page is “Status: Live”. The FB OAuth is tough and tricky and gave me a lot of problems. I notice that in the heroku logs, the redirect is getting a 30x status. I would expect something like 20x, but may be wrong.

These OAuth strategies are really confusing. And I think it’s (FB) changed since the last time I did it

I would start putting in “console.log” statements in the server code and checking heroku logs to see what you’re getting. But first I would really focus on getting FB set up right and getting the right CB url in the server code. I really suspect that that is where the problem is.

Maybe the one server thing I would do before messing with FB, is console.log the env variables you re injecting in heroku, just to make sure they are all getting there, especially the FB ones.

But I’ve run out of time to work on this today.

Spend some time on this (this is part of the learning process) and let us know what you find or if you are still stuck.


#11

Hi @kevinSmith and @c-clin:

If it is hanging without errors, it is likely that it is not reaching your User.findOne(...).

First, I would check if the proxy attribute of the FB Strategy applies to production. I think it makes sense for test purposes because you might have been using a proxy to circumvent CORS and similar?

Can you check what other options of the FB Strategy you should take in consideration?

If the attributes are fine, try by silencing the User.findOne(...) and instead send a simple alert to the redirect after synchronously triggering the done(...)? If that works, focus then on your User.findOne(...) script . It might not run and therefore the callback function of your FB Strategy instance never reaches the done(...).

To check your server activity in heroku, probably you want to check this SO?

Hope this helps.