I have a app that is embedded in another page that is using IAP authentication on google console it seems to be working fine when I sign in normally but when I use incognito the embbed web app wont show.
import React from "react";
const page = props => {
return <embed src={"page.appstop.com"} width="100%" height="700px"/>
};
export default page;
<main>
<Route path="/page" component={props => <page history={history}/>} />
</main>
The main app and the embedded app have their own authentication but I cant seem to get the embedded one to work in incognito mode and I am not sure why this is and how I can over come it. Does any one know what I should do and how I should do it ?
the error code I get is
Access to internal resource at 'https://accounts.google.com/o/oauth2/v2/auth?client_id=4.apps.googleusercontent.com&response_type=code&scope=openid+email&redirect_uri
=https://iap.googleapis.com/v1/oauth/clientIds/id
:handleRedirect&code_challenge=D&code_challenge_method=S256&cred_ref=true&state=
(redirected from 'https:page.app.appspot.com/manifest.json') from origin
'https://page.app.appspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-
Origin' header is present on the requested resource.
accounts.google.com refused to connect.
It seems that the embedded link is being blocked by CORS probably because the Cookies are restricted in incognito.
You could test adding headers on your server code.
app.use((req,res,next)=>{
res.setHeader('Acces-Control-Allow-Origin','*');
res.setHeader('Acces-Control-Allow-Methods','GET,POST,PUT,PATCH,DELETE');
res.setHeader('Acces-Contorl-Allow-Methods','Content-Type','Authorization');
next();
})
You may need to specify an explicit origin for the Access-Control-Allow-Origin response-header value. Reference.