Passport.js Google strategy is not working with the React application

passport create-react-app
passport-google-oauth20
passport-google-oauth2 tutorial
passport-google-oauth token
passport js react
passport-google-token
react-google-login
passport-google oauth scopes

I am using passport.js google strategy for user authentication. I am using OAUTH2.

When I launch my server and hit API through browser, it launches google signin page. But when I hit API from react front-end, it never launches the googles signin page.

Please find below server code,

const bodyParser = require('body-parser');
const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
const app = express();
const cors = require('cors');

app.use(passport.initialize());
app.use(passport.session());
app.use(cors());

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
        "Access-Control-Allow-Methods",
        "GET, POST, OPTIONS, PUT, PATCH, DELETE"
    );
    res.setHeader(
        "Access-Control-Allow-Headers",
        "X-Requested-With,content-type"
    );
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
});

app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());


passport.use('google', new GoogleStrategy({
    clientID: "clientID", -- my client id
    clientSecret: "clientSecret", -- my clientsecret
    callbackURL: "callbackURL" -- url
},
    function (accessToken, refreshToken, profile, done) {
        // User.findOrCreate({ googleId: profile.id }, function (err, user) {
        //  console.log(err,user);
        //   return done(err, user);
        // });
        console.log(profile);
        return done(err, user);
    }
));

app.get('/googleauth',
    passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/plus.login'] }));

passport.serializeUser(function (user, done) {
    done(null, user);
})

passport.deserializeUser(function (user, done) {
    done(null, user);
})

app.listen(4000, () => {
    console.log("REST server started on port 4000");
});

Axios call from react code,

  handleJGoogleLogin(e) {
    e.preventDefault();
    var current = this;
    axios.get('http://localhost:4000/googleauth')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

I am stuck here, looking for some help.

Thanks in advance

I think that Passport thing only works on the server. It is probably doing a redirect or something like that.

passport-google-oauth2, Passport strategy for Google OAuth 2.0. This module lets you authenticate using Google in your Node.js applications. Avoid usage of Private IP, otherwise you will get the device_id device_name issue for Private IP during authentication. I am writing an application using Nodejs and passportjs with Google Strategy. After logging out, the user is still able to login again without entering credentials. How can the user be made to enter

A few things under your passport.use add in another parameter

   passport.use('google', new GoogleStrategy({
      clientID: "clientID", -- my client id
      clientSecret: "clientSecret", -- my clientsecret
      callbackURL: "callbackURL" -- url
      proxy: true
     },

   change:
          const GoogleStrategy = require('passport-google- 
    auth').OAuth2Strategy;
     to: 
         const GoogleStrategy = require('passport-google-oauth20').Strategy;

      add in a second scope of profile
        app.get('/googleauth',
               passport.authenticate('google', { scope: 
               ['https://www.googleapis.com/auth/plus.login','profile'] }));

Can you post your react code?

jaredhanson/passport-google-oauth2: Google , Google authentication strategy for Passport and Node.js. GitHub is home to over 50 million developers working together to host and review This module lets you authenticate using Google in your Node.js applications. If you have not already done so, a new project can be created in the Google Developers Console. Google. The Google strategy allows users to sign in to a web application using their Google account. Google used to support OpenID internally, but it now works based on OpenID Connect and supports oAuth 1.0 and oAuth 2.0. Support for Google is implemented by the passport-google-oauth module. Install $ npm install passport-google-oauth Configuration

change this code

app.get('/googleauth',
    passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/plus.login'] }));

to:

app.get(
    "/googleauth",
    passport.authenticate("google", { scope: ["profile", "email"] })
  );

passBackControl errors � Issue #37 � jaredhanson/passport-google , theonlygusti opened this issue on Nov 9, 2017 � 11 comments /theonlygusti/ Project/node_modules/passport-google-oauth20/lib/strategy.js:95:21 at I am build a react app, google works perfectly on localhost but when I upload the website� Nothing super fancy here: just jsonwebtoken, passport, passport-local and passport-jwt. The dependencies include a few extras like babel so I can use ES6 syntax in my Node.js app, bcrypt for password hashing and sequelize as my MySQL ORM, but the things you need to focus on are jsonwebtoken, passport, passport-local and passport-jwt.

How to set up Twitter OAuth using Passport.js and ReactJS, Passport.js. offers authentication APIs to other OAuth service providers like Twitter, Facebook, or Google, which returns an OAuth token. An OAuth Token is a credential that can be used by an application to secret (API Secret) that you can use in passport strategy later on. This is no longer updated. As the last of four tutorials, this article shows you how to make a React.js based front-end authentication system using Passport.js and JSON Web token(JWT). MongoDB is used for user data storage.

React Authentication with Twitter, Google, Facebook and Github, The obvious next step is to add Facebook, Google and Github to the authentication mix. But with modern application architecture now decoupling the client There are solutions out there to this problem. Fortunately, because of the reusable nature of React components and the overlap in PassportJS� Create an Application. Before using passport-google-oauth20, you must register an application with Google. If you have not already done so, a new project can be created in the Google Developers Console. Your application will be issued a client ID and client secret, which need to be provided to the strategy.

#1, #1 - setting up passport and google OAuth 2.0 strategy in node js | oauth mern stack in hindi Duration: 35:02 Posted: 23-Aug-2019 What is Passport.js? Passport is authentication middleware for Node.js. As it’s extremely flexible and modular, Passport can be unobtrusively dropped into any Express-based web application. A comprehensive set of strategies supports authentication using a username and password, Facebook, Twitter, and more. Find out more about Passport here