configurable auth options

www/src/constants/firebaseui.ts

@@ -1,33 +1,34 @@
 import firebase from "firebase/app";
 import * as firebaseui from "firebaseui";
-
-export const uiConfig: firebaseui.auth.Config = {
+const authOptions = {
+  google: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+  twitter: firebase.auth.TwitterAuthProvider.PROVIDER_ID,
+  facebook: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+  github: firebase.auth.GithubAuthProvider.PROVIDER_ID,
+  microsoft: {
+    provider: "microsoft.com",
+    loginHintKey: "login_hint",
+  },
+  apple: { provider: "apple.com" },
+  email: {
+    provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
+    requireDisplayName: true,
+    disableSignUp: { status: true },
+  },
+  anonymous: firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
+}
+export const getUiConfig = (selectedSignInOptions: { google?: Boolean, twitter?: Boolean, github?: Boolean, facebook?: Boolean, email?: Boolean,microsoft?:Boolean, apple?: Boolean,anonymous?:Boolean}) => ({
   signInFlow: "popup",
   signInSuccessUrl: "/",
-  signInOptions: [
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-    // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
-    // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
-    // firebase.auth.GithubAuthProvider.PROVIDER_ID,
-    // {
-    //   provider: "microsoft.com",
-    //   loginHintKey: "login_hint",
-    // },
-    // {
-    //   provider: "apple.com",
-    // },
-    // {
-    //   provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
-    //   requireDisplayName: true,
-    //   disableSignUp: { status: true },
-    // },
-    // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
-    // firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID,
-  ],
+  signInOptions: Object.keys(selectedSignInOptions).map((option) => {
+    if (selectedSignInOptions[option]) {
+      return authOptions[option]
+    }
+  }).filter((option) =>option),
   callbacks: {
     uiShown: () => {
       const node = document.getElementById("firetable-firebaseui-skeleton");
       if (node) node.style.display = "none";
     },
   },
-};
+});

www/src/pages/Auth/index.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { auth } from "../../firebase";
-import { uiConfig } from "constants/firebaseui";
+import React,{useState,useEffect} from "react";
+import { auth,db } from "../../firebase";
+import { getUiConfig } from "constants/firebaseui";
 import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
 
 import { makeStyles, createStyles, Typography } from "@material-ui/core";
@@ -8,6 +8,7 @@ import { fade } from "@material-ui/core/styles";
 import Skeleton from "@material-ui/lab/Skeleton";
 
 import AuthLayout from "components/Auth/AuthLayout";
+import * as firebaseui from "firebaseui";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -176,9 +177,19 @@ const useStyles = makeStyles((theme) =>
 
 export default function AuthPage() {
   const classes = useStyles();
+  const [uiConfig,setUiConfig] = useState<firebaseui.auth.Config|undefined>(); 
+  useEffect(() =>{
+    db.doc("/_FIRETABLE_/authSettings").get().then((doc) =>{
+      const signInOptions = doc?.get("signInOptions")
+      setUiConfig(getUiConfig(signInOptions))
+    }).catch((err) =>{
+      setUiConfig(getUiConfig({google:true}))
+    })
+  },[])
 
   return (
     <AuthLayout>
+      {uiConfig?<>
       <Typography variant="button" className={classes.signInText}>
         Sign in with
       </Typography>
@@ -193,7 +204,7 @@ export default function AuthPage() {
         firebaseAuth={auth}
         uiConfig={uiConfig}
         className="firetable-firebaseui"
-      />
+      /></>:<><Skeleton variant="rect"/><Skeleton variant="rect"/></>}
     </AuthLayout>
   );
 }