CORS error when calling Twitch authentication from React frontend

Other Questions Twitch
1

I’m having trouble with CORS when trying to authenticate users through Twitch in my React app.

When I navigate directly to my server endpoint (http://localhost:8000/auth/twitch) in the browser, everything works perfectly. I get redirected to Twitch login as expected.

However, when my React app tries to call the same endpoint using axios, I get a CORS error saying there’s no ‘Access-Control-Allow-Origin’ header.

Here’s my backend authentication setup:

server.get("/login/twitch", passport.authenticate("twitch"), (request, response) => {});

server.get("/login/twitch/redirect", passport.authenticate("twitch"), (request, response) => {
  response.redirect("http://localhost:3000/dashboard");
});

I’m using passport-twitch-new for the authentication. I already tried adding CORS middleware with wildcard origin but it didn’t help.

What’s the correct way to handle this authentication flow from a React frontend?

2

This is expected OAuth behavior. Axios tries to make an AJAX call, but it can’t handle OAuth redirects properly. Twitch’s OAuth endpoint needs browser navigation, not XMLHttpRequest. I’ve hit this same issue in several projects. Don’t use axios for the initial auth request - treat it as navigation instead. Use window.location.assign('http://localhost:8000/login/twitch') or just set window.location to trigger a full page redirect. Your backend setup looks fine. Passport will handle the OAuth dance with Twitch and redirect back to your React app after auth completes. The CORS error goes away because you’re not making cross-origin requests from JavaScript anymore - you’re doing proper browser navigation which bypasses CORS entirely. This works reliably with all major OAuth providers, not just Twitch.

3

totally agree! using full browser redirects is the way to go for oauth with twitch. axios won’t cut it for auth requests. just redirect with window.location.href and let the browser take care of it. CORS issues will be gone!

4

You’re hitting this issue because OAuth wasn’t built for AJAX calls. The redirect flow needs full browser navigation to work properly.

Ditch axios here. Just use window.location or a regular link to your auth endpoint.

That said, handling OAuth manually is a headache. I’ve switched to automating auth flows with Latenode instead of wrestling with passport setups.

Latenode creates workflows that handle the entire Twitch OAuth process - redirects, token storage, refreshes, error handling, all automatic. Your React app just kicks off the workflow and gets clean user data back.

No more CORS debugging or passport maintenance. It handles the tricky stuff like expired tokens and failed attempts that would normally break everything.

You can also add other OAuth providers later without touching backend code. Way more scalable than hardcoded auth routes.

5

oauth flows dont work with ajax - thats why ur hitting cors issues. skip axios and just use a regular form submit or button that redirects to your auth endpoint. try <form action="http://localhost:8000/login/twitch" method="get"><button type="submit">login</button></form> - itll dodge all the cors headaches.

6

This is a super common OAuth issue. Twitch’s OAuth redirect won’t work with axios calls - it needs a full browser redirect.

Don’t try axios on your auth endpoint. Just redirect the whole browser:

// In your React component
const handleTwitchLogin = () => {
  window.location.href = 'http://localhost:8000/login/twitch';
};

You’re doing browser navigation instead of an AJAX request, so no CORS issues.

Honestly though, I’ve found something way cleaner - automation through Latenode. It handles the entire OAuth flow, manages redirects and tokens automatically.

Latenode lets you build a workflow that manages Twitch auth, stores tokens securely, and sends user data back to your React app via webhook or API. No CORS headaches, no complex passport setup.

The automation covers edge cases like token refresh and error handling that you’d have to code yourself. Easy to add other OAuth providers later without touching your backend.

7

Had this exact problem last month building a streaming dashboard. CORS isn’t your issue here - you’re treating OAuth like a regular API call when it’s not. OAuth needs multiple browser redirects that axios can’t handle. Your browser works because it follows all the redirects between your server, Twitch’s auth server, and back to your app. Don’t fight OAuth - use the redirect flow it’s built for. Ditch the axios call and use a simple anchor tag or button that goes to your auth endpoint. Something like <a href="http://localhost:8000/login/twitch">Login with Twitch</a> works perfectly. User gets redirected through OAuth and lands back on your dashboard. It’s actually more secure since auth stays in the browser’s address bar where users can verify they’re on legit domains.