Create a wallet in a single-click from your telegram mini-app.

Introduction

To take advantage of Telegram Auto-Wallets, you must first enable no transactional MFA. Please reach out to us in Slack to request access.

Seamless Telegram Login with Telegram Web Apps improves user experience by enabling quick access directly within Telegram Messenger. Users can launch a mini app and get automatically logged in.

Live example of a Dynamic Seamless Telegram Login @DynamicMiniAppBot on Telegram App.

Live Demo

🤖 Open Dynamic Mini App Bot in Telegram

Integration guide

To begin, you can clone the provided Mini App example and repository as a foundation for your project.

Step-by-Step Instructions

  1. Create an Account on Dynamic

  2. Clone the Repository and Deploy

    • Clone Mini App example and repository to your local machine.
    • Follow steps in the README
    • Deploy the application online. With Next.js, you can deploy a web app within minutes. Follow the deployment instructions here.
  3. Create a Telegram App and Bot

    • Use BotFather to create a new app and bot. For detailed steps, refer to our comprehensive guide here.
  4. Configure Settings in Dynamic Dashboard

  5. Update Bot Configuration

    • Use the Bot TOKEN from Telegram and set your web app URL as the LOGIN_URL in scripts/bot.ts or add them as environment variables.
  6. Run the Telegram Bot

    • Run the Telegram bot using the following command:
      npx ts-node scripts/bot.ts
      
  7. Start the Bot in Telegram

    • Open Telegram, go to your newly created bot, and type /start.

Success!

You should now have Dynamic’s Seamless Telegram Login fully functional in your Mini App. 🎉

If you have any questions or need help with the integration, feel free to reach out to us in Slack.

Telegram Authentication Check for Existing Users

This feature avoids accidental duplicate account creation by ensuring that users with existing accounts don’t create unnecessary new ones if their account is not yet linked to Telegram. The isAuthWithTelegram() function verifies whether the user is authenticated through Telegram.

If the user is linked with Telegram, they are automatically logged in. If not, a splash modal prompts the user to confirm if they have an account. Based on the user’s response, they are either are prompted to log in or a new account is automatically created and logged in. This ensures app owners can maintain a single user identity, avoiding duplicate accounts.

Hook is available from SDK version 3.1.3
Full working example in our Telegram Mini App repository here

  1. Import the necessary Telegram authentication functions:

    import { useTelegramLogin } from "@dynamic-labs/sdk-react-core";
    
    const { telegramSignIn, isAuthWithTelegram } = useTelegramLogin();
    
  2. Check if the user is authenticated via Telegram:

    Use isAuthWithTelegram() to determine if the user is linked with Telegram.

    const checkTelegramConnection = async () => {
      const isLinkedWithTelegram = await isAuthWithTelegram();
    
      if (isLinkedWithTelegram) {
        // Auto login if Telegram is connected
        await telegramSignIn();
      } else {
        // Show modal splash page
      }
    };
    
  3. Handle the modal splash response:

    If the user has an account: Prompt developer’s login into the app without creating a new account. If the user doesn’t have an account: Automatically create a new account and log the user in.

    const handleModalResponse = async (hasAccount: boolean) => {
      if (hasAccount) {
        // Prompt developer's login
        console.log("User already has an account on XYZ");
      } else {
        // Call signIn with autoCreate: true
        console.log(
          "User does not have an account on XYZ => Auto Create + Auto Login"
        );
        await telegramSignIn({ forceCreateUser: true });
      }
    };
    

You can clone the provided full working example in our Telegram Mini App repository here

FAQ

What do I need to do to ensure that Telegram Auto-Wallets is working correctly?

  1. CORS Origin Setup: Ensure that your CORS Origin is correctly configured to include your domain(s). Go to Dashboard > Security > CORS and verify that your domain(s) are listed.

  2. Telegram Social Provider: Verify that the Telegram Social Provider is enabled and configured with the correct Bot details. Navigate to Dashboard > Log In & User Profile > Telegram and confirm that it is turned on, with the BotName and Bot Token entered correctly.

  3. Session keys: Please reach out to us in Slack to request access.

  4. Email Profile Information Requirement: Make sure that the option to require profile information for email login is turned off. Go to Dashboard > Log In & User Profile > Email ⚙️ and confirm that Profile Information required is off.

  5. Bot Code & Telegram Mini Web App: Clone the provided Mini App example and repository as a foundation for your project. Double-check that the Telegram bot code and the Telegram Mini Web App are functioning without any errors. Check the environment variable are loaded correctly LOGIN_URL and TOKEN. Ensure that the logic for seamless login and user verification is working as expected, both server-side and on the front end.

  6. SDK and Package Versions: Verify that the SDK and any packages you’re using are up to date. Hook is available from SDK version 3.1.3

How do I fix MetaMask wallet connection issues?

MetaMask wallet connection does not work on Telegram mobile devices. To resolve this issue, use the following workaround:

Open your app within the mobile version of the MetaMask app. This will allow the wallet connection to function correctly on mobile. If you encounter further issues, ensure that MetaMask is up to date.

How do I fix issues connecting with Telegram Social Auth and other social providers?

The Telegram embedded in-app browser does not allow popups, which prevents most social providers from functioning properly.