14

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>
  • How do I need to change the form to trigger password suggestions

  • are there any usable documentation anywhere about that feature?

1
  • hope someone will answer this question soon. I have tried this without success: seanrucker.com/…
    – DjangoSi
    Commented Dec 30, 2013 at 23:30

3 Answers 3

21
+500

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

2
  • 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.
    – TRT 1968
    Commented Feb 17, 2020 at 14:23
  • 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. Commented Dec 15, 2023 at 0:05
0

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)

1
-2

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.