chore: Add Firebase authentication

package.json

@@ -19,6 +19,8 @@
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "firebase": "^10.12.2",
+    "firebaseui": "^6.1.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^6.1.10"

src/App.tsx

@@ -1,5 +1,23 @@
 import Game from './Game';
+import { useEffect } from 'react';
+import { getAuth, onAuthStateChanged } from 'firebase/auth';
 
 export default function App() {
+  const auth = getAuth();
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      if (user) {
+        // User is signed in
+        console.log('User is signed in:', user);
+      } else {
+        // User is signed out
+        console.log('User is signed out');
+      }
+    });
+
+    return () => unsubscribe(); // Clean up the listener
+  }, []);
+
   return <Game />;
 }

src/Game/Account.css

@@ -0,0 +1,7 @@
+#account {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}

src/Game/Account.jsx

@@ -0,0 +1,63 @@
+import 'react'
+import './Account.css'
+
+// https://firebase.google.com/docs/auth/web/anonymous-auth?hl=en&authuser=0
+
+import { getAuth, signInAnonymously } from "firebase/auth";
+
+const auth = getAuth();
+
+const firebaseConfig = {
+    apiKey: "AIzaSyD1-5s4lK7YyY5tW1oTg4F5xq4Cf1X8iM4",
+    authDomain: "mygame-9f4b0.firebaseapp.com",
+    projectId: "mygame-9f4b0",
+    storageBucket: "mygame-9f4b0.appspot.com",
+    messagingSenderId: "554878081473",
+    appId: "1:554878081473:web:9f0d9a1e0d3f7d5f3a1b9e"
+};
+
+firebase.initializeApp(firebaseConfig);
+
+const auth = firebase.auth();
+// const db = firebase.firestore();
+
+function signIn(email, password) {
+    auth.signInWithEmailAndPassword(email, password)
+        .then((userCredential) => {
+            // Signed in
+            var user = userCredential.user;
+            // ...
+        })
+        .catch((error) => {
+            var errorCode = error.code;
+            var errorMessage = error.message;
+        });
+}
+
+function signUp(email, password) {
+    auth.createUserWithEmailAndPassword(email, password)
+        .then((userCredential) => {
+            // Signed in
+            var user = userCredential.user;
+            // ...
+        })
+        .catch((error) => {
+            var errorCode = error.code;
+            var errorMessage = error.message;
+            // ..
+        });
+}
+
+// auth.signOut()
+
+// auth.sendPasswordResetEmail(email)
+
+
+export default function Account() {
+    return <div id="account">
+        <h3>Account</h3>
+        <a onClick={signIn}>Sign In</a>
+        <a>Sign Up</a>
+
+    </div>
+}

src/Game/Toolbar.jsx

@@ -0,0 +1,23 @@
+import { useCallback, useState } from 'react'
+import './Toolbar.css'
+import Login from './Login'
+export default function Toolbar() {
+    const [showLogin, setLogin] = useState(false)
+    const [showChat, setChat] = useState(false)
+    const toggleFullscreen = useCallback(() => {
+        if (document.fullscreenElement) 
+            document.exitFullscreen()
+        else
+            document.documentElement.requestFullscreen()
+    }, [])
+
+    const toggleChat = useCallback(() => { setChat( previous => !previous)   }, [])
+    const toggleLogin = useCallback(() => { setLogin( previous => !previous)   }, [])
+    return <div id="toolbar">
+        {document.fullscreenEnabled ? <a onClick={toggleFullscreen}>&#x26F6;</a> : null}
+        <a onClick={toggleChat}>&#128488;</a>
+        {showChat && <Chat />}
+        <a onClick={toggleLogin}>&#127757;</a>
+        {showLogin && <Login />}
+    </div>
+}

src/Login.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+// import firebase from 'firebase/compat/app';
+import {getAuth} from 'firebase/auth';
+import * as firebaseui from 'firebaseui'
+import 'firebaseui/dist/firebaseui.css';
+
+const Login = () => {
+    // Initialize FirebaseUI
+    useEffect(() => {
+        const uiConfig = {
+            signInSuccessUrl: '/', // Redirect after successful login
+            signInOptions: [
+                // firebase.auth.EmailAuthProvider.PROVIDER_ID,
+                // firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+                firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
+            ],
+        };
+        // Initialize the FirebaseUI Widget using Firebase.
+        var ui = new firebaseui.auth.AuthUI(getAuth());
+        // The start method will wait until the DOM is loaded.
+        ui.start('#firebaseui-auth-container', uiConfig);
+    }, []);
+
+    return <div id="firebaseui-auth-container"></div>
+};
+
+export default Login;

src/firebaseConfig.ts

@@ -0,0 +1,15 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+
+const firebaseConfig = {
+    apiKey: "YOUR_API_KEY",
+    authDomain: "YOUR_AUTH_DOMAIN",
+    projectId: "YOUR_PROJECT_ID",
+    storageBucket: "YOUR_STORAGE_BUCKET",
+    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+    appId: "YOUR_APP_ID",
+    measurementId: "YOUR_MEASUREMENT_ID"
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);