Cannot GET /auth/google/callback | PassportJs

[SultanHboush]

Why I'm getting this error! Cannot GET /auth/google/callback after choosing an account from the google login page I got redirected to a white page with the above error, its been a week working on this google login thing!

This is index.js file:

const mongoose = require("mongoose"); 
const authRoute = require("./routes/auth"); 
const cors = require("cors"); const app = express();  
const cookieSession = require("cookie-session"); 
const passportSetup = require("./passport"); 
const passport = require ("passport");

app.use(cookieSession({name: "session", keys: ["mokhtarah"],  
maxAge: 24 * 60 * 60 * 100 }) );  
// Passport middleware 
app.use(passport.initialize()); 
app.use(passport.session());

app.use(cors({
origin: "http://localhost:3000", 
methods: "GET,POST,PUT,DELETE", 
credentials: true,})); 

app.use(express.json()); 
app.use(express.urlencoded({extended: true}));  
app.use("/api/auth", authRoute); 
app.use("/api/users", userRoute);  

app.listen("4000", () => {     
console.log("Backend is running."); });

This is the passport.js file:

const User = require("./models/User");
const mongoose = require("mongoose"); const passport = require("passport");

const GoogleStrategy = require("passport-google-oauth20").Strategy;

passport.use(
new GoogleStrategy( { clientID: "", clientSecret: "", callbackURL: "/auth/google/callback", }, function (accessToken, refreshToken, profile, done) { done(null, profile); console.log(profile) } ) )

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

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

This is the auth.js file:

const router = require("express").Router();
const User = require("../models/User");
const passport = require("passport");
router.get("/google", passport.authenticate("google", { scope: ["profile"] }))
router.get(
  "/google/callback",
  passport.authenticate("google", {
    successRedirect: 'http://localhost:3000/',
    failureRedirect: 'http://localhost:4000/auth/google'
})
)

//LOGIN WITHOUT PASSPORTJS
router.post("/login", async (req, res) => {
    try {
      const user = await User.findOne({ email: req.body.email });

      // if(!user) return res.status(400).json("Wrong credentials!");
      !user && res.status(400).json("Wrong credentials!");

      const validated = await bcrypt.compare(req.body.password, user.password);

      // if(!validated) return res.status(400).json("Wrong credentials!");
      !validated && res.status(400).json("Wrong credentials!");

      const { password, ...others } = user._doc;
      return res.status(200).json(others);
    } catch (err) {
      return res.status(500).json(err);
    }
  });

Login without passportjs works fine no issues only the google login, I just want the profile data to appear on my console log!

The Google Cloud Console:

https://i.ibb.co/zSPCxqs/Screen-Shot-2022-08-21-at-5-06-50-PM.png

[jaredhanson]

Your auth routes are mounted at /api/auth here:

app.use("/api/auth", authRoute); 

And the routes define a /google/callback route:

router.get(
  "/google/callback",

That would make the path to the callback /api/auth/google/callback, rather than /auth/google/callback (note the missing /api).