Safari Autofill: Trigger password suggestions in Devise registration form

Question

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:

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>

• How do I need to change the form to trigger password suggestions

• are there any usable documentation anywhere about that feature?

Hydrogeology

hope someone will answer this question soon. I have tried this without success: seanrucker.com/… – Stapler

Answer 1

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

Milore

Lovely answer. Annoyingly the "rules" for creating a strong password using the Pattern regex don't seem to clue Apple's password generator in to creating a valid password. They have their own markup which you can find and test here: developer.apple.com/password-rules Another annoying habit of Safari is that if it once suggests a password for a website, it doesn't present the "Suggest a password" option ever again for the same site. Even hitting the Don't Use button, it repeatedly presents the same suggestion over and over again. I think there's still a way to go for password autogen. – Recidivate

Jumping in on this since it's a top google result for "Submit" with Apple password autofill - is there any known way to have a submit button autofire when those "autocomplete=current-password"/"username" forms are successfully populated by Apple's Safari password extension/integration? I love the idea of a single "click" (bio verification) not only giving username/password but also submitting the form. I think I've seen it on some websites, but I would love to code it myself. – Brunildabruning

Answer 2

I've tested your code, and it successfully suggested a password. So you have a problem other than your HTML.

Ensure the following are true:

1. Your server is properly outputting your web page as HTML content, with response code 200. (You can see this using any browser's developer tools.)

2. You're on the latest version of Safari (7.+)

3. AutoFill usernames and passwords is checked in Safari > Preferences > Passwords.

4. Try removing all saved passwords for your domain in Safari.

5. You have Keychain checked On in iCloud (System Preferences > iCloud)

Fray

Why doesn’t it work on these forms? password-generation-test-cases.herokuapp.com – Scholem

Answer 3

Maybe adding an autocomplete="on" attribute to the form or input-tag works. http://www.w3schools.com/HTML/html5_form_attributes.asp

Theressathereto