feat: implement seamless telegram login

packages/@magic-ext/oauth2/src/index.ts

@@ -9,6 +9,16 @@ import {
   OAuthPopupConfiguration,
 } from './types';
 
+declare global {
+  interface Window {
+    Telegram?: {
+      WebApp: {
+        initData: string
+      };
+    };
+  }
+}
+
 export class OAuthExtension extends Extension.Internal<'oauth2'> {
   name = 'oauth2' as const;
   config = {};
@@ -19,6 +29,11 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
     '@magic-sdk/react-native-expo': false,
   };
 
+  constructor() {
+    super();
+    this.seamlessTelegramLogin();
+  }
+
   public loginWithRedirect(configuration: OAuthRedirectConfiguration) {
     return this.utils.createPromiEvent<void>(async (resolve, reject) => {
       const parseRedirectResult = this.utils.createJsonRpcRequestPayload(OAuthPayloadMethods.Start, [
@@ -45,7 +60,7 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
       if (successResult?.oauthAuthoriationURI) {
         window.location.href = successResult.useMagicServerCallback
           ? // @ts-ignore - this.sdk.endpoint is marked protected but we need to access it.
-            new URL(successResult.oauthAuthoriationURI, this.sdk.endpoint).href
+          new URL(successResult.oauthAuthoriationURI, this.sdk.endpoint).href
           : successResult.oauthAuthoriationURI;
       }
 
@@ -75,6 +90,33 @@ export class OAuthExtension extends Extension.Internal<'oauth2'> {
 
     return this.request<OAuthRedirectResult | OAuthRedirectError>(requestPayload);
   }
+
+  protected seamlessTelegramLogin() {
+    try {
+      const hash = window.location.hash.toString();
+      if (!hash.includes('#tgWebAppData')) return;
+
+      const script = document.createElement('script');
+      script.src = 'https://telegram.org/js/telegram-web-app.js';
+      document.head.prepend(script);
+
+      script.onload = async () => {
+        try {
+          const userData = window.Telegram?.WebApp.initData;
+          const requestPayload = this.utils.createJsonRpcRequestPayload(
+            OAuthPayloadMethods.VerifyTelegramData,
+            [{ userData, isMiniApp: true }],
+          );
+
+          await this.request<string | null>(requestPayload);
+        } catch (verificationError) {
+          console.log('Error while verifying telegram data', verificationError);
+        }
+      }
+    } catch (seamlessLoginError) { 
+      console.log('Error while loading telegram-web-app script', seamlessLoginError); 
+    }
+  }
 }
 
 function getResult(this: OAuthExtension, queryString: string, lifespan?: number) {

packages/@magic-ext/oauth2/src/types.ts

@@ -4,6 +4,7 @@ export enum OAuthPayloadMethods {
   Start = 'magic_oauth_login_with_redirect_start',
   Verify = 'magic_oauth_login_with_redirect_verify',
   Popup = 'magic_oauth_login_with_popup',
+  VerifyTelegramData = 'magic_oauth_verify_telegram_data',
 }
 
 export type OAuthProvider =
@@ -101,7 +102,7 @@ export interface OAuthRedirectConfiguration {
 }
 
 export interface OAuthPopupConfiguration {
-  provider: OAuthProvider;
+  provider: OAuthProvider | 'telegram';
   scope?: string[];
   loginHint?: string;
 }