https://github.com/hungdev/react-native-instagram-login
a react native instagram login component (support android & ios). Pull requests are welcome!
https://github.com/hungdev/react-native-instagram-login
android auth authentication instagram instagram-api instagram-login instagram-oauth ios oauth react-native
Last synced: 3 months ago
JSON representation
a react native instagram login component (support android & ios). Pull requests are welcome!
- Host: GitHub
- URL: https://github.com/hungdev/react-native-instagram-login
- Owner: hungdev
- Created: 2017-06-22T07:27:48.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-17T20:34:30.000Z (over 1 year ago)
- Last Synced: 2025-09-27T20:48:48.476Z (4 months ago)
- Topics: android, auth, authentication, instagram, instagram-api, instagram-login, instagram-oauth, ios, oauth, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-instagram-login
- Size: 1.23 MB
- Stars: 190
- Watchers: 7
- Forks: 106
- Open Issues: 34
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React Native Instagram login
[](https://www.npmjs.com/package/react-native-instagram-login)
[](https://www.npmjs.com/package/react-native-instagram-login)
### 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](https://github.com/hungdev/react-native-instagram-login/tree/v1)
## [Here is a video tutorial](https://www.youtube.com/watch?v=Xw-mCiyUMgE)
## Install
```js
npm install react-native-instagram-login react-native-webview --save
```
Then link the native iOS package:
```js
npx pod-install
```
### Setup (React Native < 0.60.0):
### Automatic (recommended)
```
react-native link
```
with manual, [see more](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md)
## How to get `appId`, `appSecret` of instagram?
> [Simple setup](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started), 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:
```javascript
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 (
insRef.current.show()}>
Login now
Logout
Token: {token?.access_token}
setToken(token)}
onLoginFailure={(data) => console.log(data)}
/>
);
}
const styles = StyleSheet.create({
btn: {
borderRadius: 5,
backgroundColor: 'orange',
height: 30,
width: 100,
justifyContent: 'center',
alignItems: 'center',
}
});
```
#### For Class component
```javascript
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 (
this.instagramLogin.show()}>
Login now
this.onClear()}>
Logout
Token: {this.state.token}
{this.state.failure && (
failure: {JSON.stringify(this.state.failure)}
)}
(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
/>
);
}
}
const styles = StyleSheet.create({
btn: {
borderRadius: 5,
backgroundColor: 'orange',
height: 30,
width: 100,
justifyContent: 'center',
alignItems: 'center',
}
});
```
## Props
| Property | Type | Description |
| -------------- | ---------------- | --------------------------------------------------------- |
| appId | PropTypes.string | Instagram client_id |
| appSecret | PropTypes.string | Instagram client_secret |
| responseType | PropTypes.string | 'code' or 'token', default 'code' |
| scopes | PropTypes.array | Login Permissions, default ['user_profile', 'user_media'] |
| redirectUrl | PropTypes.string | Your redirectUrl |
| incognito | PropTypes.boolean| Incognito true/false |
| onLoginSuccess | PropTypes.func | Function will be call back on success |
| onLoginFailure | PropTypes.func | Function will be call back on error |
| onClose | PropTypes.func | Function will be call back on close modal |
| modalVisible | PropTypes.bool | true or false |
| renderClose | PropTypes.func | Render function for customize close button |
| containerStyle | PropTypes.object | Customize container style |
| wrapperStyle | PropTypes.object | Customize wrapper style |
| closeStyle | PropTypes.object | Customize close style |
| language | PropTypes.string | Override language of modal,alpha-2 eg:"es","tr" etc. |
## Server side explicit: [Discuss here](https://github.com/hungdev/react-native-instagram-login/issues/54)
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](https://github.com/hungdev/react-native-instagram-login/blob/master/Instagram.js#L71-L88)
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
```js
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](https://github.com/AlbertoIHP) for v2.
This project exists thanks to all the people who contribute. [[Contribute]](https://github.com/hungdev/react-native-instagram-login/graphs/contributors).
## Pull request
Pull requests are welcome!