Added Github SignIn

Author: Anikesh02

src/components/GithubSignIn.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import "../components/css/GithubSignIn.css";
+import { useAuth } from "../context/AuthContext.js";
+
+const GithubSignIn = () => {
+  const { currentUser, githubSignIn } = useAuth();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkAuthentication = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      setLoading(false);
+    };
+    checkAuthentication();
+  }, [currentUser]);
+
+  const handleSignIn = async () => {
+    try {
+      await githubSignIn();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return loading ? null : (
+    <button onClick={handleSignIn} className="github-sign-in-button">
+      <img
+        className="github-logo"
+        src="https://www.svgrepo.com/show/452211/github.svg"
+        loading="lazy"
+        alt="github logo"
+      />
+      <span>Login with Github</span>
+    </button>
+  );
+};
+
+export default GithubSignIn;

src/components/css/GithubSignIn.css

@@ -0,0 +1,34 @@
+.github-sign-in-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  color: #334155;
+  background-color: black;
+  transition: all 150ms ease-in-out;
+  cursor: pointer;
+}
+
+.github-sign-in-button:hover {
+  border-color: #94a3b8;
+  color: #0f172a;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+}
+
+.github-logo {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  .github-sign-in-button {
+    color: #ffffff;
+  }
+
+  .github-sign-in-button:hover {
+    color: #f1f5f9;
+  }
+}

src/context/AuthContext.js

@@ -1,7 +1,7 @@
 // src/context/AuthContext.js
-import React, { useContext, useState, useEffect } from "react";
-import { signOut, onAuthStateChanged } from "firebase/auth";
-import { GoogleAuthProvider, auth, signInWithPopup } from "../components/firebase";
+import { onAuthStateChanged, signOut } from "firebase/auth";
+import React, { useContext, useEffect, useState } from "react";
+import { GithubAuthProvider, GoogleAuthProvider, auth, signInWithPopup } from "../components/firebase";
 
 const AuthContext = React.createContext();
 
@@ -17,6 +17,10 @@ export function AuthProvider({ children }) {
     signInWithPopup(auth, provider);
   }
 
+  const githubSignIn = ()=>{
+    const provider = new GithubAuthProvider();
+    signInWithPopup(auth, provider);
+  }
 
   function logOut() {
     signOut(auth);
@@ -31,5 +35,5 @@ export function AuthProvider({ children }) {
   }, [currentUser]);
 
 
-  return <AuthContext.Provider value={{ currentUser, googleSignIn, logOut }}>{children}</AuthContext.Provider>;
+  return <AuthContext.Provider value={{ currentUser, googleSignIn, githubSignIn, logOut }}>{children}</AuthContext.Provider>;
 }

src/pages/EditorComponent.js

@@ -6,6 +6,8 @@ import Box from "@mui/material/Box";
 import { useSnackbar } from "notistack";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { FaPlay } from "react-icons/fa";
+import GithubSignIn from "../components/GithubSignIn";
+import GoogleSignIn from "../components/GoogleSignIn";
 import "../components/css/EditorComponent.css";
 import EditorThemeSelect from "../components/js/EditorThemeSelect";
 import LanguageSelect from "../components/js/LanguageSelect";
@@ -19,7 +21,6 @@ import {
   rapidApiHost,
   rapidApiKey,
 } from "../constants/constants";
-import GoogleSignIn from "../components/GoogleSignIn";
 import { useAuth } from "../context/AuthContext";
 
 const StyledButton = styled(Button)({
@@ -56,6 +57,7 @@ const OutputLayout = styled("div")(({ theme }) => ({
 function EditorComponent() {
   const [code, setCode] = useState(null);
   const [output, setOutput] = useState([]);
+  
   const [currentLanguage, setCurrentLanguage] = useState(
     LANGUAGES[0].DEFAULT_LANGUAGE
   );
@@ -287,6 +289,8 @@ function EditorComponent() {
     }}>
       <h2>Please sign in to use the Code Editor</h2>
       <GoogleSignIn />
+      <br/>
+      <GithubSignIn/>
     </div>
   );
 
@@ -343,7 +347,10 @@ function EditorComponent() {
                   </div>
                 </>
               ) : (
+                <>
                 <GoogleSignIn />
+                <GithubSignIn/>
+                </>
               )}
             </div>
             <ToggleTheme />