How do I redirect to Google's consent page for Oauth2.0 in NodeJS Web app?

Question

So I am creating an application with NodeJS and Express and some HTML. Basically after the user clicks login, it is supposed to make a GET request to the following URL

    let url = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri_local}&scope=profile&state=${state}`;

So in my server.js file that is where my API endpoint is calling a GET request to that endpoint. This should send the user to a login page where they can enter in their credentials to allow my application to access data from the user's google profile.

But the redirect URL is sending me to some route that looks like this

GET http://localhost:8080/api/[object%20Object] 404 (Not Found)

My client side javascript looks like this

let loginBtn = document.getElementById("loginBtn");
loginBtn.addEventListener("click", e => {
    let url = "/api/login";
    fetch(url).then( res => {
        console.log("request successful")
        console.log(res)
    })
})

And my server.js file looks like this

const path = require("path");
const express = require('express');
const app = express();
const axios = require("axios");

const router = express.Router();

app.use(express.static('public'));

router.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "./public/index.html"));
})

router.get("/api/login", (req, res) => {
    console.log("Reached api/login endpoint");
    // variables hidden 
    let url = `https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri_local}&scope=profile&state=${state}`;
    axios.get(url).then( googleResponse => {
        console.log("GOOGLE RESPONSE", googleResponse);
         // send 303 response, set location header to URL
        res.location(googleResponse)
        res.status(303).end()
    })
   
})

router.get("/oauth", (req, res) => {
    console.log(req);
})

app.use('/', router);

// Listen to the App Engine-specified port, or 8080 otherwise
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}...`);
});

When I console log the googleResponse variable, this is the first part of what gets logged to the terminal

GOOGLE RESPONSE {
  status: 200,
  statusText: 'OK',
  headers: {
    'content-type': 'text/html; charset=utf-8',
    'x-frame-options': 'DENY',
    vary: 'Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site',
    'google-accounts-embedded': '1',
    'cache-control': 'no-cache, no-store, max-age=0, must-revalidate',
    pragma: 'no-cache',
    expires: 'Mon, 01 Jan 1990 00:00:00 GMT',
    date: 'Fri, 06 May 2022 04:17:06 GMT',
    'transfer-encoding': 'chunked',
    'strict-transport-security': 'max-age=31536000; includeSubDomains',
    'content-security-policy': "script-src 'report-sample' 'nonce-Mp1Az0p7QGot9xaYew42sA' 'unsafe-inline' 'unsafe-eval';object-src 'none';base-uri 'self';report-uri /cspreport, require-trusted-types-for 'script';report-uri /cspreport",
    'cross-origin-opener-policy-report-only': 'same-origin; report-to="coop_gse_qebhlk"',
    'report-to': '{"group":"coop_gse_qebhlk","max_age":2592000,"endpoints":[{"url":"https://csp.withgoogle.com/csp/report-to/gse_qebhlk"}]}',
    'x-content-type-options': 'nosniff',
    'x-xss-protection': '1; mode=block',
    server: 'GSE',
    'set-cookie': [
      '__Host-GAPS=1:PRqlzWd3ZhyzQ3k25kpIuOtw5GZdlw:tzIlUgK8TpHRXqAP;Path=/;Expires=Sun, 05-May-2024 04:17:06 GMT;Secure;HttpOnly;Priority=HIGH',
      'GEM=CgptaW51dGVtYWlkEN_W17yJMA==; Path=/; Secure; HttpOnly'
    ],
    'alt-svc': 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"',
    connection: 'close'
  },

Not sure if the format is correct but how do I redirect the client to the Google consent page?

Project structure looks like this

Answer 1

You are making a GET request to the oauth login page on the server. You need to redirect the user there instead. Once the user has logged in on the google side of things it will redirect them back to your app at a specified URL.

You can use res.redirect(URL); instead of axios.get(); to redirect the user.

Fore more info on OAuth 2 https://aaronparecki.com/oauth-2-simplified/