fix: try signInWithRedirect if signInWithPopup fails (#43)

Author: keenthekeen

src/app/auth.service.ts

@@ -1,5 +1,5 @@
 import {inject, Injectable} from '@angular/core';
-import {Auth, GoogleAuthProvider, idToken, user, signInWithPopup, signOut, User} from '@angular/fire/auth';
+import {Auth, getRedirectResult, GoogleAuthProvider, idToken, signInWithPopup, signInWithRedirect, signOut, user, User} from '@angular/fire/auth';
 import {BehaviorSubject, Subscription} from 'rxjs';
 
 @Injectable({
@@ -25,6 +25,7 @@ export class AuthService {
         this.userSubscription = this.user$.subscribe((aUser: User | null) => {
             this.userSubject.next(aUser);
         });
+        getRedirectResult(this.auth); // ignore result
     }
 
     signInWithPopup() {
@@ -33,6 +34,12 @@ export class AuthService {
         return signInWithPopup(this.auth, provider);
     }
 
+    signInWithRedirect() {
+        const provider = new GoogleAuthProvider();
+        provider.setCustomParameters({hd: 'docchula.com'});
+        return signInWithRedirect(this.auth, provider);
+    }
+
     signOut() {
         return signOut(this.auth);
     }

src/app/welcome/welcome.page.ts

@@ -86,10 +86,15 @@ export class WelcomePage implements OnInit, OnDestroy {
     await loading.present();
 
       this.authService.signInWithPopup().catch(async (error) => {
-          await this.alertError(
-              "Login Failed",
-              `Unable to sign in. Please try again. (${error.code}: ${error.message})`,
-          );
+          if (error.code === "auth/popup-closed-by-user") {
+              // User closed the popup without completing the sign-in. May cause by popup blocker.
+              await this.authService.signInWithRedirect();
+          } else {
+              await this.alertError(
+                  "Login Failed",
+                  `Unable to sign in. Please try again. (${error.code}: ${error.message})`,
+              );
+          }
       }).finally(() => loading.dismiss());
   }
 

src/environments/environment.prod.ts

@@ -2,7 +2,7 @@ export const environment = {
   production: true,
   firebase: {
     apiKey: 'AIzaSyChVnSa_0Lk0U4SvPi_yTmpzCC5W2CZqaI',
-    authDomain: 'keendev-flick-a.firebaseapp.com',
+      authDomain: 'flick.docchula.com',
     databaseURL: 'https://keendev-flick-a.firebaseio.com',
     projectId: 'keendev-flick-a',
     storageBucket: 'keendev-flick-a.appspot.com',

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   firebase: {
     apiKey: 'AIzaSyChVnSa_0Lk0U4SvPi_yTmpzCC5W2CZqaI',
-    authDomain: 'keendev-flick-a.firebaseapp.com',
+      authDomain: 'flick.docchula.com',
     databaseURL: 'https://keendev-flick-a.firebaseio.com',
     projectId: 'keendev-flick-a',
     storageBucket: 'keendev-flick-a.appspot.com',