Embedding Firebase social login in an iframe

Question

I have a React app embedded in an iframe. The app uses firebase-authentication to sign in using Google, Facebook or Twitter. While the authentication mechanism works perfectly outside an iframe, it does not work within an iframe due to cross-origin issues. Any ideas how to work around this?

Here's the code that embeds the React app in an iframe:

<iframe
    id="myframe"
    src="https://example.com/my-frame"
    scrolling="no"
></iframe>

When the React app redirects to the social login, I get the following error message in Chrome DevTools:

Refused to display 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xyz&scope=https://www.googleapis.com/auth/userinfo.email+profile+openid&redirect_uri=https://example.firebaseapp.com/__/auth/handler&state=AH..oE' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

It appears that Google Sign In is sending x-frame-options:SAMEORIGIN header which is preventing the browser from opening that page. Is there a way to work around this?

Thanks in advance!

bojeil bojeil · Accepted Answer · 2018-01-22T05:55:34

OAuth providers like accounts.google.com refuse to render in a frame or iframe. This is done for security reasons.

There is nothing you can do to bypass that. However, you could switch to using signInWithPopup instead if you are using Firebase Auth to sign-in from an iframe.

Embedding Firebase social login in an iframe

1 Answers