Merge pull request #366 from Web3Auth/feat/optimize-iframe-loading

optimize iframe loading

Author: chaitanyapotti

src/core/AuthProvider.ts

@@ -56,6 +56,18 @@ export class AuthProvider {
     return authServiceIframeMap.get(this.embedNonce) as HTMLIFrameElement;
   }
 
+  registerAuthServiceIframe(iframe: HTMLIFrameElement) {
+    authServiceIframeMap.set(this.embedNonce, iframe);
+  }
+
+  public cleanup() {
+    const iframe = authServiceIframeMap.get(this.embedNonce);
+    if (iframe && iframe.parentNode) {
+      iframe.parentNode.removeChild(iframe);
+      authServiceIframeMap.delete(this.embedNonce);
+    }
+  }
+
   async init({ network, clientId }: { network: WEB3AUTH_NETWORK_TYPE; clientId: string }): Promise<void> {
     if (typeof window === "undefined" || typeof document === "undefined") throw new Error("window or document is not available");
     if (this.initialized) throw new Error("AuthProvider already initialized");
@@ -82,7 +94,8 @@ export class AuthProvider {
         allow="clipboard-write"
       ></iframe>`
     );
-    authServiceIframeMap.set(this.embedNonce, authServiceIframe);
+
+    this.registerAuthServiceIframe(authServiceIframe);
 
     return new Promise<void>((resolve, reject) => {
       try {

src/core/auth.ts

@@ -50,6 +50,8 @@ export class Auth {
 
   private authProvider: AuthProvider;
 
+  private authProviderPromise: Promise<void>;
+
   constructor(options: AuthOptions) {
     if (!options.clientId) throw InitializationError.invalidParams("clientId is required");
     if (!options.network) options.network = WEB3AUTH_NETWORK.SAPPHIRE_MAINNET;
@@ -192,8 +194,9 @@ export class Auth {
     if (this.options.sdkMode === SDK_MODE.IFRAME) {
       this.authProvider = new AuthProvider({ sdkUrl: this.options.sdkUrl, whiteLabel: this.options.whiteLabel });
       if (!this.state.sessionId) {
-        await this.authProvider.init({ network: this.options.network, clientId: this.options.clientId });
+        this.authProviderPromise = this.authProvider.init({ network: this.options.network, clientId: this.options.clientId });
         if (params.nonce) {
+          await this.authProviderPromise;
           await this.postLoginInitiatedMessage(JSON.parse(params.loginParams), params.nonce);
         }
       }
@@ -227,8 +230,13 @@ export class Auth {
 
   async postLoginInitiatedMessage(params: LoginParams, nonce?: string): Promise<void> {
     if (this.options.sdkMode !== SDK_MODE.IFRAME) throw LoginError.invalidLoginParams("Cannot perform this action in default mode.");
+    // This is to ensure that the auth provider is initialized before calling postLoginInitiatedMessage
+    // This is setup in the init method, if there is no active session.
+    if (this.authProviderPromise) await this.authProviderPromise;
 
-    if (!this.authProvider || !this.authProvider.initialized) {
+    // if there is an active session, we dont load the auth provider in the init method.
+    // so we need to initialize it here, if user logged out and then login in again.
+    if (!this.authProvider?.initialized) {
       await this.authProvider.init({ network: this.options.network, clientId: this.options.clientId });
     }
 
@@ -242,7 +250,9 @@ export class Auth {
 
   async postLoginCancelledMessage(nonce: string): Promise<void> {
     if (this.options.sdkMode !== SDK_MODE.IFRAME) throw LoginError.invalidLoginParams("Cannot perform this action in default mode.");
-    if (!this.authProvider || !this.authProvider.initialized) throw InitializationError.notInitialized();
+    if (this.authProviderPromise) await this.authProviderPromise;
+
+    if (!this.authProvider?.initialized) throw InitializationError.notInitialized();
 
     this.authProvider.postLoginCancelledMessage(nonce);
   }
@@ -423,6 +433,10 @@ export class Auth {
     return true;
   }
 
+  async cleanup() {
+    if (this.authProvider) this.authProvider.cleanup();
+  }
+
   getUserInfo(): AuthUserInfo {
     if (!this.sessionManager.sessionId) {
       throw LoginError.userNotLoggedIn();