0

I use Passport to implement the Google Login feature. However, when I send an axios request from the react client app, an error message appears on the chrome console.

Client Side - react (running on port 3000) :

Axios request in SignInForm.js component (It is triggered when a user clicks login button):

googlelogin(){
   axios.get('/api/users/google_auth')
     .then(()=>console.log("success"))
     .catch(err=>console.log(err))
}

Error message on the console :

Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:87)

Server side - node.js (running on port 5000) :

passport.js code : 

passport.use(
  new GoogleStrategy({
    clientID: GOOGLE_CLIENT_ID,
    clientSecret: GOOGLE_CLIENT_SECRET,
    callbackURL: '/api/users/google_auth/redirect'  
  },
  (accessToken, refreshToken, profile, done) => {
    console.log("called")
    User.findOne({email: profile.id})
      .then(user => {
        console.log('googleLogin');
        done(null,user);
      })
      .catch(err => {
        done(err,null,{message:'fail'})
      })
  }
  )
);

routes/api/users.js code :

router.get('/google_auth',passport.authenticate('google',{
  scope:['profile']
}),()=>{console.log("test")})

router.get('/google_auth/redirect',(req, res)=>{
  res.send("hi")
})

Chrome Devtools network tap log:

enter image description here

I've already searched on Youtube, Google, Github, and StackOverflow. I don't know what to do to solve this problem.

Antenna_
  • 147
  • 1
  • 4
  • 15
  • It would be good to add additional logging to your API, specifically around the passport authenticate function. Take a look at this answer to see how you can extract errors from Passport: https://stackoverflow.com/questions/15711127/express-passport-node-js-error-handling. That will give you some more information to go off of. – tombraider Feb 12 '19 at 08:20
  • @tombraider Thanks. I modified the code, but there is no response from the server console as before. passport.authenticate function's callback is not executed.. – Antenna_ Feb 12 '19 at 08:45

1 Answers1

0

Looking at existing Passport examples, it seems like you're trying to use middleware in the original get request which is incorrect. Take a look at this example: https://github.com/passport/express-4.x-facebook-example/blob/master/server.js.

Granted it's using Facebook, but you can see in their login request they are using resolving the request using Passport.authenticate rather than using middleware.

Modify your API to something along the lines of this:

router.get('/google_auth', passport.authenticate('google', { scope:['profile'] }));

router.get('/google_auth/redirect', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
  res.send("Logged in.")
});
tombraider
  • 1,127
  • 1
  • 11
  • 19
  • thanks for your reply. I have solved this problem! When I request to '/api/users/google_auth' using axios, it didn't redirect to domain related to Google Oauth. When I created a button with href = 'addrress' and requested the request, it worked fine. I don't know why they work differently. – Antenna_ Feb 13 '19 at 03:45