Description
Is this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment:
OS: macOS High Sierra 10.13.3
Node: 9.5.0
Yarn: 1.3.2
npm: Not Found
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.3 => 0.53.3
Target Platform: iOS (11.2)
Steps to Reproduce
My WebView should display a web page that has a cookie authentication. The page expects a session-id cookie acquired on login. To authenticate, I send the login request to the website using fetch().
When the login is successful, I can see that proper cookies are received. On success, I'm starting the WebView.
I'm using 'react-native-cookies' to see the current cookies after I authenticated with fetch. The session id cookie is always refreshed after I loading the page in the WebView.
It works perfectly on Android but not on iOS.
Below is a sample component that does the same thing as my app does. I thought that the problem might be in the configuration of my app, so I created this extremely simple example, and it has the same problem.
Expected Behavior
The web page should display the successful authentication screen.
Actual Behavior
The page redirects to the login page because can't identify the session-Id cookies.
Reproducible Demo
Unfortunately, I can't add a working demo due to security reasons.
If someone can recommend me an API that uses this kind of authentification I will update the example.
Below is the code similar to the one I use in my app.
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
response: null,
}
}
async componentDidMount() {
const response = await this.logIn()
console.log('LogIn completed', response)
this.setState({
response: response
})
}
async logIn() {
const url = 'myurl/login?email=email&password=password'
const headers = {'MyHeader': 'Header text'}
try {
let response = await fetch(url, {
method: 'POST',
headers: headers,
// credentials: 'same-origin',
credentials: 'include',
})
return Promise.resolve(response)
} catch (error) {
return Promise.reject(error)
}
}
render() {
const url = 'myurl/dashboard'
const headers = {'MyHeader': 'Header text'}
return (
<WebView source = {{
uri: url,
headers: headers
}}
/>
)
}
}