title: Embedding Firebase social login in an iframe
body: <p>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?</p>
  
  <p>Here's the code that embeds the React app in an iframe:</p>
  
  <pre><code>&lt;iframe
      id="myframe"
      src="https://example.com/my-frame"
      scrolling="no"
  &gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>When the React app redirects to the social login, I get the following error message in Chrome DevTools:</p>
  
  <blockquote>
    <p>Refused to display '<a href="https://accounts.google.com/o/oauth2/auth?response_type=code&amp;client_id=xyz&amp;scope=https://www.googleapis.com/auth/userinfo.email+profile+openid&amp;redirect_uri=https://example.firebaseapp.com/__/auth/handler&amp;state=AH..oE" rel="nofollow noreferrer">https://accounts.google.com/o/oauth2/auth?response_type=code&amp;client_id=xyz&amp;scope=https://www.googleapis.com/auth/userinfo.email+profile+openid&amp;redirect_uri=https://example.firebaseapp.com/__/auth/handler&amp;state=AH..oE</a>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.</p>
  </blockquote>
  
  <p>It appears that Google Sign In is sending <code>x-frame-options:SAMEORIGIN</code> header which is preventing the browser from opening that page. Is there a way to work around this?</p>
  
  <p>Thanks in advance!</p>