title: How do you use an Oauth callback between React and Express?
body: <p>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: <a href="https://www.codementor.io/mattgoldspink/integrate-mailchimp-with-nodejs-app-du10854xp" rel="nofollow noreferrer">https://www.codementor.io/mattgoldspink/integrate-mailchimp-with-nodejs-app-du10854xp</a></p>
  
  <p>I've gone through Mailchimp to set up my app/my client secret/client id, etc:</p>
  
  <h3>Redirect URI</h3>
  
  <p>```<a href="http://127.0.0.1:3001/mailchimp/auth/callback" rel="nofollow noreferrer">http://127.0.0.1:3001/mailchimp/auth/callback</a>````</p>
  
  <p>I kept the same express code as the tutorial, except I put my client secret in a .env file:</p>
  
  <h1>server.js</h1>
  
  <pre><code>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'
      }));
  });
  </code></pre>
  
  <p>However, in the tutorial, the callback function is in an HTML file written like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Integrate MailChimp&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;a class="btn btn-primary" href="/mailchimp/auth/authorize"&gt;Connect with MailChimp&lt;/a&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've added this (using JSX syntax):</p>
  
  <h1>MailChimp.jsx</h1>
  
  <pre><code>class MailChimp extends Component {
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;MailChimp Auth&lt;/h1&gt;
          &lt;a href={'http://127.0.0.1:3000/mailchimp/auth/authorize'}&gt;Mailchimp&lt;/a&gt;
        &lt;/div &gt;
      )
    }
  }
  
  export default withRouter(MailChimp);
  </code></pre>
  
  <p>On clicking that link inside my React App's route <code>localhost:3001/mailchimp</code>, 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.</p>
  
  <p>However, I'm getting the following error:</p>
  
  <pre><code>GET /mailchimp/auth/callback 404 2.818 ms - 162
  Failed to load resource: the server responded with a status of 404 (Not Found)
  </code></pre>
  
  <p>I've scoured the web trying to find a working example of using React &amp; 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?</p>