social login

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",

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';

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;

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;

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();

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);

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() {
 
           <div className="bottom-center">
             <p>or continue with</p>
-            <a href="">
+            <a href="" onClick={() => handleSocialClick(googleProvider)}>
               <i className="bi bi-google" />
             </a>
-            <a href="">
+            <a href="" onClick={() => handleSocialClick(facebookProvider)}>
               <i className="bi bi-facebook" />
             </a>
             <a href="">
               <i className="bi bi-linkedin" />
+              {/* <i className="fa-brands fa-github"></i> */}
             </a>
 
             <p>