Developing Authorization via TON Connect — Wallet Integration in dApps

Developing authorization via TON Connect is not just installing a library. Typical problems: proof leakage due to incorrect routing, incompatibility with some wallets due to bridge versions, and verification errors on the backend that ignore timestamps. We've solved this in 20+ projects, including those with 10k+ DAU, and know all the pitfalls. We offer end-to-end implementation: from architecture to deployment in Telegram Mini Apps with integration into your backend. In 2–5 days, you get stable authorization compatible with Tonkeeper, MyTonWallet, Tonhub, and Telegram wallets.

How TON Connect ensures authorization security

TON Connect uses a bridge service to relay messages between the dApp and the wallet. The user does not need to be on the same device — deep links and QR codes work cross-device. Persistent session is stored in the wallet: reconnection does not require a new QR, and the proof automatically confirms key ownership. Proof is based on TonProof, a message signing standard similar to EIP-712. This eliminates man-in-the-middle attacks.

Transaction signing — TON Connect not only authorizes the user but also allows requesting transaction signatures directly from the dApp. This is convenient for DeFi applications and NFT marketplaces. For example, in a DeFi app, a user confirms a swap with one click without leaving the interface. Compare with SIWE (Sign-In with Ethereum), which requires a separate transaction — TON Connect gives 40% fewer actions.

Frontend: implementing the connection

For React, we use @tonconnect/ui-react. Initialize with a manifest file:

import TonConnectUI from '@tonconnect/ui-react'; import { TonConnectButton, useTonConnectUI, useTonAddress } from '@tonconnect/ui-react'; const App = () => ( <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json"> <YourApp /> </TonConnectUIProvider> ); 

The ready-made TonConnectButton provides access to all wallets. Get the address:

function WalletInfo() { const address = useTonAddress(); return <div>Connected: {address}</div>; } 

Important: in real projects, we configure the list of supported wallets via walletsListConfiguration to filter out non-working versions.

tonconnect-manifest.json: required file

Place it at a public URL. The user sees it when connecting to verify legitimacy:

{ "url": "https://your-app.com", "name": "Your App Name", "iconUrl": "https://your-app.com/icon.png", "termsOfUseUrl": "https://your-app.com/terms", "privacyPolicyUrl": "https://your-app.com/privacy" } 

Mistake: many use relative paths — the wallet cannot load the manifest. Absolute HTTPS URL is mandatory.

Backend: proof verification

The proof from the client must be verified on the server. We use tonweb:

import { TonProofItemReplySuccess } from '@tonconnect/protocol'; import TonWeb from 'tonweb'; async function verifyTonProof( proof: TonProofItemReplySuccess['proof'], publicKey: string, walletAddress: string ): Promise<boolean> { const tonweb = new TonWeb(); const result = await tonweb.utils.verifyTonConnectProof( proof, publicKey, walletAddress ); return result; } app.post('/api/ton-auth', async (req, res) => { const { walletInfo } = req.body; if (walletInfo.connectItems?.tonProof?.type === 'ton_proof') { const isValid = await verifyTonProof( walletInfo.connectItems.tonProof.proof, walletInfo.account.publicKey, walletInfo.account.address ); if (isValid) { req.session.user = { address: walletInfo.account.address }; res.json({ success: true }); } } }); 

Note: the proof must be fresh (5-minute timeout), otherwise replay attacks are possible. We add timestamp checking — this detail is often overlooked.

Why it's important to check the timestamp in the proof?

Without checking the signature time, an attacker could intercept the proof and use it later. We set an allowable window of 5 minutes and reject expired ones. This practice is described in the TON Connect specification — we recommend studying it.

Telegram Mini App: integration without QR

In a Telegram Mini App, the wallet opens inline. Use useTonConnectUI:

function TelegramMiniAppConnect() { const [tonConnectUI] = useTonConnectUI(); const handleConnect = async () => { if (window.Telegram?.WebApp) { await tonConnectUI.openModal(); } }; } 

This speeds up the user experience: no need to scan a QR, just press a button. We've integrated TON Connect into several Telegram Mini Apps — average connection time dropped to 3 seconds. In one project with 50k users, authorization conversion increased by 25% after switching to inline.

What's included in the work?

We deliver:

• Documentation on the integration architecture (interaction diagram: dApp ↔ bridge ↔ wallet).
• Source code for React frontend components with Telegram Mini Apps support.
• Backend verification module (Node.js, Docker).
• Deployment scripts for the manifest file and migrations.
• Access to the bridge server (if a custom one is required).
• Security consultation and QA guidelines.
• Post-release support for 30 days — incident fixes, patches for new SDK versions.

We guarantee compatibility with all major wallets and no regressions when updating the TON Connect SDK. Our experience is confirmed by TON Foundation certification.

Process and timeline

Total: 2–5 days. The cost is calculated individually based on project complexity (number of wallets, Telegram Mini App presence, load). Contact us for an estimate — we'll consult on architecture and timeline. Get a consultation on TON Connect integration today.