TON Connect Authentication Development

Development of TON Connect Authorization

TON Connect — wallet connection protocol for dApps in TON ecosystem. Analogous to SIWE/WalletConnect, but developed natively for TON. Supported by all major TON wallets: Tonkeeper, MyTonWallet, Tonhub. Particularly powerful in Telegram Mini Apps context — native integration.

TON Connect Architecture

Bridge: TON Connect uses bridge service to relay messages between dApp and wallet. User doesn't need to be on same device as dApp (deep links + QR codes work cross-device).

Session: after connection — persistent session stored in wallet. Repeated connection doesn't require new QR code.

Transaction signing: TON Connect not just for auth — can request transaction signing.

Frontend Implementation

import TonConnectUI from '@tonconnect/ui-react';
import { TonConnectButton, useTonConnectUI, useTonAddress } from '@tonconnect/ui-react';

// Initialization (at app root)
const App = () => (
    <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
        <YourApp />
    </TonConnectUIProvider>
);

// Connect button component
function ConnectButton() {
    return <TonConnectButton />; // Ready UI component
}

// Get connected wallet address
function WalletInfo() {
    const address = useTonAddress(); // raw or user-friendly format
    return <div>Connected: {address}</div>;
}

tonconnect-manifest.json

Required file at known URL:

{
    "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"
}

This file is shown to user on connection — verification this is legitimate application.

Backend Verification

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();
    
    // Proof verification via TON Connect SDK
    const result = await tonweb.utils.verifyTonConnectProof(
        proof,
        publicKey,
        walletAddress
    );
    
    return result;
}

// Express endpoint
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 });
        }
    }
});

Telegram Mini App Specifics

In Telegram Mini App TON Connect works without QR codes — wallet opens inline in Telegram:

import { useTonConnectUI } from '@tonconnect/ui-react';

function TelegramMiniAppConnect() {
    const [tonConnectUI] = useTonConnectUI();
    
    // In Telegram Mini App — opens wallet inside Telegram
    const handleConnect = async () => {
        if (window.Telegram?.WebApp) {
            // Special behavior for Telegram
            await tonConnectUI.openModal();
        }
    };
}

TON Connect auth — 2-5 days for integration. Telegram Mini Apps make this even faster thanks to ready UI components.