Add Facebook Login

gatsby-theme-firebase/src/components/SocialLogins.tsx

@@ -7,11 +7,13 @@ import {
   googleProvider,
   githubProvider,
   twitterProvider,
+  facebookProvider,
 } from "../firebase/auth";
 import SocialLoginButton from "./SocialLoginButton";
 import GitHubIcon from "./icons/GitHub";
 import GoogleIcon from "./icons/Google";
 import TwitterIcon from "./icons/Twitter";
+import FacebookIcon from "./icons/Facebook";
 
 const SocialLogins: React.FunctionComponent<{
   onSuccess?: (user?: firebase.auth.UserCredential) => void;
@@ -21,6 +23,7 @@ const SocialLogins: React.FunctionComponent<{
   const enableGoogle = socialLogins.includes("google");
   const enableTwitter = socialLogins.includes("twitter");
   const enableGitHub = socialLogins.includes("github");
+  const enableFacebook = socialLogins.includes("facebook");
 
   return (
     <div
@@ -63,6 +66,21 @@ const SocialLogins: React.FunctionComponent<{
           <TwitterIcon sx={{ mr: 1 }} size={18} /> Sign in with Twitter
         </SocialLoginButton>
       )}
+      {enableFacebook && (
+        <SocialLoginButton
+          onClick={async () => {
+            try {
+              const user = await auth.signInWithPopup(facebookProvider());
+              onSuccess(user);
+            } catch (err) {
+              console.error("Authentication Error: ", err);
+              onError(err);
+            }
+          }}
+        >
+          <FacebookIcon sx={{ mr: 1 }} size={18} /> Sign in with Facebook
+        </SocialLoginButton>
+      )}
       {enableGitHub && (
         <SocialLoginButton
           onClick={async () => {

gatsby-theme-firebase/src/components/icons/Facebook.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+interface Props extends React.SVGAttributes<SVGElement> {
+  size?: number;
+}
+
+const Faceboook: React.FunctionComponent<Props> = ({
+  size = 16,
+  ...restProps
+}) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 50 50" {...restProps}>
+      <title>Faceboook</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M40,0H10C4.486,0,0,4.486,0,10v30c0,5.514,4.486,10,10,10h30c5.514,0,10-4.486,10-10V10C50,4.486,45.514,0,40,0z M39,17h-3 c-2.145,0-3,0.504-3,2v3h6l-1,6h-5v20h-7V28h-3v-6h3v-3c0-4.677,1.581-8,7-8c2.902,0,6,1,6,1V17z"
+          fill="#3A5C98"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default Faceboook;

gatsby-theme-firebase/src/firebase/auth/index.ts

@@ -11,3 +11,7 @@ export const googleProvider = () => {
 export const twitterProvider = () => {
   return new firebase.auth.TwitterAuthProvider();
 };
+
+export const facebookProvider = () => {
+  return new firebase.auth.FacebookAuthProvider();
+};