From 33cd9204988d5d23fe6caac95206eca2c5aa120e Mon Sep 17 00:00:00 2001 From: Yash Vardhan Date: Sat, 15 May 2021 15:59:03 +0530 Subject: [PATCH 1/3] update api keys --- src/firebase.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/firebase.js b/src/firebase.js index aa2516c..81e0a3c 100644 --- a/src/firebase.js +++ b/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, From 3ea566fbbecd74b6f9ef9ba5282fb2f0b196538d Mon Sep 17 00:00:00 2001 From: Yash Vardhan Date: Sun, 16 May 2021 17:54:03 +0530 Subject: [PATCH 2/3] update facebook and google authentication --- src/components/Dashboard.js | 25 +++++++++++++++++++++++-- src/components/Login.js | 28 +++++++++++++++++++++++++++- src/contexts/AuthContext.js | 35 ++++++++++++++++++++++++++++++++++- 3 files changed, 84 insertions(+), 4 deletions(-) diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js index 96e120f..e600802 100644 --- a/src/components/Dashboard.js +++ b/src/components/Dashboard.js @@ -1,11 +1,15 @@ -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" 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,13 +23,30 @@ 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 ( <>

Profile

{error && {error}} - Email: {currentUser.email} + Email: {currentUser.email}
+ {currentUser.displayName ? Name: {currentUser.displayName} : null} Update Profile diff --git a/src/components/Login.js b/src/components/Login.js index 53ec8b7..23b542d 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -6,7 +6,7 @@ import { Link, useHistory } from "react-router-dom" 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 +26,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 ( <> @@ -50,6 +69,13 @@ export default function Login() { + +

+
Need an account? Sign Up
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js index c541957..04b1d93 100644 --- a/src/contexts/AuthContext.js +++ b/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 ( From 28ef7ae4a2a0c375e7322d3c9ac978ad68ab86b7 Mon Sep 17 00:00:00 2001 From: Yash Vardhan Date: Sun, 16 May 2021 20:28:46 +0530 Subject: [PATCH 3/3] update user profile --- package-lock.json | 5 +++++ package.json | 3 ++- src/components/Dashboard.js | 16 +++++++++++----- src/components/Login.js | 17 +++++++++-------- src/components/styles.css | 32 ++++++++++++++++++++++++++++++++ 5 files changed, 59 insertions(+), 14 deletions(-) create mode 100644 src/components/styles.css diff --git a/package-lock.json b/package-lock.json index f85d728..b286e44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11720,6 +11720,11 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-social-login-buttons": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/react-social-login-buttons/-/react-social-login-buttons-3.4.0.tgz", + "integrity": "sha512-bECnTNfRSPKMnwVdfsLNNi0Fv5A8btJw3ANLg1Zj95DCjP11KPKUuhqOj9AQWLmQeyrLjMO7orEFE5M2QiDY9A==" + }, "react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", diff --git a/package.json b/package.json index 18e57c1..7085cdd 100644 --- a/package.json +++ b/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", diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js index e600802..d7c99a5 100644 --- a/src/components/Dashboard.js +++ b/src/components/Dashboard.js @@ -2,7 +2,8 @@ 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 firebase from "firebase/app"; +import "./styles.css"; export default function Dashboard() { const [error, setError] = useState("") @@ -45,11 +46,16 @@ export default function Dashboard() {

Profile

{error && {error}} - Email: {currentUser.email}
- {currentUser.displayName ? Name: {currentUser.displayName} : null} - +
+
+ {currentUser.photoURL ? : null} +
+ Email: {currentUser.email}
+ {currentUser.displayName ?

Name: {currentUser.displayName}

: null} +
+ {!currentUser.displayName ? Update Profile - + : null}
diff --git a/src/components/Login.js b/src/components/Login.js index 23b542d..8ece7ab 100644 --- a/src/components/Login.js +++ b/src/components/Login.js @@ -1,7 +1,8 @@ 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() @@ -69,16 +70,16 @@ export default function Login() {
- -

- +
Need an account? Sign Up
+
+ +
+
+ +
) } diff --git a/src/components/styles.css b/src/components/styles.css new file mode 100644 index 0000000..7db71c7 --- /dev/null +++ b/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; + } \ No newline at end of file