Replace github login with google login:

- Reason: FIREBASE ISSUE: firebase/firebase-js-sdk#4256
- Add google icon
- Handle navigator exception

Author: wajeshubham

components/SigninButton.tsx

@@ -1,16 +1,18 @@
 import { useAuth } from "@/context/AuthContext";
 import React from "react";
 import Button from "./form/Button";
-import GithubIcon from "./icons/GithubIcon";
+import GoogleIcon from "./icons/GoogleIcon";
 
 const SigninButton = () => {
-  const { loginWithGithub } = useAuth();
+  const { loginWithGoogle } = useAuth();
 
   return (
-    <Button data-testid="signin-btn" onClick={loginWithGithub}>
-      <GithubIcon className="inline-flex mr-1" />
-      Signin
-    </Button>
+    <>
+      <Button data-testid="signin-btn" onClick={loginWithGoogle}>
+        <GoogleIcon className="inline-flex mr-2" />
+        Signin
+      </Button>
+    </>
   );
 };
 

components/editor/SnippngControlHeader.tsx

@@ -136,8 +136,12 @@ const SnippngControlHeader = () => {
         </ColorPicker>
         <Button
           onClick={() => {
-            if (!navigator) return;
-            navigator.clipboard.writeText(code).then(() => {
+            if (!navigator?.clipboard)
+              return addToast({
+                message: "navigator unavailable",
+                type: "error",
+              });
+            navigator.clipboard?.writeText(code).then(() => {
               addToast({
                 message: "Code snippet copied!",
               });

components/icons/GoogleIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+const GoogleIcon: React.FC<React.SVGAttributes<SVGSVGElement>> = ({
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={18}
+      height={18}
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 262"
+      {...props}
+    >
+      <path
+        fill="#4285F4"
+        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.204 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+      />
+      <path
+        fill="#34A853"
+        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+      />
+      <path
+        fill="#FBBC05"
+        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+      />
+      <path
+        fill="#EB4335"
+        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+      />
+    </svg>
+  );
+};
+
+export default GoogleIcon;

context/AuthContext.tsx

@@ -3,21 +3,34 @@ import { onAuthStateChanged } from "firebase/auth";
 import {
   User,
   GithubAuthProvider,
+  GoogleAuthProvider,
   signInWithPopup,
   signOut,
 } from "firebase/auth";
 import { auth } from "@/config/firebase";
 import { useToast } from "./ToastContext";
 
-const provider = new GithubAuthProvider();
+const GithubProvider = new GithubAuthProvider();
+const GoogleProvider = new GoogleAuthProvider();
 
 const AuthContext = createContext<{
   user: User | null;
+  /**
+   * Using mobile browsers in NON-incognito mode with **github authentication** results in the `missing initial state` error.
+   *
+   * This issue is still unresolved from the firebase side.
+   *
+   * FIREBASE ISSUE: https://github.com/firebase/firebase-js-sdk/issues/4256
+   *
+   * @deprecated
+   */
   loginWithGithub: () => Promise<void>;
+  loginWithGoogle: () => Promise<void>;
   logout: () => Promise<void>;
 }>({
   user: null,
   loginWithGithub: async () => {},
+  loginWithGoogle: async () => {},
   logout: async () => {},
 });
 
@@ -29,10 +42,32 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   const { addToast } = useToast();
   const [user, setUser] = useState<User | null>(null);
 
+  /**
+   * Using mobile browsers in NON-incognito mode with **github authentication** results in the `missing initial state` error.
+   *
+   * This issue is still unresolved from the firebase side.
+   *
+   * FIREBASE ISSUE: https://github.com/firebase/firebase-js-sdk/issues/4256
+   *
+   * @deprecated
+   */
   const loginWithGithub = async () => {
     if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
     try {
-      await signInWithPopup(auth, provider);
+      await signInWithPopup(auth, GithubProvider);
+      addToast({
+        message: "Signed in successfully",
+        description: "Hey there!",
+      });
+    } catch (error) {
+      console.log("Error while logging in", error);
+    }
+  };
+
+  const loginWithGoogle = async () => {
+    if (!auth) return console.log(Error("Firebase is not configured")); // This is to handle error when there is no `.env` file. So, that app doesn't crash while developing without `.env` file.
+    try {
+      await signInWithPopup(auth, GoogleProvider);
       addToast({
         message: "Signed in successfully",
         description: "Hey there!",
@@ -62,7 +97,9 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
   }, []);
 
   return (
-    <AuthContext.Provider value={{ user, loginWithGithub, logout }}>
+    <AuthContext.Provider
+      value={{ user, loginWithGithub, loginWithGoogle, logout }}
+    >
       {children}
     </AuthContext.Provider>
   );

pages/profile.tsx

@@ -177,9 +177,14 @@ const UserProfile = () => {
                                             className="md:w-[unset] w-full"
                                             StartIcon={LinkIcon}
                                             onClick={() => {
-                                              if (!navigator) return;
+                                              if (!navigator?.clipboard)
+                                                return addToast({
+                                                  message:
+                                                    "navigator unavailable",
+                                                  type: "error",
+                                                });
                                               navigator.clipboard
-                                                .writeText(
+                                                ?.writeText(
                                                   `${window.location.host}/snippet/${snippet.uid}`
                                                 )
                                                 .then(() => {