How to trigger the “Save password” web browser dialog without reloading the page?

Question

Is there a way to trigger the save password modal on browser using React without reloading the page ?

I'm using a token based authentication.

Answer 1

To make it work accross browser the only thing I did was to make a network query right after the authentication was successful.

In the render() method :

<form onSubmit={this.submitLogin.bind(this)}>
  <input name="email" type="email" ref={(input) => this.email = input} required={true}/>
  <input name="password" type="password"ref={(input) => this.password = input} required={true}/>
  <button type="submit" name="action">Submit</button>
</form>

The submitLogin method :

submitLogin(event) {
  event.preventDefault();
  fetch('http://localhost:3000/authenticate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({email: this.email.value, password: this.password.value})
  })
  .then(response => response.json())
  .then(response => {
    if (response.error) {
      throw new Error(response.error);
    } else {
      // process the token ...
    }
  })
  .then(() => {
    // Do an authenticated network query
    // ===> Save password modal pops !!!
  })
  .catch(error => {
    console.error(error);
  });
}