Embedding 'https://id.twitch.tv/oauth2/authorize' in react-Iframe error

I’m trying to use a react-Iframe to embed oauth-authorization-code-flow in my react web app.

<Iframe
src='https://id.twitch.tv/oauth2/authorize?client_id=my_client_id&redirect_uri=my_redirect_uri&response_type=code&scope=my_scopes'
>
</Iframe>

The frame shows
www.twitch.tv refused to connect.’
and the error in console is
‘Refused to display ‘https://www.twitch.tv/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.’

I don’t know if its even possible to do this and would be open to another way of having the user authenticate without leaving page. I also need to be able to capture the code returned to store and use for subsequent api calls.

I’m using react version 17.0.2

You need to redirect the user to Twitch, not display it in an iFrame

Is this a limitation/restriction of Twitch itself?

No it’s how oAuth works.

For security you redirect not iFrame

Gotcha. Thanks!

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