switch to firebase login

defreeze · Jan 8, 2024 · c896ec7 · c896ec7
1 parent ce08c11
commit c896ec7
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 71 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.1bbc7da2.css",
-    "main.js": "/static/js/main.a0f9213f.js",
+    "main.js": "/static/js/main.c804572d.js",
     "static/js/787.7a370507.chunk.js": "/static/js/787.7a370507.chunk.js",
     "index.html": "/index.html",
     "main.1bbc7da2.css.map": "/static/css/main.1bbc7da2.css.map",
-    "main.a0f9213f.js.map": "/static/js/main.a0f9213f.js.map",
+    "main.c804572d.js.map": "/static/js/main.c804572d.js.map",
     "787.7a370507.chunk.js.map": "/static/js/787.7a370507.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.1bbc7da2.css",
-    "static/js/main.a0f9213f.js"
+    "static/js/main.c804572d.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/star92.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/star.png"/><link rel="manifest" href="/manifest.json"/><title>Divination by AI</title><script defer="defer" src="/static/js/main.a0f9213f.js"></script><link href="/static/css/main.1bbc7da2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/star92.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/star.png"/><link rel="manifest" href="/manifest.json"/><title>Divination by AI</title><script defer="defer" src="/static/js/main.c804572d.js"></script><link href="/static/css/main.1bbc7da2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/static/js/main.a0f9213f.js b/build/static/js/main.a0f9213f.js
diff --git a/build/static/js/main.a0f9213f.js.map b/build/static/js/main.a0f9213f.js.map
diff --git a/build/static/js/main.c804572d.js b/build/static/js/main.c804572d.js
diff --git a/build/static/js/main.a0f9213f.js.LICENSE.txt → build/static/js/main.c804572d.js.LICENSE.txt b/build/static/js/main.a0f9213f.js.LICENSE.txt → build/static/js/main.c804572d.js.LICENSE.txt
@@ -49,6 +49,23 @@
  * limitations under the License.
  */
 
+/**
+ * @license
+ * Copyright 2020 Google LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -83,6 +100,23 @@
  * limitations under the License.
  */
 
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /**
  * @license React
  * react-dom.production.min.js

diff --git a/build/static/js/main.c804572d.js.map b/build/static/js/main.c804572d.js.map
diff --git a/src/App.js b/src/App.js
@@ -4,18 +4,21 @@ import Tarotgen from './components/tarotreading';
 import { preloadImages } from './preloadImages';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import AboutPage from './aboutPage';
-import { googleLogout, useGoogleLogin } from '@react-oauth/google';
-import axios from 'axios';
-import app from './firebaseConfig';
+import './firebaseConfig';
+import { getAuth, signInWithPopup, GoogleAuthProvider, signOut } from 'firebase/auth';
 
 
 function App() {
   const [loading, setLoading] = useState(false);
   const [choice, setChoice] = useState("");
-
   const [showPasswordPage, setShowPasswordPage] = useState(false);
-  const [user, setUser] = useState([]);
+  //const [user, setUser] = useState([]);
   const [profile, setProfile] = useState(null);
+
+  //firebase
+  const auth = getAuth();
+  const googleProvider = new GoogleAuthProvider();
+
   useEffect(() => {
     // Retrieve profile from localStorage
     const storedProfile = localStorage.getItem('profile');
@@ -24,69 +27,48 @@ function App() {
     }
   }, []);
 
-  const login = useGoogleLogin({
-    onSuccess: (codeResponse) => {
-      //console.log('Login Success:', codeResponse);
-      setUser(codeResponse);
-      // Fetch additional profile information
-      fetchProfileInfo(codeResponse.access_token);
-    },
-    onError: (error) => console.log('Login Failed:', error)
-  });
-
-
-  const fetchProfileInfo = (accessToken) => {
-    //console.log('Using access token for profile info:', accessToken); // Log the token
-    axios.get('https://www.googleapis.com/oauth2/v1/userinfo', {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        Accept: 'application/json'
-      }
-    })
-      .then((res) => {
-        setProfile(res.data);
-        localStorage.setItem('profile', JSON.stringify(res.data));
-      })
-      .catch((err) => {
-        console.log('Error fetching profile info:', err);
-        console.log('Error details:', err.response); // Log detailed error
+  const login = () => {
+    signInWithPopup(auth, googleProvider)
+      .then((result) => {
+        // The signed-in user info.
+        const user = result.user;
+        setProfile(user); // Set user profile
+        localStorage.setItem('profile', JSON.stringify(user)); // Store in localStorage
+      }).catch((error) => {
+        console.error('Login Failed:', error);
       });
   };
 
-
-
   const logOut = () => {
-    googleLogout();
-    setProfile(null);
-    setShowPasswordPage(false);
-    localStorage.removeItem('profile');
-    // Additional logout logic...
+    signOut(auth)
+      .then(() => {
+        setProfile(null);
+        localStorage.removeItem('profile');
+      })
+      .catch((error) => {
+        console.error('Logout Failed:', error);
+      });
   };
 
-  useEffect(
-    () => {
-      if (user && user.access_token) {
-        axios
-          .get('https://www.googleapis.com/oauth2/v1/userinfo', {
-            headers: {
-              Authorization: `Bearer ${user.access_token}`,
-              Accept: 'application/json'
-            }
-          })
-          .then((res) => {
-            setProfile(res.data);
-          })
-          .catch((err) => console.log(err));
-      }
-    },
-    [user]
-  );
-
-
   useEffect(() => {
     preloadImages();
   }, []);
 
+
+  useEffect(() => {
+    const unsubscribe = auth.onAuthStateChanged(user => {
+      if (user) {
+        setProfile(user);
+        localStorage.setItem('profile', JSON.stringify(user));
+      } else {
+        setProfile(null);
+        localStorage.removeItem('profile');
+      }
+    });
+
+    return () => unsubscribe(); // Cleanup subscription on unmount
+  }, [auth]);
+
   return (
     <Router>
       <div className="App">
@@ -138,13 +120,13 @@ function App() {
                   {profile ? (
                     <>
                       {/*<span className="profile-name">welcome {profile.name}! </span> */}
-                      <button className="header-button-google" onClick={() => logOut()}>
+                      <button className="header-button-google" onClick={logOut}>
                         <img src="web_neutral_sq_na@1x.png" alt="Google" className="google-logo" />
                         Sign out
                       </button>
                     </>
                   ) : (
-                    <button className="header-button-google" onClick={() => login()}>
+                    <button className="header-button-google" onClick={login}>
                       <img src="web_neutral_sq_na@1x.png" alt="Google" className="google-logo" />
                       Sign in
                     </button>)}

diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js
@@ -1,8 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
+import { getAuth } from "firebase/auth"; // Import for Firebase Authentication
 
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
@@ -18,4 +17,9 @@ const firebaseConfig = {
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
-const analytics = getAnalytics(app);
+const analytics = getAnalytics(app);
+
+// Initialize Firebase Authentication and export it
+const auth = getAuth(app);
+export { auth, app, analytics };
+