resolved_merge_conflicts

Author: TheAdich

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);
@@ -32,5 +36,6 @@ export function AuthProvider({ children }) {
   }, [currentUser]);
 
 
-  return <AuthContext.Provider value={{ currentUser, setCurrentUser, googleSignIn, logOut }}>{children}</AuthContext.Provider>;
+ 
+  return <AuthContext.Provider value={{ currentUser, googleSignIn, githubSignIn, logOut }}>{children}</AuthContext.Provider>;
 }

src/pages/Landingpage.jsx

@@ -5,6 +5,7 @@ import { useContext } from "react";
 import { SocketContext } from "../context/socket";
 import Header from "../components/Header"
 import GoogleSignIn from "../components/GoogleSignIn";
+import GithubSignIn from "../components/GithubSignIn";
 import { useAuth } from "../context/AuthContext";
 
 const CreatePopUp = ({ setTogglePopUp, setRooms, rooms }) => {
@@ -81,6 +82,8 @@ function Landingpage() {
         >
             <h2>Please sign in to use the Code Editor</h2>
             <GoogleSignIn />
+            <br/>
+            <GithubSignIn/>
         </div>
     );