Call the component from another button

[ljs19923]

Hi,

is it possible to call the react-telegram-login from another button?

I want to use my own button with my design, is it a way to override it? And hide this one

Thanks

[Zulus-RU]

I'm looking for a way to do that, too.

[Ekernik]

Its possible, but by using separate function.

1. In your HTML doc load a script tag with just src attribute, if you give other attributes it will create an iframe, which you don't want.

   <script src='https://telegram.org/js/telegram-widget.js?21' />

2. Create a function

   
   interface ResponseType {
   auth_date: number;
   first_name: string;
   hash: string;
   id: number;
   last_name: string;
   photo_url: string;
   username: string;
   }

export const handleTelegramAuth = () => window.Telegram.Login.auth( { bot_id: 'BOT_ID_NUMBER', request_access: true }, (data: ResponseType) => { if (!data) { console.log('ERROR: something went wrong'); }

  // Validate data here 
  console.log(data);
},

);

3. Extend window type, so typescript doesn't scream at you for Telegram not existing on window object
```typescript
export {};

declare global {
  interface Window {
    Telegram: any;
  }
}

4. Attach function to onClick listener

   <button onClick={handleTelegramAuth} />

I couldn't find existing Telegram object type, but you should be fine using "any"

[Zulus-RU]

Its possible, but by using separate function.

1. In your HTML doc load a script tag with just src attribute, if you give other attributes it will create an iframe, which you don't want.

<script src='https://telegram.org/js/telegram-widget.js?21' />

2. Create a function

interface ResponseType {
  auth_date: number;
  first_name: string;
  hash: string;
  id: number;
  last_name: string;
  photo_url: string;
  username: string;
}

export const handleTelegramAuth = () =>
  window.Telegram.Login.auth(
    { bot_id: 'BOT_ID_NUMBER', request_access: true },
    (data: ResponseType) => {
      if (!data) {
        console.log('ERROR: something went wrong');
      }

      // Validate data here 
      console.log(data);
    },
  );

3. Extend window type, so typescript doesn't scream at you for Telegram not existing on window object

export {};

declare global {
  interface Window {
    Telegram: any;
  }
}

4. Attach function to onClick listener

<button onClick={handleTelegramAuth} />

I couldn't find existing Telegram object type, but you should be fine using "any"

@Ekernik , Thanks for the detailed description, I will try it!

[rekkisomo]

@Ekernik, looks like you didn't get a response ;) I can confirm that works wonders! Only issue I ran into is that Telegram expects 'write', instead of a boolean, for request_access

If you work with people who absolutely love having everything strictly typed, here's that:

interface TelegramResponseType {
        auth_date: number;
        first_name: string;
        hash: string;
        id: number;
        last_name?: string;
        photo_url?: string;
        username?: string;
    }

    interface TelegramOptions {
        bot_id: string;
        request_access?: string;
        lang?: string;
    }

    interface Window {
        Telegram: {
            // 👇️ not sure about getWidgetInfo's callback arguments
            getWidgetInfo: (el_or_id: HTMLElement | string, callback: Function) => void;
            setWidgetOptions: (options: TelegramOptions, el_or_id: HTMLElement | string) => void;
            Login: {
                // 👇️ init checks for base64 'tgAuthResult' in URL, though redirect after login has 'hash' instead, so ????
                init: (options: TelegramOptions, auth_callback: (auth_result: TelegramResponseType) => void) => void;
                open: (callback: (authData: TelegramResponseType) => void) => void;
                auth: (options: TelegramOptions, callback: (authData: TelegramResponseType) => void) => void;
                widgetsOrigin: 'https://oauth.telegram.org' | 'https://oauth.tg.dev';
            }
        }
    }