Why does a window appear after logging in asking me to go to the twitchtokengenerator website?

API
1

React Native, without typescript. Hi, are there examples/repository of implementation of login via twitch? because the component WebView is not suitable, not supported. Or have package npm?

2

Consider DCF: Getting OAuth Access Tokens | Twitch Developers for this use case instead.

whats the use case? Mobile app? something else?

3

Yes, I achieved the result that shows the login form in Google Chrome, but after authorization it does not redirect back to my application but hangs on the site https://id.twitch.tv/oauth2/authorize?client_id , which shows the continue button, how can this be fixed?

Screenshot_75
Screenshot_75592×409 3.31 KB

4

the user shouldn’t see such a screen, but should go straight back to the application where his login would be shown, and here the problem begins, in order to somehow extract it ACCESSTOKEN

5

my code

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button, Linking, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const CLIENT_ID = ''; // ваш client_id
const REDIRECT_URI = 'myapp://auth'; // схема вашего deep linking
const AUTH_URL = `https://id.twitch.tv/oauth2/authorize?client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent(REDIRECT_URI)}&response_type=token&scope=user:read:email`;

export default function TwitchLogin() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [username, setUsername] = useState('');
  const [error, setError] = useState(null); // Добавлено для ошибок
  const accessToken = '';

  useEffect(() => {
    // Получение информации о пользователе
    const fetchUserInfo = async (token) => {
      try {
        const response = await fetch('https://api.twitch.tv/helix/users', {
          headers: {
            'Client-ID': CLIENT_ID,
            'Authorization': `Bearer ${token}`,
          },
        });
        const data = await response.json();
        if (data.data && data.data.length > 0) {
          const userLogin = data.data[0].login;
          setUsername(userLogin);
          setLoggedIn(true);
          await AsyncStorage.setItem('twitch_username', userLogin);
          console.log('Логин Twitch:', userLogin);
        } else {
          setError('Не удалось получить данные пользователя');
        }
      } catch (error) {
        setError(error.message);
      }
    };

    // Проверяем сохраненное состояние авторизации
    (async () => {
      const savedUser = await AsyncStorage.getItem('twitch_username');
      if (savedUser) {
        setUsername(savedUser);
        setLoggedIn(true);
      }
    })();

    // Обработчик для deep link
    const handleUrl = async (event) => {
      const url = event.url;
      if (url.startsWith(REDIRECT_URI)) {
        const hashPart = url.split('#')[1]; // получаем часть после #
        const params = new URLSearchParams(hashPart);
        const token = params.get('access_token');
        if (token) {
          await fetchUserInfo(token);
        }
      }
    };

    // Используем правильный способ добавления слушателя
    const subscription = Linking.addEventListener('url', handleUrl);

    // Проверка, был ли запуск через deep link
    (async () => {
      const initialUrl = await Linking.getInitialURL();
      if (initialUrl && initialUrl.startsWith(REDIRECT_URI)) {
        handleUrl({ url: initialUrl });
      }
    })();

    // Удаляем слушатель при размонтировании компонента
    return () => {
      subscription.remove();
    };
  }, []);

  const handleLogin = async () => {
    try {
      await Linking.openURL(AUTH_URL);
    } catch (error) {
      Alert.alert('Ошибка', 'Не удалось открыть браузер');
    }
  };

  const handleReturn = async () => {
    await AsyncStorage.removeItem('twitch_username');
    setLoggedIn(false);
    setUsername('');
  };

  return (
    <View style={styles.container}>
      {error && <Text style={{ color: 'red' }}>{error}</Text>}
      {loggedIn ? (
        <View>
          <Text style={styles.welcome}>Привет, {username}!</Text>
          <Button title="Выйти" onPress={handleReturn} />
        </View>
      ) : (
        <View>
          <Text>Логин пользователя: {username}</Text>
          <Button title="Войти через Twitch" onPress={handleLogin} />
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 20,
  },
});
6

This usually occurs becuase an error occured. Such as the redirect URI being wrong.

But additionally you should not be using someone elses oAuth generator for production use cases as you don’t control all relevant aspects.

So migrate to your own ClientID and retest.