Install react-firebaseUI package

package.json

@@ -12,6 +12,7 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-firebaseui": "^4.1.0",
     "react-icons": "^3.10.0",
     "react-redux": "^7.1.3",
     "react-redux-firebase": "^3.1.1",

src/components/LogInForm.js

@@ -5,18 +5,58 @@ import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import firebase from "firebase/app";
 import * as firebaseui from "firebaseui";
+import LoadingScreen from "./LoadingScreen";
+import { StyledFirebaseAuth } from "react-firebaseui";
 
-var ui = new firebaseui.auth.AuthUI(firebase.auth());
-
-ui.start("#firebaseui-auth-container", {
-  signInOptions: [
-    {
-      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
-      requireDisplayName: false,
+const uiConfig = {
+  callbacks: {
+    signInSuccessWithAuthResult: function (authResult, redirectUrl) {
+      // User successfully signed in.
+      // Return type determines whether we continue the redirect automatically
+      // or whether we leave that to developer to handle.
+      return true;
     },
+    uiShown: function () {
+      // The widget is rendered.
+      // Hide the loader.
+      document.getElementById("loader").style.display = "none";
+    },
+  },
+  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
+  signInFlow: "popup",
+  signInSuccessUrl: "<url-to-redirect-to-on-success>",
+  signInOptions: [
+    // Leave the lines as is for the providers you want to offer your users.
     firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+    firebase.auth.EmailAuthProvider.PROVIDER_ID,
   ],
-});
+  // signInOptions: [
+  //   {
+  //     provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
+  //     requireDisplayName: false,
+  //   },
+  //   {
+  //     provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+  //     scopes: ["https://www.googleapis.com/auth/contacts.readonly"],
+  //     customParameters: {
+  //       prompt: "select_account",
+  //     },
+  //   },
+  //   {
+  //     provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+  //     scopes: ["public_profile", "email", "user_friends"],
+  //   },
+  // ],
+  // Terms of service url.
+  tosUrl: "<your-tos-url>",
+  // Privacy policy url.
+  privacyPolicyUrl: "<your-privacy-policy-url>",
+};
+
+const ui = new firebaseui.auth.AuthUI(firebase.auth());
+
+ui.start("#firebaseui-auth-container", uiConfig);
 
 if (ui.isPendingRedirect()) {
   ui.start("#firebaseui-auth-container", uiConfig);
@@ -28,6 +68,9 @@ function LogInForm(props) {
       <Button onClick={props.onRegisterClick}>Toggle register</Button>
       <h1 className="display-2">Sign in to your account</h1>
       <div id="firebaseui-auth-container"></div>
+      <div id="loader">
+        <LoadingScreen />
+      </div>
     </Container>
   );
 }