OAuth2 authorization - how do I get around cors? - node.js

Question

I am trying to obtain user tokens from the mavenlink API, docs here, I am currently sending a get request from the client side app to the backend (node.js server) which then sends a get request to the mavenlink API with the required parameters in the url.
The desired outcome is when the user clicks the button on client side a new window opens with the mavenlink OAuth login page, then once user has logged in and authorised the application from their account in mavenlink it redirects to the designated redirect_uri and has a code in the url which then needs to be sent off in post request.
However issue is I get to the point where window is opened but whenever I try to login it gives error "cannot post / login", rather than redirecting to a url.
I am using a get request to the server, which then triggers a get request from the server to the API to get arounds the cors error/issue. But when I tested the url I am using in the get request from the server, by just pasting it into my browser, it worked fine and I could authorize the app.
So I am guessing it needs to work by coming from the client side? but how is that possible? or does it need to go from server side and I am doing it wrong?
Code below.
Client side API call:
import { Button, Container, Grid, Paper } from '#mui/material';
import React, {useEffect, useState} from 'react';
import { getAuth } from "firebase/auth";
import axios from 'axios';
import {db} from '../firebase';
import { doc, getDoc, } from 'firebase/firestore'
import '../styles/modules/mavenlinkPage.scss';
import Fab from '#mui/material/Fab';
import AddIcon from '#mui/icons-material/Add';
import {SuccessSnackbar, ErrorSnackbar} from '../components/PopupSnackbar';
export const MavenlinkPage = () => {
const auth = getAuth();
const user = auth.currentUser;
const [apiData, setApiData] = useState([]);
const [tokenResponse, setTokenResponse] = useState([]);
const [oauthToken, setOauthToken] = useState("");
const [secretToken, setSecretToken] = useState("");
const [clientId, setClientId] = useState("");
const [accessCode, setAccessCode] = useState("");
const [mavenlinkConnected, setMavenlinkConnected] = useState(false);
const [errorAlert, setErrorAlert] = useState(false);
const [successAlert, setSuccessAlert] = useState(false);
//Destructuring the objects that contain relevant keys for firestore db that we got in useEffect below
const {token, secret_token} = secretToken;
const {id, client_id} = clientId;
const handleAlertClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSuccessAlert(false) && setErrorAlert(false);
};
//Function to retrieve the oauth token for mavenlink stored in firebase database
const getToken = async () => {
const docRefOauth = doc(db, 'mavenlink', 'oauth');
const docRefToken = doc(db, 'mavenlink', 'secret_token');
const docRefClientId = doc(db, 'mavenlink', 'application_id');
const docOauth = await getDoc(docRefOauth);
const docToken = await getDoc(docRefToken);
const docClientId = await getDoc(docRefClientId);
if (docOauth.exists() && docToken.exists() && docClientId.exists()) {
setOauthToken(docOauth.data())
setSecretToken(docToken.data())
setClientId(docClientId.data())
} else {
console.log("error: no document")
}
}
const getAuthorization = () => {
console.log(id);
console.log(token);
axios({
method: 'get',
url: 'http://localhost:5000/oauth/authorize',
data: {}
})
.then((response) => {
window.open('http://localhost:5000/oauth/authorize', 'Mavenlink')
})
}
useEffect(() => {
getToken();
}, [])
return(
<>
<Container>
<div className="mavenlink-page">
<Grid container spacing={2}>
<Grid item xs={12}>
<h1>Mavenlink</h1>
</Grid>
<Grid item xs={12}>
<Paper className="connection-status" elevation={1}>
<h4 className="title">Connection Status:</h4>
{!mavenlinkConnected ? <h4 className="response-error">{user.email} is not connected</h4> : <h4 className="response-success">{user.email} is connected</h4>}
</Paper>
</Grid>
<Grid item xs={6}>
<Paper elevation={1}>
<h4>Sync account to mavenlink API?</h4>
<Fab onClick={getData} color="primary" aria-label="add">
<AddIcon />
</Fab>
</Paper>
</Grid>
<Grid item xs={6}>
<Paper elevation={1}>
<h4>*Test User Token</h4>
<Fab onClick={getAuthorization} color="warning" aria-label="add">
<AddIcon />
</Fab>
</Paper>
</Grid>
{/* <Button onClick={getData}>Test API</Button> */}
</Grid>
</div>
{successAlert === true ? <SuccessSnackbar open={successAlert} handleClose={handleAlertClose}/> : <></> }
{errorAlert === true ? <ErrorSnackbar open={errorAlert} handleClose={handleAlertClose}/> : <></> }
</Container>
</>
);
};
server side:
const { default: axios } = require('axios');
const router = require('express').Router();
require('dotenv').config();
const mavenlink_app_id = process.env.MAVENLINK_APP_ID;
const secret_token_mavenlink = process.env.SECRET_TOKEN_MAVENLINK;
router.get('/oauth/authorize', (req, res) => {
axios({url:'https://app.mavenlink.com/oauth/authorize?client_id='+mavenlink_app_id+'&response_type=code&redirect_uri=http://localhost:5000/oauth/callback',})
.then((response) => {
console.log(response.data)
res.send(response.data)
})
.catch(error => console.log(error));
})
router.get('/oauth/callback', (req, res) => {
try {
let returnTo = req.protocol +'://'+req.hostname;
const port = req.connection.localPort
if (port !== undefined && port !== 5000) {
returnTo = `${returnTo}:3000`;
}
let access_token = req.query.code;
console.log(access_token)
res.status(201)
.cookie('mavenlink_token', access_token, {
expires: new Date(Date.now() + 120000), // cookie will be removed after 2 minutes
})
.redirect(301, `${returnTo}/`)
} catch(error) {
res.status(500).send('Server Error')
}
})
module.exports = router;

Answer 1

Why do you need your server to proxy request to mavenlink? This seems to be the issue as the mavenlink login form seems to be posting back to your server. Why can't your server just redirect the browser to mavenlink url instead?
If you open a window with a URL http://localhost:5000/oauth/authorize, your server will redirect to mavenlink and the login form will submit to mavenlink and the redirect will come back to your server at http://localhost:3000/mavenlinkpage with the auth code.