I coded backend with NestJS and created such "http://localhost:8080/api/v0/auth/patreon/login" endpoint.
When this endpoint is visited, I redirect to https://www.patreon.com/oauth2/authorize?response_type=code&client_id=${PATREON_CLIENT_ID}&redirect_uri=${PATREON_REDIRECT_URL}&scope=${getPatreonAuthScopes()} with my code below.
@Redirect(
`https://www.patreon.com/oauth2/authorize?response_type=code&client_id=${PATREON_CLIENT_ID}&redirect_uri=${PATREON_REDIRECT_URL}&scope=${getPatreonAuthScopes()}`,
301,
)
When I open this link in the browser, I can get the "access_code" value.
However, I am getting Security error in Frontend.
SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
This is how my code in the frontend part is.
import React, {useEffect, useState} from 'react';
const PatreonOAuthButton = () => {
const [externalPopup, setExternalPopup] = useState<any>(null);
const connectClick = () => {
const width = 500;
const height = 400;
const left = window.screenX + (window.outerWidth - width) / 2;
const top = window.screenY + (window.outerHeight - height) / 2.5;
const title = '';
const url = "http://localhost:8080/api/v0/auth/patreon/login";
const popup = window.open(url, title, `width=${width},height=${height},left=${left},top=${top}`);
setExternalPopup(popup);
}
useEffect(() => {
if (!externalPopup) {
return;
}
const timer = setInterval(() => {
if (!externalPopup) {
timer && clearInterval(timer);
return;
}
const currentUrl = externalPopup.location.href;
// ^^^^^^ the security error trigger
if (!currentUrl) {
return;
}
const searchParams = new URL(currentUrl).searchParams;
const code = searchParams.get('code');
if (code) {
externalPopup.close();
console.log(`Success! Authorization Bearer Code = ${code}`);
}
}, 500)
},
[externalPopup]
)
return (
<div className="flex px-16 py-14 text-defaults-white">
<button
onClick={connectClick}
>
<span>Login</span>
</button>
</div>
);
};
export default PatreonOAuthButton;
I drew the flow I want to do for your.
Please help, I'm getting on my nerves.
NOTE: I have enabled cors in NestJS. Here is my code for Cors
// in the main.ts file
// ...
app.enableCors({
origin: ['*', 'http://localhost:3000'],
credentials: true,
});
// ...
