test login 2

src/app/components/telegram-login/telegram-login.component.ts

@@ -24,19 +24,20 @@ export class TelegramLoginComponent implements OnDestroy {
   private readonly pollIntervalMs = 5000;
   private pollTimer?: ReturnType<typeof setInterval>;
   private mobileFallbackTimeout?: ReturnType<typeof setTimeout>;
+  private launchFrame?: HTMLIFrameElement;
   private readonly handleVisibilityChange = () => {
-    if (document.visibilityState === 'hidden') {
+    if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
-      this.clearMobileFallbackTimeout();
+      this.clearMobileLaunchArtifacts();
       return;
     }
 
-    this.resumeLoginPolling();
+    this.checkLoginAfterReturn();
   };
   private readonly handleWindowFocus = () => {
-    this.resumeLoginPolling();
+    this.checkLoginAfterReturn();
   };
   private readonly handlePageShow = () => {
-    this.resumeLoginPolling();
+    this.checkLoginAfterReturn();
   };
 
   constructor() {
@@ -45,7 +46,7 @@ export class TelegramLoginComponent implements OnDestroy {
         this.initQrLogin();
       } else {
         this.awaitingTelegramReturn.set(false);
-        this.clearMobileFallbackTimeout();
+        this.clearMobileLaunchArtifacts();
         this.stopPolling();
       }
     });
@@ -58,7 +59,8 @@ export class TelegramLoginComponent implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.clearMobileFallbackTimeout();
+    this.awaitingTelegramReturn.set(false);
+    this.clearMobileLaunchArtifacts();
     this.stopPolling();
 
     if (typeof window !== 'undefined') {
@@ -69,13 +71,15 @@ export class TelegramLoginComponent implements OnDestroy {
   }
 
   close(): void {
+    this.awaitingTelegramReturn.set(false);
+    this.clearMobileLaunchArtifacts();
     this.authService.hideLogin();
     this.stopPolling();
   }
 
   openTelegramLogin(): void {
-    const webSessionID = this.webSessionID();
     const url = this.loginUrl();
+    const webSessionID = this.webSessionID();
     if (!url || !webSessionID) return;
 
     if (!this.pollTimer) {
@@ -84,7 +88,7 @@ export class TelegramLoginComponent implements OnDestroy {
 
     if (this.isMobileBrowser()) {
       this.awaitingTelegramReturn.set(true);
-      this.launchTelegramOnMobile(webSessionID, url);
+      this.launchTelegramApp(webSessionID, url);
       return;
     }
 
@@ -92,11 +96,15 @@ export class TelegramLoginComponent implements OnDestroy {
   }
 
   refreshQr(): void {
+    this.awaitingTelegramReturn.set(false);
+    this.clearMobileLaunchArtifacts();
     this.stopPolling();
     this.initQrLogin();
   }
 
   private initQrLogin(): void {
+    this.awaitingTelegramReturn.set(false);
+    this.clearMobileLaunchArtifacts();
     this.qrStatus.set('loading');
     this.loginUrl.set('');
     this.webSessionID.set('');
@@ -131,7 +139,7 @@ export class TelegramLoginComponent implements OnDestroy {
         next: (session) => {
           if (session?.active) {
             this.awaitingTelegramReturn.set(false);
-            this.clearMobileFallbackTimeout();
+            this.clearMobileLaunchArtifacts();
             this.stopPolling();
             this.authService.onTelegramLoginComplete();
           }
@@ -150,7 +158,7 @@ export class TelegramLoginComponent implements OnDestroy {
     }
   }
 
-  private resumeLoginPolling(): void {
+  private checkLoginAfterReturn(): void {
     if (!this.showDialog() || !this.awaitingTelegramReturn()) {
       return;
     }
@@ -168,28 +176,48 @@ export class TelegramLoginComponent implements OnDestroy {
     this.authService.checkSessionOnce(webSessionID).subscribe(session => {
       if (session?.active) {
         this.awaitingTelegramReturn.set(false);
+        this.clearMobileLaunchArtifacts();
         this.stopPolling();
         this.authService.onTelegramLoginComplete();
       }
     });
   }
 
-  private launchTelegramOnMobile(webSessionID: string, fallbackUrl: string): void {
+  private launchTelegramApp(webSessionID: string, fallbackUrl: string): void {
-    this.clearMobileFallbackTimeout();
+    if (typeof document === 'undefined') {
+      window.location.assign(fallbackUrl);
+      return;
+    }
+
+    this.clearMobileLaunchArtifacts();
+
+    this.launchFrame = document.createElement('iframe');
+    this.launchFrame.style.display = 'none';
+    this.launchFrame.setAttribute('aria-hidden', 'true');
+    this.launchFrame.setAttribute('tabindex', '-1');
+    this.launchFrame.src = this.authService.getTelegramAppLoginUrl(webSessionID);
+    document.body.appendChild(this.launchFrame);
+
     this.mobileFallbackTimeout = setTimeout(() => {
-      if (typeof document !== 'undefined' && document.visibilityState === 'visible') {
+      this.removeLaunchFrame();
+      if (document.visibilityState === 'visible') {
         window.location.assign(fallbackUrl);
       }
-    }, 1200);
+    }, 1400);
-
-    window.location.assign(this.authService.getTelegramAppLoginUrl(webSessionID));
   }
 
-  private clearMobileFallbackTimeout(): void {
+  private clearMobileLaunchArtifacts(): void {
     if (this.mobileFallbackTimeout) {
       clearTimeout(this.mobileFallbackTimeout);
       this.mobileFallbackTimeout = undefined;
     }
+
+    this.removeLaunchFrame();
+  }
+
+  private removeLaunchFrame(): void {
+    this.launchFrame?.remove();
+    this.launchFrame = undefined;
   }
 
   private isMobileBrowser(): boolean {

src/app/services/auth.service.ts

@@ -88,7 +88,7 @@ export class AuthService {
     return `https://t.me/${botUsername}?start=${encodeURIComponent(webSessionID)}`;
   }
 
-  /** Generate the Telegram app deep link for mobile auth handoff. */
+  /** Generate a Telegram app deep link for mobile login without opening a browser tab. */
   getTelegramAppLoginUrl(webSessionID: string): string {
     const botUsername = this.getTelegramBotUsername();
     return `tg://resolve?domain=${encodeURIComponent(botUsername)}&start=${encodeURIComponent(webSessionID)}`;