Tonspack Web3Auth Telegram Webapp Base MPC Solution

This repo is to build a Telegram webapp base MPC wallet solution for Tonspack wallet.

Origin README.MD :

Web3Auth (@web3auth/single-factor-auth) Telegram React-Vite Express Example

Join our Community Portal to get support and stay up to date with the latest news and updates.

This example demonstrates how to use Web3Auth with Telegram Login in a React Vite frontend. Express is used to create the Telegram OAuth server that issues JWT tokens for the Web3Auth SDK.

How to Use

Download Manually

npx degit Web3Auth/web3auth-core-kit-examples/single-factor-auth-web/sfa-web-telegram-example w3a-sfa-web-telegram-example

Setup

1. Create a .env file in the server/api directory with the following content:

TELEGRAM_BOT_NAME="" # e.g. @your_bot_name
TELEGRAM_BOT_TOKEN="" # e.g. 1234567890:ABCDEF
SERVER_URL="" # e.g. http://localhost:3000
CLIENT_URL="" # e.g. http://localhost:5173
JWT_KEY_ID="" # e.g. your_key_id

2. Create a .env.local file in the root directory with the following content:

VITE_SERVER_URL="" # e.g. http://localhost:3000
VITE_W3A_VERIFIER_NAME="" # e.g. w3a-telegram-demo
VITE_W3A_CLIENT_ID="" # e.g. your_client_id

Follow this Telegram guide to follow along.

Install & Run:

cd w3a-example/server
npm install
## start server
# server will be running on localhost:8080
cd api
node index.js
# use ngrok to expose the server to the internet
# ngrok http 3000
# copy the ngrok url and update the SERVER_URL in the .env file
# also update the telegram bot domain to the ngrok url


## now, start the client
cd ..
npm install
npm run start
# client will be running on localhost:5173

Important Links

• Website
• Docs
• Guides
• SDK / API References
• Pricing
• Community Portal