2.0.6 • Published 9 months ago

react-native-instagram-login v2.0.6

Weekly downloads
767
License
MIT
Repository
github
Last release
9 months ago

React Native Instagram login

npm version npm downloads

IMPORTANT NOTES:

react-native-instagram-login version 2 switches to the Instagram Graph API.

If you want to use old version 1, please read docs

Here is a video tutorial

Install

npm install react-native-instagram-login react-native-webview --save

Then link the native iOS package:

npx pod-install

Setup (React Native < 0.60.0):

Automatic (recommended)

react-native link

with manual, see more

How to get appId, appSecret of instagram?

Simple setup, you only need to complete first 3 steps.

Then go to Instagram> Basic Display> Instagram App ID field

This is going to give you an access_token, which one can be used on the new Graph Api, go to https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media for docs.

Usage:

For function component:

import React, { useState, useRef } 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 function App() {
  const insRef = useRef();
  const [token, setToken] = useState(null);

  const onClear = () => {
    CookieManager.clearAll(true)
      .then((res) => {
        setToken(null);
      });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity
        style={styles.btn}
        onPress={() => insRef.current.show()}>
        <Text style={{ color: 'white', textAlign: 'center' }}>Login now</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={[styles.btn, { marginTop: 10, backgroundColor: 'green' }]}
        onPress={onClear}>
        <Text style={{ color: 'white', textAlign: 'center' }}>Logout</Text>
      </TouchableOpacity>
      <Text style={{ margin: 10 }}>Token: {token}</Text>
      <InstagramLogin
        ref={insRef}
        appId='your-app-id'
        appSecret='your-app-secret'
        redirectUrl='your-redirect-Url'
        scopes={['user_profile', 'user_media']}
        onLoginSuccess={(token) => setToken(token)}
        onLoginFailure={(data) => console.log(data)}
      />
    </View>
  );
}

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

For Class component

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) => {
    console.log('data', data)
    this.setState({ token: data.access_token })
  }

  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'
          incognito={false}
          scopes={['user_profile', 'user_media']}
          onLoginSuccess={this.setIgToken}
          onLoginFailure={(data) => console.log(data)}
          language='tr' //default is 'en' for english
        />
      </View>
    );
  }
}


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

Props

PropertyTypeDescription
appIdPropTypes.stringInstagram client_id
appSecretPropTypes.stringInstagram client_secret
responseTypePropTypes.string'code' or 'token', default 'code'
scopesPropTypes.arrayLogin Permissions, default 'user_profile', 'user_media'
redirectUrlPropTypes.stringYour redirectUrl
incognitoPropTypes.booleanIncognito true/false
onLoginSuccessPropTypes.funcFunction will be call back on success
onLoginFailurePropTypes.funcFunction will be call back on error
onClosePropTypes.funcFunction will be call back on close modal
modalVisiblePropTypes.booltrue or false
renderClosePropTypes.funcRender function for customize close button
containerStylePropTypes.objectCustomize container style
wrapperStylePropTypes.objectCustomize wrapper style
closeStylePropTypes.objectCustomize close style
languagePropTypes.stringOverride language of modal,alpha-2 eg:"es","tr" etc.

Server side explicit: Discuss here

If you dont want to expose appSecret on the client, you dont need to pass appSecret props on client. And onLoginSuccess will callback a code.

On your server (Backend) you have to call an api https://api.instagram.com/oauth/access_token with method post to exchange the code for a token, and params:

client_id: your-app-id
client_secret: your-app-secret
grant_type: 'authorization_code'
redirect_uri: your-redirect-url
code: code-get-from-onLoginSuccess-props

For example

The response will look like this:

{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

Logout

To logout use clear cookies by using https://github.com/react-native-community/cookies

import CookieManager from '@react-native-community/cookies';

  logout() {
    CookieManager.clearAll(true)
      .then((res) => {
        console.log('CookieManager.clearAll =>', res);
        this.setState({ token: '' })
      });
  }

Contributing

Special thanks @AlbertoIHP for v2.

This project exists thanks to all the people who contribute. [Contribute].

Pull request

Pull requests are welcome!

2.0.6

9 months ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago