Twitch SignIn & get user information in Expo 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

click on register your application
enter oAuth Redirection URLs https://auth.expo.io/@your-username/your-app-slug

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.
{
"expo": {
"scheme": "myapp"
}
}
In order to be able to deep link back into your app, you will need to set a 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); }};

For more information follow Twitch developer’s doc site: https://dev.twitch.tv/docs/

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

LeetCode Algorithm Challenges: Valid Palindrome

Project Week Comes to an End

A Step Towards Simplified Querying in NodeJS

JS: Promises, async/await, and functional programming.

Three ways to Configure TailwindCSS with Vanilla HTML & JS

Becoming a Web Developer

Node.js | Inspecting an Apollo.js Server

Angular — Using service as a single source of truth for highly coupled pages

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rakesh Medpalli

Rakesh Medpalli

More from Medium

React Native Development In Healthcare -Benefits, and Importance

Ads Alert! Integration of Huawei Ads Kit in Application using React Native

Mobile App Development: React Native Vs Native

Expo + react-native-firebase