login using instagram react native

user_15106207 0
Viewed 462

i am building an app with users that they can login, i want the user to be able to connect other accounts and be able to login using them, i have did the facebook login using https://www.npmjs.com/package/react-native-fbsdk-next and everything went well so far, and for google i think i will handle it, but i need to do it using instagram.

long story short can anybody tell me how can i make my users be able to login with instagram. Thank you in advance.

instagram-api react-native reactjs facebook-javascript-sdk frontend
1 Answers

You could use react-native-instagram-login which is developed for this purpose. Notice that you need to register your app via a facebook developer account first in order to use this functionality.

The maintainers made a short video introduction on how to set everything up here.

In summary, the basic usage is provided in an example on their Github page and I include it here for completeness.

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import InstagramLogin from 'react-native-instagram-login';
import CookieManager from '@react-native-community/cookies';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: '',
    };
  }

  setIgToken = (data) => {
    this.setState({ token: data })
  }

  onClear() {
    CookieManager.clearAll(true)
      .then((res) => {
        this.setState({ token: null })
      });
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          style={styles.btn}
          onPress={() => this.instagramLogin.show()}>
          <Text style={{ color: 'white', textAlign: 'center' }}>Login now</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.btn, { marginTop: 10, backgroundColor: 'green' }]}
          onPress={() => this.onClear()}>
          <Text style={{ color: 'white', textAlign: 'center' }}>Logout</Text>
        </TouchableOpacity>
        <Text style={{ margin: 10 }}>Token: {this.state.token}</Text>
        {this.state.failure && (
          <View>
            <Text style={{ margin: 10 }}>
              failure: {JSON.stringify(this.state.failure)}
            </Text>
          </View>
        )}
        <InstagramLogin
          ref={ref => (this.instagramLogin = ref)}
          appId='your-app-id'
          appSecret='your-app-secret'
          redirectUrl='your-redirect-Url'
          scopes={['user_profile', 'user_media']}
          onLoginSuccess={this.setIgToken}
          onLoginFailure={(data) => console.log(data)}
        />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  btn: {
    borderRadius: 5,
    backgroundColor: 'orange',
    height: 30,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
  }
});
user_149692810
Related