iOS 12 Password Tools: Improving User Security and Experience

Learn how iOS password and security tools can help you generate and securely save passwords, and synchronize passwords between your mobile apps and website. By Lyndsey Scott.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

Saving Your Passwords

There’s just one last piece of the puzzle: automatically saving your newly created credentials. As it turns out, for iOS to recognize that it needs to save a new set of credentials, you must:

  1. Remove the Username and Password fields from the View hierarchy after sign up occurs.
  2. Only clear the Username and Password fields after they’re no longer in the View hierarchy.

Since your app dismisses the sign-up view completely without deleting any fields, it already meets these requirements. Great! But how do you prevent your keychain from saving the credentials of a failed or incomplete sign-in attempt? Good question!

Open SignupViewController.swift, scroll down to viewWillDisappear(_:) and find this code snippet:

if API.token == nil {
  usernameField.text = nil
  passwordField.text = nil
} else {
  API.logout()
}

Here’s what this code does:

When a user signs up successfully, the server returns a token. UltraMotivator’s API.swift class stores this in the variable API.token.

If API.token is nil when the user navigates back to the login view, the sign-up action was not completed. In this case, you set the text fields to nil before leaving the View hierarchy, i.e., in viewWillDisappear(_:). This prevents these invalid credentials from being saved to the user’s keychain.

If API.token is not nil, the sign-up action has been completed successfully. In this case, you log out, leaving the fields’ text intact. iOS will then automatically save those credentials to the user’s keychain.

Checking Under the Hood

To confirm that your iOS password rules work, run the app on your iOS device (not a simulator) and sign up with a few different usernames. Open Keychain Access on your Mac. Select the login keychain, the Passwords category, then search your login passwords for your web app domain.

Keychain Access: iOS passwords stored for UltraMotivator

To view any of the passwords associated with your listed usernames, select it and tap the show password checkbox. Enter your keychain/computer password when prompted, and the password should appear.

Keychain Access: revealing a stored iOS password

According to my keychain, my usernames’ corresponding passwords are “rehnep0xasravezpUg”, “Qyddehziwzek2syhda” and “Qyddehziwzek2syhda.” All three of these conform to the custom password rules defined for the app.

To confirm that credentials aren’t saving when they shouldn’t, enter a username and password but press the Back button without signing up. Check Keychain Access’s login passwords once again to confirm that iOS didn’t save these invalid credentials to the keychain.

Once you’re satisfied that your credentials are saving as intended, return to your iOS device and attempt to log in to the app. Begin entering your username. Your username(s) should either appear in the QuickType bar automatically or after you tap the key symbol on its right side. Select your username and authenticate your keychain access using Touch ID, Face ID or device passcode when prompted. Your iOS password and username will autofill accordingly.

Images showing successful login into UltraMotivator

Submit those credentials and you should now see a two-step authentication screen:

UltraMotivator: 2-step authentication screen

Since two-step authentication is not set up on the back end, don’t wait for a code to automatically come through: You’ll have to test this feature manually.

To determine whether or not a text message contains a security code, iOS scans incoming texts for words like “code” or “passcode” with code string. So, to test this feature, keep Ultra Motivator open and text yourself via Apple’s desktop Messages app. Send yourself a code: “Your code is 1234.” The QuickType bar should then present you with the option to autofill “1234″ into the code field.

UltraMotivator: The QuickType bar presenting a 2-step authentication code

Note: iOS can recognize words equivalent to “code” or “passcode” in all supported iOS languages.

Tap Submit to display the Motivational view controller.

UltraMotivator, displaying a random motivational code

Password Ninja Enlightenment Attained!

Mighty congratulations! You, my friend, are a true and noble Ninja Password Warrior, of the order Geekii Securitus Extremicus!!! (Electronic pocket protector not included.)

iOS Password

Take a moment to get thoroughly inspired by your random motivational quote, then open Safari on your iOS device. Navigate to your login web page by replacing “[your domain]” with your actual domain in the following url:

https://[domain name]/login

Upon tapping the Username field, your web page should present you with the same credentials that you saved during sign up in your iOS app.

The web app login page, with Safari offering to enter the iOS password and username entered into the app

Likewise, if you create a new account via Safari at https://[domain name]/register and return to the iOS app to login, those credentials should autofill.

Where to Go From Here?

Whew! That was a lot of work, but you’ve achieved a lot for your efforts. You’ve now implemented iOS password autofill, generation and synchronization. The login action to your app is now secure, easy to use and integrated directly with your website!

If you haven’t already done so, download the tutorial materials using the Download Materials button at the bottom or top of this tutorial. Look through the final project to see how it compares to your version.

Check out WWDC 2017’s Introducing Password AutoFill for Apps video and WWDC 2018’s Automatic Strong Passwords and Security Code AutoFill video to gain a broader understanding of the features you just implemented.

Have any questions, comments or suggestions? Join the forum discussion below!