feat: custom auth vue app

torusresearch · Feb 4, 2025 · 21ffcfb · 21ffcfb
1 parent ec71a75
commit 21ffcfb
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 8 deletions.
diff --git a/examples/vue-app/src/App.vue b/examples/vue-app/src/App.vue
@@ -212,6 +212,7 @@ import {
   REDDIT,
   sapphireDevnetVerifierMap,
   sapphireDevnetVerifierOptions,
+  TELEGRAM,
   testnetVerifierMap,
   testnetVerifierOptions,
   TWITTER,
@@ -289,6 +290,11 @@ const loginToConnectionMap = computed((): Record<string, Record<string, string |
     [LINE]: { domain: AUTH_DOMAIN },
     [COGNITO]: { domain: COGNITO_AUTH_DOMAIN, identity_provider: "Google", response_type: "token", user_info_endpoint: "userInfo" },
     [REDDIT]: { domain: AUTH_DOMAIN, connection: "Reddit", verifierIdField: "name", isVerifierIdCaseSensitive: false },
+    [TELEGRAM]: {
+        identity_provider: "Telegram",
+        domain: "https://oauth.tg.dev/auth",
+        origin: "https://custom-auth-beta.vercel.app/serviceworker/redirect",
+    },
     [WEB3AUTH_EMAIL_PASSWORDLESS]: {
       login_hint,
     },

diff --git a/examples/vue-app/src/config.ts b/examples/vue-app/src/config.ts
@@ -5,6 +5,7 @@ import { SafeEventEmitterProvider } from "@web3auth/base";
 export const GOOGLE = "google";
 export const FACEBOOK = "facebook";
 export const REDDIT = "reddit";
+export const TELEGRAM = "telegram";
 export const DISCORD = "discord";
 export const TWITCH = "twitch";
 export const GITHUB = "github";
@@ -42,6 +43,12 @@ export const testnetVerifierMap = {
     clientId: "221898609709-obfn3p63741l5333093430j3qeiinaa8.apps.googleusercontent.com",
     verifier: "google-lrc",
   },
+  [TELEGRAM]: {
+    name: "Telegram",
+    typeOfLogin: "telegram",
+    clientId: "7696397063",
+    verifier: "test-telegram-4",
+  },
   [FACEBOOK]: { name: "Facebook", typeOfLogin: "facebook", clientId: "617201755556395", verifier: "facebook-lrc" },
   [REDDIT]: { name: "Reddit", typeOfLogin: "jwt", clientId: "RKlRuuRoDKOItbJSoOZabDLzizvd1uKn", verifier: "torus-reddit-test" },
   [TWITCH]: { name: "Twitch", typeOfLogin: "twitch", clientId: "f5and8beke76mzutmics0zu4gw10dj", verifier: "twitch-lrc" },
@@ -93,6 +100,12 @@ export const sapphireDevnetVerifierMap = {
     clientId: "221898609709-qnfklddleh1m1m7bq6g8d8dakffp0n86.apps.googleusercontent.com",
     verifier: "web3auth-google-sapphire-devnet",
   },
+  [TELEGRAM]: {
+    name: "Telegram",
+    typeOfLogin: "telegram",
+    clientId: "7696397063",
+    verifier: "test-telegram-4",
+  },
   [FACEBOOK]: { name: "Facebook", typeOfLogin: "facebook", clientId: "226597929760394", verifier: "web3auth-facebook-sapphire-devnet" },
   [REDDIT]: { name: "Reddit", typeOfLogin: "jwt", clientId: "XfiFWQbsZ9t5WQ4TfzHWZOpEghkNskko", verifier: "web3auth-auth0-reddit-sapphire-devnet" },
   [TWITCH]: { name: "Twitch", typeOfLogin: "twitch", clientId: "94nxxpy7inarina6kc9hyg2ao3mja2", verifier: "web3auth-twitch-sapphire-devnet" },

diff --git a/src/handlers/TelegramHandler.ts b/src/handlers/TelegramHandler.ts
@@ -2,7 +2,7 @@ import base64url from "base64url";
 import deepmerge from "deepmerge";
 
 import { UX_MODE } from "../utils/enums";
-import { broadcastChannelOptions, getTimeout, validateAndConstructUrl } from "../utils/helpers";
+import { broadcastChannelOptions, getTimeout, objectToAuthDataMap, validateAndConstructUrl } from "../utils/helpers";
 import log from "../utils/loglevel";
 import PopupHandler from "../utils/PopupHandler";
 import AbstractLoginHandler from "./AbstractLoginHandler";
@@ -60,13 +60,9 @@ export default class TelegramHandler extends AbstractLoginHandler {
     this.finalURL = finalUrl;
   }
 
-  objectToAuthDataMap(tgAuthenticationResult: string) {
-    return JSON.parse(atob(tgAuthenticationResult)) as { first_name: string; last_name: string; photo_url: string; username: string; id: number };
-  }
-
   async getUserInfo(params: LoginWindowResponse): Promise<TorusVerifierResponse> {
     const { idToken } = params;
-    const userInfo = this.objectToAuthDataMap(idToken);
+    const userInfo = objectToAuthDataMap(idToken);
     const { photo_url: profileImage = "", first_name = "", last_name = "", id } = userInfo;
     return {
       email: "", // Telegram does not provide email

diff --git a/src/login.ts b/src/login.ts
@@ -232,9 +232,9 @@ class CustomAuth {
       if (hash && queryParameters) {
         const { error, hashParameters, instanceParameters } = handleRedirectParameters(hash, queryParameters);
         if (error) throw new Error(error);
-        const { access_token: accessToken, id_token: idToken, ...rest } = hashParameters;
+        const { access_token: accessToken, id_token: idToken, tgAuthResult, ...rest } = hashParameters;
         // State has to be last here otherwise it will be overwritten
-        loginParams = { accessToken, idToken, ...rest, state: instanceParameters };
+        loginParams = { accessToken, idToken: idToken || tgAuthResult || "", ...rest, state: instanceParameters };
       } else {
         this.storageHelper.clearOrphanedLoginDetails();
         if (this.config.uxMode === UX_MODE.REDIRECT) {

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
@@ -207,6 +207,10 @@ export const validateAndConstructUrl = (domain: string): URL => {
   }
 };
 
+export const objectToAuthDataMap = (tgAuthenticationResult: string) => {
+  return JSON.parse(atob(tgAuthenticationResult)) as { first_name: string; last_name: string; photo_url: string; username: string; id: number };
+};
+
 export function isMobileOrTablet(): boolean {
   const browser = Bowser.getParser(navigator.userAgent);
   const platform = browser.getPlatform();