Ad

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

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?

Ad

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({
   ...
}
Ad
source: stackoverflow.com
Ad