Twitch SignIn & get user information in Expo using expo-auth-session.
Integrate Twitch sign in and fetch signed user information using expo-auth-session.
To integrate Twitch sign in and to fetch user information of Twitch users follow the below steps.
Step 1: Sign in on the Twitch developer account. https://dev.twitch.tv/login
Once done with this procedure you will get ClientID.
Step 2: Run this command expo install expo-auth-session
Step 3: Add Scheme in the App.json file. {
In order to be able to deep link back into your app, you will need to set a
"expo": {
"scheme": "myapp"
}
}scheme
in your project app.config.js
, or app.json
, and then build your standalone app (it can't be updated with an OTA update). If you do not include a scheme, the authentication flow will complete but it will be unable to pass the information back into your application and the user will have to manually exit the authentication modal (resulting in a cancelled event).
Step 4:
import * as AuthSession from 'expo-auth-session';// To fetch twitch user information
const getTwitchUserInformation = twitchToken => {
const url = 'https://api.twitch.tv/helix/users';
const header = {
Authorization: `Bearer ${twitchToken}`,
'Client-ID': SOCIAL_CONSTANTS.TWITCH_CLIENT_ID,
};fetch(url, {
method: 'GET',
headers: header,
})
.then(response => response.json())
.then(response => {
const userResponse = response && response.data[0];
console.log(userResponse);
})
.catch(error => {
console.log(error);
});
};const signInWithTwitch = async () => { const redirectUrl = AuthSession.getRedirectUrl(); const authUrl = `https://id.twitch.tv/oauth2/authorize?client_id=${ENTER_CLIENT_ID_HERE}&redirect_uri=${redirectUrl}&response_type=token&scope=user:edit+user:read:email&force_verify=true` const {type, params} = await AuthSession.startAsync({authUrl}); if (type === 'success') { const {access_token, token_type} = params; getTwitchUserInformation(access_token); }};