Twitch Oauth flow ends up with response 404

Hi, I was trying to make my app with Twitch social login for the first time and having trouble with this.

while I was following OAuth documentation, even I duplicated the example snippet, I’m facing 404 error, having no idea.

The following code is the part when I execute Twitch login


const TEST_CLIENT_ID = 'la1wyzf177zaabgwjwsx129l7n5lwf';
const CALLBACK_URL = 'http://localhost:3000/auth/login/twitch';
const RESPONSE_TYPE = 'token';
const SCOPE = 'user:read:email';


const TwitchLogin = () => {
	const client = useContext(ClientContext);
	const auth = useContext(AuthContext);

	let api = Axios.create({});

	const attemptLogin = async () => {
		api.get(
			`https://id.twitch.tv/oauth2/authorize?response_type=${RESPONSE_TYPE}&client_id=${TEST_CLIENT_ID}&redirect_uri=${CALLBACK_URL}&scope=${SCOPE}`
		).then((res: any) => console.dir(res));
	};
	return (
		<Container href="/auth/login/twitch" onClick={attemptLogin}>
			<Image src="/image/twitch.png" />
			<Tag>Twitch Sign In</Tag>
		</Container>
	);
};

when I log the error, browser response with following error

`https://id.twitch.tv/oauth2/authorize%20%20%20%20?client_id=la1wyzf177zaabgwjwsx129l7n5lwf%20%20%20%20&redirect_uri=http://localhost:3000/auth/login/twitch%20%20%20%20&response_type=token%20%20%20%20&scope=user:read:email 404`

createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.onloadend (xhr.js:66:1)

Im suspecting this error comes by %20 ← inserted on url , because when I copy & paste the url from error, and erase all of %20 and enter on Chrome browser, it leads me to

but I’m not sure this is right login form for Twitch social login… so just suspecting. I’ve refered to lots of other issue topic which had similar issue with me, but none of them solved… any idea on this situation??

The issue is that you’re just making a HTTP request within your page to GET that URL, when you need to actually redirect the user to that page.

When you send the user to that Twitch page, they can then either accept on deny the connection to your app, at which point they’ll then be redirected to your redirect URL.

1 Like

Thanks for fast response!! I’m feeling a lots of disappointment to my self :joy: so much thanks to u!!

You’re welcome!

It’s something many devs who are unfamiliar with OAuth and how the various different auth flows work sometimes get tripped up on.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.