So, I am trying to implement Facebook oAuth in React. I have already created an app and provided the following permissionsMyApp's permissions
When I click on the Login via Facebook button, I get redirected to a blank page:
Blank Page
The link is something like above.
Here's my code:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1082613119655352',
cookie : true,
xfbml : true,
version : 'v19.0'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
App.jsx
import React from 'react';
import { FacebookProvider, LoginButton } from 'react-facebook';
function App() {
function handleSuccess(response) {
console.log(response.status);
}
function handleError(error) {
console.log(error);
}
return (
<FacebookProvider appId="1082613119655352">
<LoginButton
scope="email"
onError={handleError}
onSuccess={handleSuccess}
>
Login via Facebook
</LoginButton>
</FacebookProvider>
);
}
export default App;
There aren't any console errors either. Idk what's the issue. Please help.
Web OAuth Loginin your app settings.