feat: Add google auth.

Author: zouhir96

package.json

@@ -13,6 +13,7 @@
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
     "dompurify": "^2.2.7",
+    "firebase": "^11.2.0",
     "htmlparser2": "^8.0.1",
     "jsonpath": "^1.1.1",
     "normalize.css": "^8.0.1",

src/features/auth/api/Config.ts

@@ -0,0 +1,20 @@
+import { initializeApp } from 'firebase/app'
+import { getAuth, GoogleAuthProvider } from 'firebase/auth'
+
+// TODO This is a temporary firebase project config, to be changed later.
+const firebaseConfig = {
+  apiKey: 'AIzaSyCpD2SbQnCCDjmAPasQ8q5jPcxf5lQLwYI',
+  authDomain: 'hackertab-418813.firebaseapp.com',
+  projectId: 'hackertab-418813',
+  storageBucket: 'hackertab-418813.firebasestorage.app',
+  messagingSenderId: '249160525821',
+  appId: '1:249160525821:web:e729de3eadc14d2242db94',
+  measurementId: 'G-NTMXFLMF00',
+}
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig)
+const auth = getAuth(app)
+const provider = new GoogleAuthProvider()
+
+export { auth, provider }

src/features/auth/components/AuthModal.tsx

@@ -1,12 +1,29 @@
+import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
 import { FaGithub, FaGoogle } from 'react-icons/fa'
 import ReactModal from 'react-modal'
+import toast from 'react-simple-toasts'
+import { auth, provider } from '../api/Config'
 
 type AuthModalProps = {
   showAuth: boolean
   setShowAuth: (show: boolean) => void
 }
 
 export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
+  const signInWithGoogle = () => {
+    signInWithPopup(auth, provider)
+      .then((result) => {
+        const credential = GoogleAuthProvider.credentialFromResult(result)
+        // TODO save this token in user settings maybe!
+        const token = credential.accessToken
+        // The signed-in user info.
+        const user = result.user
+        console.log(user)
+      })
+      .catch((error) => {
+        toast("We couldn't login to you Google account!!", { theme: 'failure' })
+      })
+  }
   return (
     <ReactModal
       isOpen={showAuth}
@@ -37,7 +54,11 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
             <FaGithub />
             Sign in with Github
           </button>
-          <button type="button" className="extraTextWithIconBtn" style={{ marginLeft: 10 }}>
+          <button
+            type="button"
+            className="extraTextWithIconBtn"
+            style={{ marginLeft: 10 }}
+            onClick={signInWithGoogle}>
             <FaGoogle />
             Sign in with Google
           </button>