How to retrieve the url from a browser in react native? - react-native

Question

I'm quite new to react native and I want to create an Instagram authentication for my app for which I need it's access token. As stated in the docs, I have to visit this link https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token and when the user has authorised and authenticated the app, I'll be redirected to this link http://your-redirect-uri#access_token=ACCESS-TOKEN from where I can grab my access token. But I'm not able to implement this as I'm unaware of the procedure on how to retrieve the token from the url in react-native once I'm redirected to this http://your-redirect-uri#access_token=ACCESS-TOKEN.
I'm using WebBrowser (Expo) to open the links in the app.
PS: I'm using CRNA cli for my react-native-app

Answer 1

From the example it states:
import InstagramLogin from 'react-native-instagram-login'
<View>
<TouchableOpacity onPress={()=> this.refs.instagramLogin.show()}>
<Text style={{color: 'white'}}>Login</Text>
</TouchableOpacity>
<InstagramLogin
ref='instagramLogin'
clientId='xxxxxxxxxx'
scopes={['public_content', 'follower_list']}
onLoginSuccess={(token) => this.setState({ token })}
onLoginFailure={(data) => console.log(data)}
/>
</View>
This suggests the token will be within your App state (either onLoginSuccess/Failure) is called. Access the token from there.

Answer 2

You can achieve Access token by using 'https://localhost' as re-direct url,
use your link in webView
eg:
<WebView
source={{
uri: "https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=https://localhost&response_type=token"
}}
onNavigationStateChange={state =>
this._onChangeNav(state)
}
/>
And add method,
_onLoadAddNewCardView(state) {
console.warn("RES=" + state.url);// Your url with ACCESS TOKEN
let responseString = state.url;
responseString = responseString.replace("https://localhost/?", "");
// Here you will get the ACCESS TOKEN
}