Telegram Login / Signup

• Effortless Telegram Login Integration: Easily integrate Telegram authentication with your app for quick and secure signups/logins.

• Customizable Button Design: Adjust the size and styling of the button to match the design of your application.

• User Event Triggers: Detect whether a Telegram user already exists and handle login/signup logic based on this status.

• Easy Workflow Integration: Leverage the received Telegram credentials to trigger workflows and manage authentication.

Step 1: Add the Plugin Element

1. Navigate to the Elements Panel in your Bubble editor.

2. Drag the "Telegram Login/Signup" element to the page where you want to display the login button.

3. Position the element as desired, ensuring it's visible to users for interaction.

Once the element is placed, follow these steps to configure your Telegram bot:

1. Enter your Telegram Bot's name: This should be the name you assigned to your bot via Telegram's BotFather.

2. Provide the Bot Token: Obtain this from Telegram's BotFather when you set up your bot, and input it into the respective field.

3. Select Button Size: You can adjust the size of the button to best fit your design by choosing from the available options in the element’s properties.

After configuring the visual elements, you need to set up workflows to handle user authentication. Here's how:

1. Received Credentials:

   • When a user clicks on the login/signup button, the plugin retrieves user credentials from Telegram.
   • These credentials contain key user information like their Telegram user ID, first name, and profile picture.

2. Triggering Sign-Up/Log-In:

   • Use the credentials received event from the plugin to trigger a workflow that signs up or logs in the user.
   • To do this, go to your Bubble workflow editor and select the event: When "Telegram Login/Signup" credentials are received.

3. Accessing User Data:

   • The received credentials include information about the current user. Use this data to pre-fill user details (e.g., username, profile picture).
   • This can be managed within the element's exposed states, which hold the Telegram user’s data.

Once the basic workflow is set up, you'll need to handle the logic for both existing and new users:

1. Telegram User Exists:
   • If the user already exists in your database, the plugin will trigger an event. Use this event to log the user in and redirect them to the appropriate page.
2. Telegram User Does Not Exist:
   • If the user is new, an event will be triggered indicating that they do not exist in your system. You can use this event to register the new user and set up their profile.
   • This process can be customized according to your app’s needs, such as assigning a role, setting a default profile picture, or redirecting them to a specific page.