From af64d4f7d9dd5efa8f85d43157fb166d20c4290f Mon Sep 17 00:00:00 2001 From: HUGB Date: Wed, 18 May 2022 19:53:20 +0100 Subject: [PATCH] social login --- package.json | 2 ++ src/components/sidemenu/index.tsx | 2 +- src/context/feathers.ts | 8 ++++---- src/firebase-auth/auth/auth.js | 17 +++++++++++++++++ src/firebase-auth/config/authMethod.js | 11 +++++++++++ src/firebase-auth/config/firebase-config.js | 16 ++++++++++++++++ src/pages/auth/index.tsx | 16 ++++++++++++++-- 7 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 src/firebase-auth/auth/auth.js create mode 100644 src/firebase-auth/config/authMethod.js create mode 100644 src/firebase-auth/config/firebase-config.js diff --git a/package.json b/package.json index 2fefaf0a..26172852 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-simple-import-sort": "^7.0.0", + "firebase": "^9.8.1", "framer-motion": "^5.5.5", "gsap": "^3.9.1", "postcss": "^8.4.5", @@ -44,6 +45,7 @@ "react-json-editor-ajrm": "^2.5.13", "react-jutsu": "^3.0.3", "react-preloaders": "^3.0.3", + "react-router": "^6.3.0", "react-router-dom": "^6.2.1", "react-scripts": "^5.0.0", "react-semantic-ui-datepickers": "^2.17.1", diff --git a/src/components/sidemenu/index.tsx b/src/components/sidemenu/index.tsx index 2183fe24..76fcbde9 100644 --- a/src/components/sidemenu/index.tsx +++ b/src/components/sidemenu/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router'; +import { useNavigate } from 'react-router-dom'; import MenuItem from '../menuitem'; import { Lists } from '../menuitem/style'; diff --git a/src/context/feathers.ts b/src/context/feathers.ts index 5e967214..c13b77dd 100644 --- a/src/context/feathers.ts +++ b/src/context/feathers.ts @@ -3,10 +3,10 @@ import feathers from '@feathersjs/feathers'; import socketio from '@feathersjs/socketio-client'; import io from 'socket.io-client'; -const local = 'http://localhost:8080'; -// const url = 'http://ec2-18-168-154-165.eu-west-2.compute.amazonaws.com:8080'; +// const local = 'http://localhost:8080'; +const url = 'http://ec2-18-168-154-165.eu-west-2.compute.amazonaws.com:8080'; // const prod = 'https://healthstack-backend.herokuapp.com'; -const socket = io(local, { +const socket = io(url, { transports: ['websocket'], forceNew: true, }); @@ -15,7 +15,7 @@ client.configure(socketio(socket, { timeout: 700000 })); client.configure( authentication({ storage: window.localStorage, - }), + }) ); export default client; diff --git a/src/firebase-auth/auth/auth.js b/src/firebase-auth/auth/auth.js new file mode 100644 index 00000000..a18fb5b8 --- /dev/null +++ b/src/firebase-auth/auth/auth.js @@ -0,0 +1,17 @@ +import { signInWithPopup } from 'firebase/auth'; + +import { firebase } from '../config/firebase-config'; + +const socialMediaAuth = (provider) => { + signInWithPopup(firebase, provider) + .then((res) => { + console.log(res); + }) + .catch((err) => { + console.log(err); + }); +}; + +// console.log(socialMediaAuth()) + +export default socialMediaAuth; diff --git a/src/firebase-auth/config/authMethod.js b/src/firebase-auth/config/authMethod.js new file mode 100644 index 00000000..f06b4880 --- /dev/null +++ b/src/firebase-auth/config/authMethod.js @@ -0,0 +1,11 @@ +import { + FacebookAuthProvider, + GithubAuthProvider, + GoogleAuthProvider, +} from 'firebase/auth'; + +export const facebookProvider = new FacebookAuthProvider(); + +export const githubProvider = new GithubAuthProvider(); + +export const googleProvider = new GoogleAuthProvider(); diff --git a/src/firebase-auth/config/firebase-config.js b/src/firebase-auth/config/firebase-config.js new file mode 100644 index 00000000..85e5116e --- /dev/null +++ b/src/firebase-auth/config/firebase-config.js @@ -0,0 +1,16 @@ +import { initializeApp } from 'firebase/app'; +import { getAuth } from 'firebase/auth'; + +const firebaseConfig = { + apiKey: 'AIzaSyCaip9EpUwmTX2VbRtxESjS_xgGJn4AYtU', + authDomain: 'healthstack-eebd5.firebaseapp.com', + projectId: 'healthstack-eebd5', + storageBucket: 'healthstack-eebd5.appspot.com', + messagingSenderId: '221269896200', + appId: '1:221269896200:web:40601fae6525175180b5bd', + measurementId: 'G-PLGEN89WMG', +}; + +const app = initializeApp(firebaseConfig); + +export const firebase = getAuth(app); diff --git a/src/pages/auth/index.tsx b/src/pages/auth/index.tsx index f83782f6..b46a28fc 100644 --- a/src/pages/auth/index.tsx +++ b/src/pages/auth/index.tsx @@ -11,6 +11,12 @@ import PasswordInput from '../../components/inputs/basic/Password'; import Preloader from '../../components/utilities/Preloader'; import { UserContext } from '../../context/context'; import client from '../../context/feathers'; +import socialMediaAuth from '../../firebase-auth/auth/auth'; +import { + facebookProvider, + // githubProvider, + googleProvider, +} from '../../firebase-auth/config/authMethod'; function Login() { const navigate = useNavigate(); @@ -47,6 +53,11 @@ function Login() { }); }; + const handleSocialClick = async (provider) => { + alert('clicked'); + await socialMediaAuth(provider); + }; + return ( <> {loaderTimer ? ( @@ -74,14 +85,15 @@ function Login() {

or continue with

- + handleSocialClick(googleProvider)}> - + handleSocialClick(facebookProvider)}> + {/* */}