Revert "implements new signin/up method that allows for longer sessions, and additionally allows email with link signin"

This reverts commit ffaeaffe20.

README.md

@@ -27,8 +27,8 @@ yarn lint
 2. login to your firebase account with `firebase login`
 3. make sure you have access to the project `firebase projects:list`
 4. build `yarn build` and check with `yarn preview`, once all is good release `firebase deploy --only hosting`
-<!-- 5. to update schedule functions `firebase deploy --only functions` currently these are disabled -->
+5. to update schedule functions `firebase deploy --only functions` currently these are disabled
-<!-- 6. if you add any library to a function, install it inside the `/functions` folder and not in the root folder -->
+6. if you add any library to a function, install it inside the `/functions` folder and not in the root folder
 <!-- 7. to update secrets use `firebase functions:secrets:set SECRET_NAME` more info [here](https://firebase.google.com/docs/functions/config-env?gen=2nd#managing_secrets) -->
    <!-- 1. `API_SERVICE_PASSWORD` for the auto-archiver-api -->
    <!-- 2. `GOOGLE_API_CLIENT_EMAIL` and `GOOGLE_API_PRIVATE_KEY` for the scheduled function to validate sheets exist -->

functions/README.md

@@ -1 +0,0 @@
-these are currently disabled.

package.json

@@ -12,7 +12,7 @@
     "@mdi/font": "^7.2.96",
     "core-js": "^3.8.3",
     "firebase": "^9.22.0",
-    "firebaseui": "^6.1.0",
+    "firebaseui": "^6.0.2",
     "gapi-script": "^1.2.0",
     "googleapis": "^134.0.0",
     "moment": "^2.30.1",

src/components/FirebaseLogin.vue

@@ -1,78 +0,0 @@
-<template>
-	<section id="firebaseui-auth-container"></section>
-</template>
-
-<script>
-import firebase from "firebase/compat/app";
-import * as firebaseui from "firebaseui";
-import "firebaseui/dist/firebaseui.css";
-import "firebase/compat/auth";
-import { firebaseConfig } from "@/firebase.js";
-
-export default {
-	name: "FirebaseLogin",
-	mounted() {
-		console.log(`user after mount`, this.$store.state.user);
-		firebase.initializeApp(firebaseConfig);
-
-
-		let uiConfig = {
-			signInFlow: 'popup',
-			signInSuccessUrl: "/",
-			signInOptions: [
-				{
-					provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-					scopes: [
-						"https://www.googleapis.com/auth/drive.file",
-						"https://www.googleapis.com/auth/userinfo.profile",
-						"https://www.googleapis.com/auth/userinfo.email",
-						"https://www.googleapis.com/auth/spreadsheets"
-
-					],
-					customParameters: { prompt: "select_account" },
-				},
-				{
-					provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
-					signInMethod:
-						firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
-				},
-			],
-			callbacks: {
-				signInSuccessWithAuthResult: function (authResult, redirectUrl) {
-					console.log("authResult", authResult);
-					console.log("redirectUrl", redirectUrl);
-					return true;
-				},
-			},
-		};
-
-		firebase.auth().onAuthStateChanged((user) => {
-			if (user) {
-				this.$store.commit("setLoadingUserState", true);
-				this.$store.commit("setUser", user);
-				user.getIdToken().then((token) => {
-					this.$store.commit("setAccessToken", token);
-					this.$store.dispatch("checkActiveUser");
-					this.$store.dispatch("checkUserPermissions");
-					this.$store.dispatch("checkUserUsage");
-				});
-			} else {
-				let ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());
-
-				firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(() => {
-					console.log("Auth persistence set to LOCAL");
-				});
-
-				ui.start("#firebaseui-auth-container", uiConfig);
-			}
-		});
-
-	},
-};
-</script>
-
-<style>
-#firebaseui-auth-container {
-	margin-top: 1em;
-}
-</style>

src/components/NavBar.vue

@@ -77,6 +77,8 @@
       >
     </span>
 
+    <v-btn v-if="!user" @click="$store.dispatch('signin')">Sign In</v-btn>
+
     <v-menu v-if="user?.active && smAndDown">
       <template v-slot:activator="{ props }">
         <v-app-bar-nav-icon v-bind="props"></v-app-bar-nav-icon>

src/components/WelcomeCard.vue

@@ -28,11 +28,27 @@
               You can always just run <a href="https://github.com/bellingcat/auto-archiver">Bellingcat's Auto Archiver</a>
               locally via the command line to achieve similar results.
             </p>
-            <FirebaseLogin v-if="!user" />
+            <div class="text-center">
-            <v-container v-if="loadingUserState" class="pane" style="text-align: center">
+              <v-btn
+                v-if="!user && !loadingUserState"
+                @click="$store.dispatch('signin')"
+                size="large"
+                >Sign In</v-btn
+              >
+            </div>
+            <v-container
+              v-if="loadingUserState"
+              class="pane"
+              style="text-align: center"
+            >
               <v-row justify="center">
                 <v-col cols="12">
-                  <v-progress-circular color="teal" indeterminate :size="82" :width="7"></v-progress-circular>
+                  <v-progress-circular
+                    color="teal"
+                    indeterminate
+                    :size="82"
+                    :width="7"
+                  ></v-progress-circular>
                 </v-col>
                 <v-col cols="12">
                   <h4>loading...</h4>
@@ -47,12 +63,8 @@
 </template>
 
 <script>
-import FirebaseLogin from "@/components/FirebaseLogin.vue";
 export default {
   name: "WelcomeCard",
-  components: {
-    FirebaseLogin,
-  },
   props: {},
   computed: {
     user() {

src/firebase.js

@@ -17,4 +17,4 @@ const firebaseAuth = getAuth(firebaseApp);
 
 const firebaseFirestore = getFirestore(firebaseApp);
 
-export { firebaseApp, firebaseAuth, firebaseFirestore, firebaseConfig };
+export { firebaseApp, firebaseAuth, firebaseFirestore };

src/gapi.js

@@ -1,4 +1,6 @@
 import { gapi } from "gapi-script";
+// import { GoogleAuthProvider, signInWithCredential } from "firebase/auth";
+// import { firebaseAuth } from "@/firebase.js";
 
 gapi.load("client:auth2", async () => {
   gapi.client.init({

src/store/index.js

@@ -1,8 +1,29 @@
 import { createStore } from "vuex";
 import { gapi } from "@/gapi";
-import { signOut } from "firebase/auth";
+import {
+  signOut,
+  GoogleAuthProvider,
+  signInWithCredential,
+  browserLocalPersistence,
+  setPersistence,
+} from "firebase/auth";
 import { firebaseAuth } from "@/firebase.js";
 
+function saveToLocalStorage(state) {
+  localStorage.setItem("user", JSON.stringify(state.user));
+  localStorage.setItem("access_token", state.access_token);
+}
+
+function loadFromLocalStorage() {
+  const user = JSON.parse(localStorage.getItem("user"));
+  const access_token = localStorage.getItem("access_token");
+  return { user, access_token };
+}
+
+function clearLocalStorage() {
+  localStorage.removeItem("user");
+  localStorage.removeItem("access_token");
+}
 
 async function waitForGapiAuth2() {
   return new Promise((resolve, _reject) => {
@@ -31,9 +52,11 @@ export default createStore({
   mutations: {
     setUser(state, user) {
       state.user = user;
+      saveToLocalStorage(state);
     },
     setUserActiveState(state, active) {
       state.user.active = active;
+      saveToLocalStorage(state);
     },
     setUserPermissions(state, permissions) {
       state.user.permissions = permissions;
@@ -41,6 +64,7 @@ export default createStore({
         (key) => key !== "all"
       );
       state.loadingUserState = false;
+      saveToLocalStorage(state);
     },
     setUserUsage(state, usage) {
       state.user.usage = usage;
@@ -50,15 +74,49 @@ export default createStore({
     },
     setLoadingUserState(state, loadingUserState) {
       state.loadingUserState = loadingUserState;
+      saveToLocalStorage(state);
     },
     setAccessToken(state, access_token) {
       state.access_token = access_token;
+      saveToLocalStorage(state);
     },
     setErrorMessage(state, errorMessage) {
       state.errorMessage = errorMessage;
     },
   },
   actions: {
+    async signin({ commit, dispatch }) {
+      commit("setLoadingUserState", true);
+      async function callback(tokenResponse) {
+        let access_token = tokenResponse.access_token;
+        commit("setAccessToken", access_token);
+        const credential = GoogleAuthProvider.credential(null, access_token);
+
+        // Set persistence before signing in
+        await setPersistence(firebaseAuth, browserLocalPersistence);
+
+        // Sign in with the provided credential
+        const response = await signInWithCredential(firebaseAuth, credential);
+
+        commit("setUser", response.user);
+        dispatch("checkActiveUser");
+        dispatch("checkUserPermissions");
+        dispatch("checkUserUsage");
+      }
+
+      commit("setUser", null);
+
+      const client = google.accounts.oauth2.initTokenClient({
+        client_id:
+          "406209235111-r1mpkvkfaqc2jg5iqbvffl2b0rf4clbo.apps.googleusercontent.com",
+        scope:
+          "https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
+        callback,
+      });
+
+      await client.requestAccessToken();
+    },
+
     async signout({ commit }) {
       try {
         const authInstance = await waitForGapiAuth2();
@@ -75,6 +133,7 @@ export default createStore({
         // clean user from store and local storage
         commit("setUser", null);
         commit("setSheets", []);
+        clearLocalStorage();
       } catch (error) {
         console.error("signOutUser (firebase/auth.js): ", error);
       } finally {
@@ -171,7 +230,6 @@ export default createStore({
         console.error("getSheets (firebase.js): ", error);
       }
     },
-
     async createSheet(
       { _state, dispatch, _commit },
       { name, service_account_email }
@@ -337,5 +395,33 @@ export default createStore({
   },
   modules: {},
   plugins: [
+    (store) => {
+      store.subscribe((mutation, state) => {
+        if (mutation.type === "setUser" || mutation.type === "setAccessToken") {
+          saveToLocalStorage(state);
+        }
+      });
+
+      const { user, access_token } = loadFromLocalStorage();
+      if (user && access_token) {
+        store.commit("setLoadingUserState", true);
+        store.commit("setUser", user);
+        store.commit("setAccessToken", access_token);
+        store.getters.isTokenExpired
+          .then((expired) => {
+            if (expired) {
+              store.dispatch("signout");
+            } else {
+              store.dispatch("checkActiveUser");
+              store.dispatch("checkUserPermissions");
+              store.dispatch("checkUserUsage");
+            }
+          })
+          .catch((error) => {
+            console.error("Error checking token expiration:", error);
+            store.dispatch("signout");
+          });
+      }
+    },
   ],
 });

yarn.lock

@@ -4268,9 +4268,9 @@ firebase@^9.22.0:
     "@firebase/storage-compat" "0.3.2"
     "@firebase/util" "1.9.3"
 
-firebaseui@^6.1.0:
+firebaseui@^6.0.2:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/firebaseui/-/firebaseui-6.1.0.tgz#a8feb91d2781342599cb8d2c79cc7553e6257612"
+  resolved "https://registry.npmjs.org/firebaseui/-/firebaseui-6.1.0.tgz"
   integrity sha512-5WiVYVxPGMANuZKxg6KLyU1tyqIsbqf/59Zm4HrdFYwPtM5lxxB0THvgaIk4ix+hCgF0qmY89sKiktcifKzGIA==
   dependencies:
     dialog-polyfill "^0.4.7"