feat: added new onError param to base-login-provider and login-provider to handle onError resolving of loading script errors. (#811)

feat: added onHasErrorChange/hasError and onIsLoadedChange/isLoaded to handle error event handling and loaded event handling based on your provider config.
chore: implemented error/loading methods for all providers
chore: updated readme with new error and loaded handling example

Author: mrthestarchild

projects/angularx-social-login/README.md

@@ -390,3 +390,34 @@ this.authService.signIn(FacebookLoginProvider.PROVIDER_ID, fbLoginOptions);
 ng build angularx-social-login
 ng serve
 ```
+
+## Error & Loading Handling
+To handle errors and loaded events you can use the `BaseLoginProvider` object from your `SocialAuthServiceConfig`
+
+
+``` typescript
+// inject the SOCIAL_AUTH_CONFIG into your component
+providerConfig: SocialAuthServiceConfig | Promise<SocialAuthServiceConfig> = inject(SOCIAL_AUTH_CONFIG);
+
+...
+
+async SetUpProviderHandling() {
+  // get the injected providerConfig as a SocialAuthServiceConfig.
+  const providerConfig = await this.providerConfig;
+  // get your provider config based on the ProviderId
+  const foundProviderConfig = providerConfig.providers.find(x => x.id == MyProvider.PROVIDER_ID);
+  if(foundProviderConfig && foundProviderConfig.provider) {
+    foundProviderConfig.provider.onHasErrorChange.subscribe(value => {
+      // handle errors on change here
+    });
+    // set the base has error result here.
+    const hasError = foundProviderConfig.provider.hasError;
+
+    foundProviderConfig.provider.onIsLoadedChange.subscribe(value => {
+      // handle isLoading on change here
+    });
+    // set the base isLoaded result here.
+    const hasError = foundProviderConfig.provider.isLoaded;
+  }
+}
+```

projects/angularx-social-login/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abacritt/angularx-social-login",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Social login and authentication module for Angular 19. Supports authentication with Google, Facebook, Amazon, and VK. Can be extended to other providers also.",
   "repository": {
     "type": "git",

projects/angularx-social-login/src/entities/base-login-provider.ts

@@ -10,12 +10,17 @@ export abstract class BaseLoginProvider implements LoginProvider {
   abstract signIn(signInOptions?: object): Promise<SocialUser>;
   abstract signOut(revoke?: boolean): Promise<void>;
   refreshToken?(): Promise<SocialUser | null>;
+  readonly onHasErrorChange: EventEmitter<boolean> = new EventEmitter();
+  readonly onIsLoadedChange: EventEmitter<boolean> = new EventEmitter();
+  hasError: boolean = false;
+  isLoaded: boolean = false;
 
   protected loadScript(
     id: string,
     src: string,
     onload: any,
-    parentElement: any = null
+    parentElement: any = null,
+    onError: any = null
   ): void {
     // get document if platform is only browser
     if (typeof document !== 'undefined' && !document.getElementById(id)) {
@@ -24,6 +29,7 @@ export abstract class BaseLoginProvider implements LoginProvider {
       signInJS.async = true;
       signInJS.src = src;
       signInJS.onload = onload;
+      signInJS.onerror = onError;
 
       if (!parentElement) {
         parentElement = document.head;

projects/angularx-social-login/src/entities/login-provider.ts

@@ -8,4 +8,8 @@ export interface LoginProvider {
   signIn(signInOptions?: object): Promise<SocialUser>;
   signOut(revoke?: boolean): Promise<void>;
   refreshToken?(): Promise<SocialUser | null>;
+  readonly onHasErrorChange: EventEmitter<boolean>;
+  readonly onIsLoadedChange: EventEmitter<boolean>;
+  hasError: boolean;
+  isLoaded: boolean;
 }

projects/angularx-social-login/src/providers/amazon-login-provider.ts

@@ -34,9 +34,17 @@ export class AmazonLoginProvider extends BaseLoginProvider {
     return new Promise((resolve, reject) => {
       try {
         // @ts-ignore
-        this.loadScript('amazon-login-sdk', 'https://assets.loginwithamazon.com/sdk/na/login1.js', () => {resolve();}, amazonRoot);
+        this.loadScript('amazon-login-sdk', 'https://assets.loginwithamazon.com/sdk/na/login1.js', () => {resolve();}, amazonRoot,
+        () => {
+          this.hasError = true;
+          this.onHasErrorChange.emit(this.hasError);
+          reject(`There was an issue loading the ${AmazonLoginProvider.PROVIDER_ID} authentication script.`);
+        });
       } catch (err) {
         reject(err);
+      } finally {
+        this.isLoaded = true;
+        this.onIsLoadedChange.emit(this.isLoaded);
       }
     });
   }

projects/angularx-social-login/src/providers/dummy-login-provider.ts

@@ -64,6 +64,8 @@ export class DummyLoginProvider extends BaseLoginProvider {
 
   getLoginStatus(): Promise<SocialUser> {
     return new Promise((resolve, reject) => {
+      this.isLoaded = true;
+      this.onIsLoadedChange.emit(this.isLoaded);
       if (this.loggedIn) {
         resolve(this.dummy);
       } else {

projects/angularx-social-login/src/providers/facebook-login-provider.ts

@@ -38,10 +38,19 @@ export class FacebookLoginProvider extends BaseLoginProvider {
             });
 
             resolve();
-          }
+          },
+        null,
+        () => {
+          this.hasError = true;
+          this.onHasErrorChange.emit(this.hasError);
+          reject(`There was an issue loading the ${FacebookLoginProvider.PROVIDER_ID} authentication script.`);
+        }
         );
       } catch (err) {
         reject(err);
+      } finally {
+        this.isLoaded = true;
+        this.onIsLoadedChange.emit(this.isLoaded);
       }
     });
   }

projects/angularx-social-login/src/providers/google-login-provider.ts

@@ -115,10 +115,18 @@ export class GoogleLoginProvider extends BaseLoginProvider {
             }
 
             resolve();
-          }
-        );
+          },
+        null,
+        () => {
+          this.hasError = true;
+          this.onHasErrorChange.emit(this.hasError);
+          reject(`There was an issue loading the ${GoogleLoginProvider.PROVIDER_ID} authentication script.`);
+        });
       } catch (err) {
         reject(err);
+      } finally {
+        this.isLoaded = true;
+        this.onIsLoadedChange.emit(this.isLoaded);
       }
     });
   }

projects/angularx-social-login/src/providers/microsoft-login-provider.ts

@@ -122,6 +122,7 @@ export class MicrosoftLoginProvider extends BaseLoginProvider {
 
   initialize(): Promise<void> {
     return new Promise((resolve, reject) => {
+      try {
       this.loadScript(
         MicrosoftLoginProvider.PROVIDER_ID,
         'https://alcdn.msauth.net/browser/2.13.1/js/msal-browser.min.js',
@@ -146,8 +147,20 @@ export class MicrosoftLoginProvider extends BaseLoginProvider {
           } catch (e) {
             reject(e);
           }
+        },
+        null,
+        () => {
+          this.hasError = true;
+          this.onHasErrorChange.emit(this.hasError);
+          reject(`There was an issue loading the ${MicrosoftLoginProvider.PROVIDER_ID} authentication script.`);
         }
       );
+      } catch (err) {
+        reject(err);
+      } finally {
+        this.isLoaded = true;
+        this.onIsLoadedChange.emit(this.isLoaded);
+      }
     });
   }
 
@@ -206,8 +219,8 @@ export class MicrosoftLoginProvider extends BaseLoginProvider {
     }
   }
 
-  async signIn(): Promise<SocialUser> {
-    const loginResponse = await this._instance.loginPopup({
+  async signIn(options: MSALLoginRequest | undefined = undefined): Promise<SocialUser> {
+    const loginResponse = await this._instance.loginPopup(options ? options : {
       scopes: this.initOptions.scopes,
       prompt: this.initOptions.prompt,
     });

projects/angularx-social-login/src/providers/vk-login-provider.ts

@@ -55,10 +55,19 @@ export class VKLoginProvider extends BaseLoginProvider {
             });
 
             resolve();
-          }
+          },
+        null,
+        () => {
+          this.hasError = true;
+          this.onHasErrorChange.emit(this.hasError);
+          reject(`There was an issue loading the ${VKLoginProvider.PROVIDER_ID} authentication script.`);
+        }
         );
       } catch (err) {
         reject(err);
+      } finally {
+        this.isLoaded = true;
+        this.onIsLoadedChange.emit(this.isLoaded);
       }
     });
   }