Facebook authorization not working for firebase auth - firebase

Question

I have social auth on a chat app I've built. The Google auth works perfectly fine but the Facebook auth mysteriously hits another URL for a second and then redirects back to the login page. I know that the App id and App secret are correct in firebase authentication for Facebook. When I was just running the app locally on http://localhost:3000, it gave me this error:
I assumed hosting it to a secure site with https would remedy the situation but now it just hits the url and returns to the login page with no errors logged in the console. Here is the code that handles the login:
import React from 'react';
import { GoogleOutlined, FacebookOutlined } from '#ant-design/icons';
import 'firebase/app';
import { auth } from '../firebase';
import firebase from 'firebase/app';
const Login = () => {
return (
<div id='login-page'>
<div id='login-card'>
<h2>Welcome to Unichat!</h2>
<div
className='login-button google'
onClick={() =>
auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())
}
>
<GoogleOutlined /> Sign In with Google
</div>
<br /> <br />
<div
className='login-button facebook'
onClick={() =>
auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())
}
>
<FacebookOutlined /> Sign In with Facebook
</div>
</div>
</div>
);
};
export default Login;
And here is the hosted site to test out the Facebook login: https://chatapplication.netlify.app