Replaced sign in with popup to sign in with redirect

src/components/LoginButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="socialLogin()" class="button_style">
+  <button @click="signInWithGoogle()" class="button_style">
     <img alt="Google Logo" src="../assets/google-logo.svg" />
     <span>
       Logg inn med Google
@@ -9,62 +9,13 @@
 
 <script>
 import firebase from "firebase";
-import fb from "@/firebaseConfig.js";
 
 export default {
   name: "LoginButton",
   methods: {
-    socialLogin() {
+    signInWithGoogle() {
       const provider = new firebase.auth.GoogleAuthProvider();
-      firebase
-        .auth()
-        .signInWithPopup(provider)
-        .then(() => {
-          const { currentUser } = firebase.auth();
-          fb.additionalUserInfoCollection
-            .doc(currentUser.uid)
-            .get()
-            .then(userInfo => {
-              if (userInfo.data() && userInfo.data().phoneNumber) {
-                this.$store.dispatch("SET_CURRENT_USER", {
-                  ...currentUser,
-                  ...userInfo.data()
-                });
-                this.$router.replace("home");
-              } else {
-                this.$dialog
-                  .prompt({
-                    title: "Telefonnummer",
-                    body: "Skriv inn telefonnummeret ditt uten landskode",
-                    promptHelp: ""
-                  })
-                  .then(dialog => {
-                    fb.additionalUserInfoCollection
-                      .doc(currentUser.uid)
-                      .set({ phoneNumber: dialog.data });
-                    this.$store.dispatch("SET_CURRENT_USER", {
-                      ...currentUser,
-                      phoneNumber: dialog.data
-                    });
-                    this.$router.replace("home");
-                  })
-                  .catch(() => {
-                    firebase
-                      .auth()
-                      .signOut()
-                      .then(() => {
-                        this.$store.dispatch("SET_CURRENT_USER", null);
-                      })
-                      .catch(error => {
-                        console.log(`something went wrong ${error.message}`);
-                      });
-                  });
-              }
-            });
-        })
-        .catch(err => {
-          alert(`Oops. ${err.message}`);
-        });
+      firebase.auth().signInWithRedirect(provider);
     }
   }
 };

src/helpers/auth.js

@@ -0,0 +1,45 @@
+import firebase from "firebase";
+import fb from "@/firebaseConfig.js";
+
+export default (context, user) => {
+  fb.additionalUserInfoCollection
+    .doc(user.uid)
+    .get()
+    .then(userInfo => {
+      if (userInfo.data() && userInfo.data().phoneNumber) {
+        context.$store.dispatch("SET_CURRENT_USER", {
+          ...user,
+          ...userInfo.data()
+        });
+        context.$router.replace("home");
+      } else {
+        context.$dialog
+          .prompt({
+            title: "Telefonnummer",
+            body: "Skriv inn telefonnummeret ditt uten landskode",
+            promptHelp: ""
+          })
+          .then(dialog => {
+            fb.additionalUserInfoCollection
+              .doc(user.uid)
+              .set({ phoneNumber: dialog.data });
+            context.$store.dispatch("SET_CURRENT_USER", {
+              ...user,
+              phoneNumber: dialog.data
+            });
+            context.$router.replace("home");
+          })
+          .catch(() => {
+            firebase
+              .auth()
+              .signOut()
+              .then(() => {
+                context.$store.dispatch("SET_CURRENT_USER", null);
+              })
+              .catch(error => {
+                console.log(`something went wrong ${error.message}`);
+              });
+          });
+      }
+    });
+};

src/router/index.js

@@ -9,7 +9,8 @@ import MyRequestsView from "@/views/MyRequestsView.vue"; // eslint-disable
 import MyAssignedRequestsView from "@/views/MyAssignedRequestsView.vue"; // eslint-disable
 import EditRequestView from "@/views/EditRequestView.vue";
 import MyPageView from "@/views/MyPageView.vue";
-import firebase from "firebase";
+
+import store from "@/store/index";
 
 Vue.use(VueRouter);
 
@@ -97,7 +98,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
-  const { currentUser } = firebase.auth();
+  const { currentUser } = store.getters;
   if (requiresAuth && !currentUser) {
     next("/login");
   } else if (requiresAuth && currentUser) {

src/store/index.js

@@ -92,7 +92,7 @@ const store = new Vuex.Store({
   }
 });
 
-// Firebase auth state change
+// Firebase auth state change, login and logout
 fb.auth.onAuthStateChanged(user => {
   if (user) {
     fb.additionalUserInfoCollection

src/views/Login.vue

@@ -28,12 +28,46 @@
 </template>
 
 <script>
+import firebase from "firebase";
+
+import handleSignedIn from "@/helpers/auth";
+
 import LoginButton from "@/components/LoginButton.vue";
 
 export default {
   name: "login",
   components: {
     LoginButton
+  },
+  methods: {
+    googleSetUpSignInCompleteListener() {
+      firebase
+        .auth()
+        .getRedirectResult()
+        .then(result => {
+          const { user } = result;
+          if (user) {
+            handleSignedIn(this, user);
+          }
+        })
+        .catch(error => {
+          console.log(`something went wrong ${error.message}`);
+          /* TODO: We should have a handler here for when we add Vipps etc
+          if (errorCode === "auth/account-exists-with-different-credential") {
+            alert(
+              "You have already signed up with a different auth provider for that email."
+            );
+            // If you are using multiple auth providers on your app you should handle linking
+            // the user's accounts here.
+          } else {
+            console.error(error);
+          }
+          */
+        });
+    }
+  },
+  created() {
+    this.googleSetUpSignInCompleteListener();
   }
 };
 </script>