Best Practice for iOS Login / Logout With Animation & Without Storyboard

Ogulcan Orhan
May 20, 2018 · 5 min read

As we all know, the scope of mobile application is growing day by day. Even so, login page / module is not trivial at all. So it’s important to accomplish testable, re-usable and user-friendly login screenplay.

This post aims to show best practice in iOS Login / Logout without storyboard segues but with animation.

TL;DR

If you are just interested in project, not the story, here is github repository:

Step-by-step Guide

0. Introduction

Think about a login scenario. For the most applications, login is not a real-part of application. In general login is a step to be taken. And a step that needs to be reapplied when necessary. In example if token is expired or user changed password etc.

So when the application starts:

1. Needed to know if user is logged in or token is not expired or user is not banned etc. It means app should check the related service for these.

2. If user is okay, means logged in, home page should be shown as next page. Or if user is not okay, means should login again, login page should be shown as next page.

3. Set some fake login and it would be better if we use some animation.

These are the steps I want to take. Let’s begin.

1. Check User

You may prefer to save user on UserDefaults. Or token may never expire. Even it’s not recommended, this is not the case. Consequently you may not need to check if user is still logged in. Though I still recommend to follow these steps.

Here is generally recommended method:

In your AppDelegate.swift inside didFinishLaunchingWithOptions, retrieve the user data and decide which view controller should be shown.

This is okay if you just check via UserDefaults or you may consider to use KeychainAccess. I prefer to use KeyChainAccess via pod.

But if you need to call an api, service or similar then this is not such a good method. For two reasons. First, it is too much work to handle exceptions line no-network or http errors. Second, if you would like to animate some views you should consider to have a Splash View.

So, instead of checking user availability on AppDelegate, Yo may prefer to create a SplashViewController. Another tricky point is LaunchScreen and SplashViewController have the same appearance. In this way, users will not notice that app will goes from LaunchScreen to SplashViewController. (In github project I created SplashViewController and made it initial view controller.)

2. Show Login or Main Page

I’ll follow the first step. AppDelegate is fine for this tutorial:

So, in general, an iOS app should have a main interface to determine the initial screen. And it is not useful, if we would like to choose which one will be called first. Let’s forget the initial view controller and set root view controller manually.

So far, here is how AppDelegate should be:

If you run the application, you will this error : ‘NSInternalInconsistencyException’, reason: ‘Application windows are expected to have a root view controller at the end of application launch’.

Means, we did not set the root view controller yet. I would like to share another tricky point here. If you have large project, you probably will have a few storyboards instead of one. And it’s getting hard to manage or call these view controllers.

I recommend you to check this post from Gurdeep Singh:

So for this project, I will create two storyboard: Main and Login. Here is how project navigator looks like:

And as post suggested, let's create a file named AppStoryboard to define each storyboard file. And also UIViewController extension.

We are ready to initiate each view controller in an easier way.

Easy. Right?

3. Login / Logout actions and Animate!

Now, if we run the application, we'll face with login screen cause we don't have any token. Let's implement login and logout IBActions. First we need a method / extension that updates RootViewController.

We will add animation later.

So here is how IBActions look like:

LoginViewController
MainViewController

Each IBAction use keychain to remove or save token and set view controller.

Finally, if we run the application, each button works properly. If we just tap login and restart the app we’ll face with main view controller. Fine. For better, let’s add some animations.

First we need to update UIApplication extension. Here is new version:

Added two UIViewAnimationOptions as login and logout animation. You may consider to change these. And used UIView.transition method to animate root view controller change.

Each argument has default value except viewController.

So if we just call setRootView with passing controller, it will work. As a last step, we just need to update clearLoginTapped to use different animation:

It’s ready to use.


Thank you so much for coming so far!

If you want to check source, please see github repository.

If you liked this article, please share. So people can also read it.
Please get in touch with me via Github, Twitter or LinkedIn.

Ogulcan Orhan

Written by

Another software developer https://github.com/ogulcan/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade