Integrate React app on Telegram mini-app

Overview#

Building a new app? Check out the Sample Telegram, which includes a basic Telegram <> Openfort integration.

Prerequisites#

We will be using the Openfort SDK to integrate the React app on Telegram mini-app. If you haven't set up the Openfort SDK in your project, follow the quickstart guide.

Configuration#

Telegram mini-app setup#

Create a Telegram bot and get the bot token. Follow the official guide to create a bot and get the token.
Configure your project providers Enable the Telegram provider and add the bot username and bot token.

Enable the Telegram (Mini-app) provider and add the bot token.

Frontend setup#

In your frontend project, we will authenticate the user with the Telegram provider.

await openfort.authenticateWithThirdPartyProvider({
  provider: ThirdPartyOAuthProvider.TELEGRAM_MINI_APP,
  token: initDataRaw,
  tokenType: TokenType.CUSTOM_TOKEN
});

The token is the initDataRaw you receive from the Telegram SDK after initializing the Telegram mini-app.

In react, you would use @telegram-apps/sdk-react to retrieve the initDataRaw:

import openfort from "../utils/openfortConfig.ts";
import { ThirdPartyOAuthProvider, TokenType } from "@openfort/openfort-js";
import { retrieveLaunchParams } from "@telegram-apps/sdk-react";
const SampleComponent = () => {
  const { initDataRaw } = retrieveLaunchParams();
  useEffect(() => {
    if (initDataRaw) {
      openfort.authenticateWithThirdPartyProvider({
        provider: ThirdPartyOAuthProvider.TELEGRAM_MINI_APP,
        token: initDataRaw,
        tokenType: TokenType.CUSTOM_TOKEN
      }).then(() => {
        console.log("Authenticated!");
      }).catch((error) => {
        console.error("Failed to authenticate:", error);
      })
    }
  }, [initDataRaw]);
  // ... other code
}

For more information on how to integrate the Telegram mini-app SDK, refer to the official documentation.

More information about external authentication can be found in the external auth guide.