How to use http-proxy-middleware with react and passport.js - reactjs

Question

Well,I am working on a react app.I have an express server at localhost:5000 and the react app on localhost:3000.I am going through the google oauth flow using passportjs.Now the real problem is I have used the http-proxy-middleware to go to localhost:5000/auth/google from my react app using the log in button which directs to /auth/google.Then after authenticating I should be returned to the callbackURL which is /auth/google/callback.then from here i should be redirected to localhost:3000/surveys but I am getting redirected to localhost:5000/surveys which does not exist.So i am getting error:can not get /surveys.But when i log out using the logout button which directs to /api/logout then i am getting redirected to the homepage at '/' which is at localhost:3000.So why am i getting redirected to localhost:3000/ and not localhost:5000/ in this case.And how can i go to localhost:3000/surveys instead of localhost:5000/surveys as mentioned in the beginning?
//passport js file
const passport = require("passport");
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const mongoose = require("mongoose");
const keys = require("../config/keys");
const User = mongoose.model("users");
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
User.findById(id).then((user) => {
done(null, user);
});
});
passport.use(
new GoogleStrategy(
{
clientID: keys.googleClientID,
clientSecret: keys.googleClientSecret,
callbackURL: "/auth/google/callback",
proxy: true,
},
async (accessToken, refreshToken, profile, done) => {
const existingUser = await User.findOne({ googleId: profile.id });
if (existingUser) {
return done(null, existingUser);
}
const user = await new User({ googleId: profile.id }).save();
done(null, user);
}
)
);
//the routes for my express server
const passport = require("passport");
module.exports = (app) => {
app.get(
"/auth/google",
passport.authenticate("google", { scope: ["profile", "email"] })
);
app.get(
"/auth/google/callback",
passport.authenticate("google"),
(req, res) => {
res.redirect("/surveys");
}
);
app.get("/api/current", (req, res) => {
res.send(req.user);
});
app.get("/api/logout", (req, res) => {
req.logout();
res.redirect("/");
});
};
//the proxy setup in react src folder
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/auth/google",
createProxyMiddleware({
target: "http://localhost:5000",
changeOrigin: true,
})
);
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:5000",
changeOrigin: true,
})
);
};
//my react header component
import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
class Header extends React.Component {
renderContent() {
switch (this.props.auth) {
case null:
return;
case false:
return (
<li>
Log In
</li>
);
default:
return (
<li>
Log Out
</li>
);
}
}
render() {
return (
<nav>
<div className="nav-wrapper">
<Link to={this.props.auth ? "/surveys" : "/"} className="brand-logo">
Emaily
</Link>
<ul className="right">{this.renderContent()}</ul>
</div>
</nav>
);
}
}
const mapStateToProps = (state) => {
return { auth: state.auth };
};
export default connect(mapStateToProps)(Header);

Answer 1

Well,just removing the change origin from proxy did the work!