How Do You Use An Oauth Callback Between React And Express?

18 November 2019 - 1 answer

I'm trying to integrate MailChimp's API into my React App which will allow users to authorize their MailChimp accounts for use in my app. I haven't found a tutorial on it, so I'm following this tutorial which uses only express: https://www.codementor.io/mattgoldspink/integrate-mailchimp-with-nodejs-app-du10854xp

I've gone through Mailchimp to set up my app/my client secret/client id, etc:

Redirect URI

```http://127.0.0.1:3001/mailchimp/auth/callback````

I kept the same express code as the tutorial, except I put my client secret in a .env file:

server.js

const querystring = require('querystring');
const mailchimpClientId = `${process.env.MC_CLIENT}`

app.get('/mailchimp/auth/authorize', function (req, res) {
  res.redirect('https://login.mailchimp.com/oauth2/authorize?' +
    querystring.stringify({
      'response_type': 'code',
      'client_id': mailchimpClientId,
      'redirect_uri': 'http://127.0.0.1:3000/mailchimp/auth/callback'
    }));
});

However, in the tutorial, the callback function is in an HTML file written like this:

<!doctype html>
<html>
    <head>
        <title>Integrate MailChimp</title>
    </head>
    <body>
        <a class="btn btn-primary" target="_blank" rel="nofollow noreferrer" href="/mailchimp/auth/authorize">Connect with MailChimp</a>
    </body>
</html>

I've added this (using JSX syntax):

MailChimp.jsx

class MailChimp extends Component {

  render() {
    return (
      <div>
        <h1>MailChimp Auth</h1>
        <a href={'http://127.0.0.1:3000/mailchimp/auth/authorize'}>Mailchimp</a>
      </div >
    )
  }
}

export default withRouter(MailChimp);

On clicking that link inside my React App's route localhost:3001/mailchimp, I'm sent to mailchimp where I sucessfully login with my account (not the one requesting permission) and I am returned to the react app.

However, I'm getting the following error:

GET /mailchimp/auth/callback 404 2.818 ms - 162
Failed to load resource: the server responded with a status of 404 (Not Found)

I've scoured the web trying to find a working example of using React & Express for MailChimp Oauth for app authorization but I haven't found one. My question is, did I set something up wrong in the redirect, or is there a better recommendation for handling this request in React?

Answer

The 404 error is saying that you don't have a route that maps to /mailchimp/auth/callback. Looks like from your code you haven't written that.

Unless you haven't provided the code for it, you need the route handler mentioned with the code in the tutorial:

app.get('/mailchimp/auth/callback', function(req, res) {
  request.post('https://login.mailchimp.com/oauth2/token')
         .send(querystring.stringify({
   ...
}

source: stackoverflow.com

← Previous Post