Added Google SignIn

Author: Anikesh02

.eslintrc.json

@@ -13,7 +13,8 @@
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "indent": ["error", 2],
-    "linebreak-style": ["error", "unix"],
+    // "linebreak-style": ["error", "unix"],
+    "linebreak-style": 0,
     "quotes": ["error", "double"],
     "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
     "import/order": ["error", { "groups": [["builtin", "external", "internal"]] }],
@@ -33,6 +34,7 @@
     "browser": true,
     "node": true
   },
+  
   "settings": {
     "react": {
       "version": "detect"

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "githubPullRequests.ignoredPullRequestBranches": [
         "main"
+    ],
+    "cSpell.words": [
+        "linebreak"
     ]
 }

package-lock.json

@@ -10,6 +10,7 @@
     "@mui/material": "^6.1.1",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@snaddyvitch-dispenser/react-router-sitemap": "^1.2.6",
+    "firebase": "^10.14.0",
     "monaco-themes": "^0.4.4",
     "notistack": "^3.0.1",
     "react": "^18.3.1",

package.json

@@ -5,19 +5,22 @@ import CssBaseline from "@mui/material/CssBaseline";
 import EditorComponent from "./pages/EditorComponent";
 import theme from "./theme";
 import SnackbarProvider from "./components/js/SnackbarProvider";
+import { AuthProvider } from "./context/AuthContext";
 function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <SnackbarProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<EditorComponent />} />
-            <Route path="/editor" element={<EditorComponent />} />
-          </Routes>
-        </BrowserRouter>
-      </SnackbarProvider>
-    </ThemeProvider>
+    <AuthProvider>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <SnackbarProvider>
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<EditorComponent/>} />
+              <Route path="/editor" element={<EditorComponent />} />
+            </Routes>
+          </BrowserRouter>
+        </SnackbarProvider>
+      </ThemeProvider>
+    </AuthProvider>
   );
 }
 

src/App.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import "../components/css/GoogleSignIn.css";
+import { useAuth } from "../context/AuthContext.js";
+
+const GoogleSignIn = () => {
+  const { currentUser, googleSignIn } = 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 googleSignIn();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return loading ? null : (
+    <button onClick={handleSignIn} className="sign-in-button">
+      <img
+        className="google-logo"
+        src="https://www.svgrepo.com/show/475656/google-color.svg"
+        loading="lazy"
+        alt="google logo"
+      />
+      <span>Login with Google</span>
+    </button>
+
+  );
+};
+
+export default GoogleSignIn;

src/components/GoogleSignIn.js

@@ -1,4 +1,3 @@
-/* EditorComponent.css */
 
 .editor-container {
   display: flex;
@@ -32,3 +31,68 @@
     height: 70vh;
   }
 }
+
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.space-x-2 > *:not(:last-child) {
+  margin-right: 8px;
+}
+
+.welcome-text {
+  color: #000;
+  font-weight: bold;
+}
+
+.signout-container {
+  display: flex;
+  align-items: center;
+  border: 1px solid #D1D1D1; /* border-gray-300 */
+  border-radius: 4px;
+  padding: 4px 8px;
+  background-color: #fff;
+  transition: background-color 0.25s;
+}
+
+.signout-container:hover {
+  background-color: #fff;
+  
+  transition: 0.5s all ease;
+}
+
+.signout-button {
+  font-weight: bold;
+  color: #4A4A4A; /* text-gray-700 */
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.signout-button span:hover {
+  color: #000; /* Black text */
+  
+}
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  .welcome-text {
+    color: #fff; /* text-white */
+  }
+
+  .signout-container {
+    background-color: #000; /* dark:bg-black */
+    color: #fff ;
+    border-color: #666; /* dark:border-gray-500 */
+  }
+
+  .signout-button span {
+    color: #fff; 
+  }
+}

src/components/css/EditorComponent.css

@@ -0,0 +1,40 @@
+.sign-in-button {
+    padding: 8px 16px; 
+    border: 1px solid #E2E8F0; 
+    display: flex;
+    align-items: center;
+    gap: 8px; 
+    border-radius: 8px; 
+    color: #334155;
+    background-color: #000;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out; 
+  }
+  
+  .sign-in-button:hover {
+    border-color: #CBD5E1; 
+    color: #1E293B; 
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
+  }
+  
+  .google-logo {
+    width: 24px;
+    height: 24px;
+  }
+  
+  .sign-in-button span {
+    color: inherit; 
+  }
+  
+  /* Dark mode styles */
+  @media (prefers-color-scheme: dark) {
+    .sign-in-button {
+      color: #fff; 
+    }
+  
+    .sign-in-button:hover {
+        background-color: #fff;
+      color: #000; 
+    }
+  }
+  

src/components/css/GoogleSignIn.css

@@ -0,0 +1,22 @@
+
+
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider, GithubAuthProvider, signInWithPopup } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_FIREBASE_APP_ID
+};
+
+
+const app = initializeApp(firebaseConfig);
+
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export { auth, GoogleAuthProvider, GithubAuthProvider, signInWithPopup, db };

src/components/firebase.js

@@ -0,0 +1,35 @@
+// src/context/AuthContext.js
+import React, { useContext, useState, useEffect } from "react";
+import { signOut, onAuthStateChanged } from "firebase/auth";
+import { GoogleAuthProvider, auth, signInWithPopup } from "../components/firebase";
+
+const AuthContext = React.createContext();
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
+
+export function AuthProvider({ children }) {
+  const [currentUser, setCurrentUser] = useState(null);
+
+  const googleSignIn = ()=>{
+    const provider = new GoogleAuthProvider();
+    signInWithPopup(auth, provider);
+  }
+  
+
+  function logOut() {
+    signOut(auth);
+  }
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setCurrentUser(user);
+    });
+
+    return () => unsubscribe();
+  }, [currentUser]);
+
+
+  return <AuthContext.Provider value={{ currentUser, googleSignIn, logOut }}>{children}</AuthContext.Provider>;
+}