htmldevisesafarikeychainosx-mavericks

Safari Autofill: Trigger password suggestions in Devise registration form


I have a very standard Rails 4 Application using Devise 3

I want to have the registration form to trigger password suggestions in the current (Mavericks) version of Safari:

use safari suggested password

iCloud Keychain is enabled and I get suggestions on other pages, just my form does not work with that for some reason.

I can't seem to figure out what exactly it takes to enable suggestions.

Here is the form that devise generates:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post">
  <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="SKtqmi1L/BKcTE/Hvlvw1H3ZRH8nd2UNiNnVILuLS/E=" />
  </div>

  <div>
    <label for="user_email">Email</label><br />
    <input autofocus="autofocus" id="user_email" name="user[email]" type="email" value="" />
  </div>

  <div>
    <label for="user_password">Password</label><br />
    <input id="user_password" name="user[password]" type="password" />
  </div>

  <div>
    <label for="user_password_confirmation">Password confirmation</label><br />
    <input id="user_password_confirmation" name="user[password_confirmation]" type="password" />
  </div>

  <div><input name="commit" type="submit" value="Sign up" /></div>
</form>

Solution

  • Apple accepts new autocomplete properties: current-password and new-password

    As outlined in a [PDF] guide made by Apple the autocomplete property now accepts set values to help with this issue.
    See the spec here along with other valid values: https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

        <form method="post" action="/tests/4/register-submit" >
      <label>
        <div>Name</div>
        <input
          name="name"
          placeholder="name"
          autocomplete="name"
          type="text"
          pattern=".{4,}"
          title="Needs to be 4 characters long."
          required
        />
      </label>
      <label>
        <div>Username</div>
        <input
          name="username"
          placeholder="Username"
          type="text"
          autocomplete="username"
          pattern=".{4,}"
          title="Needs to be 4 characters long."
          required
        />
      </label>
      <label>
        <div>Password</div>
        <input
          name="password"
          placeholder="Password"
          type="password"
          autocomplete="new-password"
          required
        />
      </label>
      <input type="submit" value="Register" />
    </form>
    

    That code works due to the autocomplete="new-password" property used. autocomplete="current-password" is also possible for login forms.

    This has been tested as working by the very helpful: @simevidas