Bid Goodbye to Boring Login Process for iOS Mobile Apps UI UX Design

When you install an app, you wish to explore its features, plugins, settings, UI, etc. But, in no time, a Login Screen pops up that ruins the app’s flow and interaction. As a result, users either lose interest in the app or end up uninstalling it. 

As a developer, you must focus on tweaking and refining the app experience to retain the users and enhance the brand value. It all begins with an engaging design, smooth functionality, and a simple login process. Let’s explore how you can achieve a simple yet informative login feature without making the users feel bored. 

TL;DR

Here you can use Keychain through the keychain manager class. It helps you to store a unique identifier for each user. As a result, you don’t need to ask for any detail such as name, email, and contact no. The best thing: you can use an app without a boring login screen.  

What’s the Need for Login Process?

Let’s focus on getting a Unique Identifier here. The other purpose is not relevant in the present scenario. What if we show you a smart way to get a unique identifier for a user?  

Have a look: 

Here is a function that allows you to generate a unique identifier as a 10 chars string.

class func uniqueId(length: Int) -> String {

    let letters: String = “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”

    return String((0 ..< length).map { _ in letters.randomElement()! })

}

It generates an alpha-numeric string by the length. Why 10? The reason being, it gives enough possibilities even if you don’t have a million users.  

How to Improve Boring Login Process for iOS Apps?

Let’s start with Keychain. What is a keychain? It is a smart way that allows you to store Wi-Fi passwords, website passwords, & certificates. It provides synchronization between Apple products. This saves the day, especially if you are an iPhone or MacBook user.

For an impressive login experience to users, developers should use Keychain to KeychainManager Class. It stores a Unique Identifier for every user. The Keychain doesn’t bother users to provide an email, password, or mobile number. It protects you from the boring login process and delivers a seamless experience between the app and users. 

An iOS code with a KeychainManager:

class KeychainManager {

    // MARK: Properties

    static let shared = KeychainManager()

    subscript(key: String) -> String? {

        get {

            return get(key: key)

        } set {

            DispatchQueue.global().sync(flags: .barrier) {

                self.set(key: key, value: newValue)

            }

        }

    }

}

// MARK: – Private Functions

private extension KeychainManager {

    func set(key: String, value: String?) {

        let query = keychainQuery(key: key)

        let objectData: Data? = value?.data(using: String.Encoding.utf8, allowLossyConversion: false)

        if SecItemCopyMatching(query, nil) == noErr {

            if let dictData = objectData {

                SecItemUpdate(query, NSDictionary(dictionary: [kSecValueData: dictData]))

                return

            }

            SecItemDelete(query)

            return

        }

        if let dictData = objectData {

            query.setValue(dictData, forKey: kSecValueData as String)

            SecItemAdd(query, nil)

        }

    }

    func get(key: String) -> String? {

        let query = keychainQuery(key: key)

        query.setValue(kCFBooleanTrue, forKey: kSecReturnData as String)

        query.setValue(kCFBooleanTrue, forKey: kSecReturnAttributes as String)

        var result: CFTypeRef?

        let status = SecItemCopyMatching(query, &result)

        guard

            let resultsDict = result as? NSDictionary,

            let resultsData = resultsDict.value(forKey: kSecValueData as String) as? Data,

            status == noErr

            else { return nil }

        return String(data: resultsData, encoding: String.Encoding.utf8)

    }

    func keychainQuery(key: String) -> NSMutableDictionary {

        let result = NSMutableDictionary()

        result.setValue(kSecClassGenericPassword, forKey: kSecClass as String)

        result.setValue(key, forKey: kSecAttrService as String)

        result.setValue(kSecAttrAccessibleAfterFirstUnlock, forKey: kSecAttrAccessible as String)

        return result

    }

}

KeychainManager provides a simplified syntax using which you can save the data into the Keychain.

The Login Logic

Just right after the app launch, we need to make sure if the Keychain has userID value. Here userID is key.   

if let userId: String = KeychainManager.shared[“userId”], !userId.isEmpty {

  // found an userId, which means the user already has opened the app before

  // next step: open the home screen or whatever you want

} else {

  // the user launches the app for the first time

  let newUserId = uniqueId(length: 10)

  KeychainManager.shared[“userId”] = newUserId

  // next step: open the home screen or whatever you want

}

You need to ensure whether the userID exists or not as it allows users to execute any action. You can ask the user for contact no., email, and name.  At present, it lets you grab the user and allows users to have a sneak peek inside the app. 

Conclusion

Tedious input fields, confusing navigation, and various suspicious elements in the login screen can force the user to lose interest. We advise you to create a unique identifier for each user at the starting of an app only.  It gives enough time for the user to engage with the app. We hope this article will help you in creating an excellent, data-driven, and interactive login feature.