Added Authentication with Google and Facebook as well

package.json

@@ -12,7 +12,8 @@
     "react-bootstrap": "^1.3.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "react-social-login-buttons": "^3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Dashboard.js

@@ -1,11 +1,16 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import { Card, Button, Alert } from "react-bootstrap"
 import { useAuth } from "../contexts/AuthContext"
 import { Link, useHistory } from "react-router-dom"
+import firebase from "firebase/app";
+import "./styles.css";
 
 export default function Dashboard() {
   const [error, setError] = useState("")
   const { currentUser, logout } = useAuth()
+  const [name, setName] = useState(null);
+  const [photo, setPhoto] = useState(null);
+  const [email, setEmail] = useState(null);
   const history = useHistory()
 
   async function handleLogout() {
@@ -19,16 +24,38 @@ export default function Dashboard() {
     }
   }
 
+  useEffect(() => {
+    var user = firebase.auth().currentUser;
+    if (user != null) {
+      user.providerData.forEach(function (profile) {
+        console.log("Sign-in provider: " + profile.providerId);
+        console.log("  Provider-specific UID: " + profile.uid);
+        console.log("  Name: " + profile.displayName);
+        console.log("  Email: " + profile.email);
+        console.log("  Photo URL: " + profile.photoURL);
+      });
+      console.log(currentUser.displayName);
+      console.log(currentUser.email);
+      console.log(currentUser.photoURL);
+    }
+  }, []);
+
   return (
     <>
       <Card>
         <Card.Body>
           <h2 className="text-center mb-4">Profile</h2>
           {error && <Alert variant="danger">{error}</Alert>}
-          <strong>Email:</strong> {currentUser.email}
-          <Link to="/update-profile" className="btn btn-primary w-100 mt-3">
+          <div style={{textAlign: "center"}}>
+            <div style={{marginBottom: "1rem"}}>
+              {currentUser.photoURL ? <img className="card-image" src={currentUser.photoURL} /> : null}
+            </div>
+            <strong>Email:</strong> {currentUser.email} <br />
+            {currentUser.displayName ? <p><strong>Name: </strong>{currentUser.displayName}</p>  : null}
+          </div>         
+          {!currentUser.displayName ? <Link to="/update-profile" className="btn btn-primary w-100 mt-3">
             Update Profile
-          </Link>
+          </Link> : null}
         </Card.Body>
       </Card>
       <div className="w-100 text-center mt-2">

src/components/Login.js

@@ -1,12 +1,13 @@
 import React, { useRef, useState } from "react"
 import { Form, Button, Card, Alert } from "react-bootstrap"
 import { useAuth } from "../contexts/AuthContext"
-import { Link, useHistory } from "react-router-dom"
+import { Link, useHistory } from "react-router-dom";
+import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons";
 
 export default function Login() {
   const emailRef = useRef()
   const passwordRef = useRef()
-  const { login } = useAuth()
+  const { login, googleLogin, facebookLogin } = useAuth()
   const [error, setError] = useState("")
   const [loading, setLoading] = useState(false)
   const history = useHistory()
@@ -26,6 +27,25 @@ export default function Login() {
     setLoading(false)
   }
 
+  async function googleHandle() {
+     try{
+       await googleLogin()
+       history.push("/")
+     } catch {
+       console.log("Failed to login using google");
+     }
+  }
+
+  async function facebookHandle() {
+    try{
+      await facebookLogin()
+      history.push("/")
+    } catch {
+      console.log("Failed to login using facebook");
+    }
+ }
+
+
   return (
     <>
       <Card>
@@ -50,9 +70,16 @@ export default function Login() {
           </div>
         </Card.Body>
       </Card>
+
       <div className="w-100 text-center mt-2">
         Need an account? <Link to="/signup">Sign Up</Link>
       </div>
+      <div style={{marginTop: "1rem", marginBottom: "1rem"}}>
+        <FacebookLoginButton onClick={facebookHandle} />
+      </div>
+      <div style={{marginTop: "1rem", marginBottom: "1rem"}}>
+        <GoogleLoginButton onClick={googleHandle} />
+      </div>
     </>
   )
 }

src/components/styles.css

@@ -0,0 +1,32 @@
+.card-image {
+    width: 100px;
+    height: auto;
+    border-radius: 50%;
+}
+.g_body{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .g-button{
+    border: 1px solid rgb(66, 133, 244);
+    background: rgb(66, 133, 244);
+    display: flex;
+  }
+
+  .g-logo{
+    width: 21px;
+    height: 21px;
+    padding: 8px 10px;
+    background: white;
+  }
+
+  .g-text{
+    font-size: 16px;
+    padding: 8px 10px;
+    color: white;
+    font-family: roboto;
+    text-align: center;
+  }

src/contexts/AuthContext.js

@@ -1,5 +1,6 @@
 import React, { useContext, useState, useEffect } from "react"
 import { auth } from "../firebase"
+import firebase from "firebase/app"
 
 const AuthContext = React.createContext()
 
@@ -35,6 +36,36 @@ export function AuthProvider({ children }) {
     return currentUser.updatePassword(password)
   }
 
+  function googleLogin() {
+    var provider = new firebase.auth.GoogleAuthProvider();
+    return firebase.auth()
+      .signInWithPopup(provider)
+      .then((result) => {
+      var credential = result.credential;
+      var token = credential.accessToken;
+      var user = result.user;
+      console.log(user);
+      }).catch((error) => {
+        console.log(error);
+      });
+  }
+
+  function facebookLogin() {
+    var provider = new firebase.auth.FacebookAuthProvider();
+    return firebase
+    .auth()
+    .signInWithPopup(provider)
+    .then((result) => {
+      var credential = result.credential;
+      var user = result.user;
+      var accessToken = credential.accessToken;
+      console.log(user);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  }
+
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged(user => {
       setCurrentUser(user)
@@ -51,7 +82,9 @@ export function AuthProvider({ children }) {
     logout,
     resetPassword,
     updateEmail,
-    updatePassword
+    updatePassword,
+    googleLogin,
+    facebookLogin
   }
 
   return (

src/firebase.js

@@ -4,7 +4,6 @@ import "firebase/auth"
 const app = firebase.initializeApp({
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
   authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
-  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
   projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
   storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,