My app uses Instagram OAuth, it opens the Instagram login page from this url:
"https://www.instagram.com/oauth/authorize/client_id=${clientId}&redirect_uri=${redirectUrl}&response_type=${responseType}&scope=${scopes.join('+')}"
Here the user can enter their username and password and press the login button. However the first time they enter Instagram throws off an error. The second time the link is opened, it has the users data and navigates the user to the app's home screen.
Error
This page could not be loaded. If you have cookies disabled in your browser, or you are browsing in private mode, please try enabling cookies or turning off private mode, and then retrying your action.
Here is the webView render function;
render() {
const { uri } = this.state;
if(this.state.loading){
return <SpinnerComponent size={'small'}/>;
}
return (
<View style={{ flex: 1 }}>
<WebView
startInLoadingState
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
source={{ uri }}
style={{flex: 1}}
/>
</View>
);
}
Note
I am using react-native-cookie package, to delete cookies belonging to Instagram when the user logs out of the app. This is most probably the issue. However I cannot delete this package from my code base because it is a necessary part of logging out procedure. To counter this I have implemented the below code in the WebView's "componentDidMount" LifeCycle Method, to get cookies from the site. But it does not help my case.
Cookie.get(
https://www.instagram.com);
Here is a question on stackoverflow experiencing the exact same problem. However the solution given is in Obj-C or Swift, both of which I have no knowledge of. I haven't been able to find a solution for React Native.
