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??