feat: Add github auth

Author: zouhir96

src/features/auth/api/Config.ts

@@ -1,5 +1,5 @@
 import { initializeApp } from 'firebase/app'
-import { getAuth, GoogleAuthProvider } from 'firebase/auth'
+import { getAuth, GithubAuthProvider, GoogleAuthProvider } from 'firebase/auth'
 
 // TODO This is a temporary firebase project config, to be changed later.
 const firebaseConfig = {
@@ -15,6 +15,7 @@ const firebaseConfig = {
 // Initialize Firebase
 const app = initializeApp(firebaseConfig)
 const auth = getAuth(app)
-const provider = new GoogleAuthProvider()
+const googleProvider = new GoogleAuthProvider()
+const githubProvider = new GithubAuthProvider()
 
-export { auth, provider }
+export { auth, githubProvider, googleProvider }

src/features/auth/components/AuthModal.tsx

@@ -1,8 +1,8 @@
-import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
+import { GithubAuthProvider, 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'
+import { auth, githubProvider, googleProvider } from '../api/Config'
 
 type AuthModalProps = {
   showAuth: boolean
@@ -11,7 +11,7 @@ type AuthModalProps = {
 
 export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
   const signInWithGoogle = () => {
-    signInWithPopup(auth, provider)
+    signInWithPopup(auth, googleProvider)
       .then((result) => {
         const credential = GoogleAuthProvider.credentialFromResult(result)
         // TODO save this token in user settings maybe!
@@ -24,6 +24,22 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
         toast("We couldn't login to you Google account!!", { theme: 'failure' })
       })
   }
+
+  const signInWithGithub = () => {
+    signInWithPopup(auth, githubProvider)
+      .then((result) => {
+        const credential = GithubAuthProvider.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 Github account!!", { theme: 'failure' })
+      })
+  }
+
   return (
     <ReactModal
       isOpen={showAuth}
@@ -50,12 +66,11 @@ export const AuthModal = ({ showAuth, setShowAuth }: AuthModalProps) => {
           </p>
         </div>
         <div>
-          <button type="button" className="extraTextWithIconBtn">
+          <button className="extraTextWithIconBtn" onClick={signInWithGithub}>
             <FaGithub />
             Sign in with Github
           </button>
           <button
-            type="button"
             className="extraTextWithIconBtn"
             style={{ marginLeft: 10 }}
             onClick={signInWithGoogle}>