Adding Auth and Logging out of an iOS Windows Azure Mobile Services App

I recently ran into an issue while working on an iOS app using Windows Azure Mobile Services.  The problem was that I wanted multiple users to be able to log into the same app on the same device, one after another.  Now, if you don’t tell the provider your logging into to Remember You, this isn’t as much of an issue.  If you restart the app or call login again, you’ll be prompted for the user’s credentials.  However, if the first user to login does select the Remember Me checkbox, then when you start the app again or call login again, the app will open the authentication web view and see that the user has already authenticated.  Today I’m going to walk you through adding Twitter authentication to an app and then explain how to properly log a user out. 

Setting up the app

Since I haven’t walked through this process on my site before, I’ll do it now so you can see how to set up a new app and enable authentication in it.  First log in to the Windows Azure portal and select Mobile Services from the left side navigation.  Once you’ve done that, you can select New from the bottom left and navigate from Compute to Mobile Service and select Create:

After that, you’ll be presented with the New Mobile Service wizard.  Here I’ve named my app logouttest and chosen to create a new database:

Next we can either create a new database server or choose an existing one.  I’m going to use an existing one and use the default database name:

After that, click the checkmark and your mobile service will start getting set up.  Less than a minute later, your mobile service should switch from Creating to Ready and you can click on it in the list of your mobile services.  The first page you’ll see is the Getting Started section which enables you to download quickstart applications in the available platforms as well as to get instruction on connecting an existing app to mobile services.  We’re going to bypass this for now and set up authentication first. 

Adding Twitter authentication

First, go to the Identity tab in your app:

Once you’re here, you’ll see several different providers and areas to enter IDs / Keys and Secrets for them.  This is where you enter the information that will enable your app to authenticate through any of these providers.  Today we’ll look at adding Twitter auth but the steps are very similar depending on which provider you choose.  We first need to create a twitter app by going to Twitter’s dev portal.  Once here click the Sign in link in the top right.  This will prompt you for your Twitter credentials.  If you don’t already have an account, create one now.  After logging in, you’ll be at the main developer dashboard.  Hover over your username in the top right and select My Applications:

From there, you’ll click the Create a new application button in the top right.  You’ll then need to enter a Name, Description, Website, and Callback URL.  The name and description can be anything (though they are visible to users so you’ll want to make sure they make sense).  For mine, I’ll enter Logout Mobile Services Test.  The website and callback URL will need to be the URL of your mobile service.  To access this, return to the portal and go to the Dashboard tab:

Once there about midway down on the right you’ll see the URL of your mobile service:

Copy that and return to the Twitter portal and enter it for your website and callback URL.  When you’re done, it should look something like this:

After that, agree to the terms of service, enter the captcha, and save.  You should then see the OAuth Settings for your app:

Copy the key and secret and return to the Identity tab in the mobile services portal.  Enter the key and secret you copied into the Twitter boxes:

After that, hit the save button at the bottom and confirm saving your changes.  Now you can test that authenticating with Twitter will work by going to https://yourmobileservice.azure-mobile.net/login/twitter (after you’ve changed it to use your service’s URL).  You should see a Twitter authentication page appear.

Downloading the quickstart app

Today, to do things quickly, we’ll use the Quickstart application.  Return to the getting started section by clicking the cloud icon under your mobile service’s name:

After this, make sure iOS is chosen for the platform:

Expand the Create a new iOS app section and click the Create TodoItem Table button.  This will take a few seconds to run and will then say the table has been created.  Next click the Download button and download the zip that comes up.  Extract that and open the QuickStart.xcodeproj that is inside of it.  You can run the app now and see that it’s a simple todo list application that allows you to add items and mark them complete (by swiping on the item as though you were going to delete it). 

Adding authentication

Adding auth to our project is very straightforward and only requires us to edit the TodoListController.m file.  Open that file and go to the viewDidLoad method.  At the bottom of this method we see the following code:

We want to comment those lines of code out.  They’re telling our app to pull down all of the todo items as soon as the view loads.   Since we want to authenticate the user before showing any items, we need to handle this a little differently.  After the viewDidLoad method, paste in the following code:

The viewDidAppear method is checking to see if the currentUser property is nil.  If it is, it will then call the login method.  The login method creates a login view controller with the loginViewControllerWithProvider method.  Here we’re passing in twitter but if we wanted the user to login through a different provider we could change what is sent into that method (provided we had configured the other provider in the portal).  After that we present the controller to the user.  When that controller comes back, we either log an error if there was one, or refresh the data like we were before in viewDidLoad.  Finally we dismiss the view controller.  If we run our app now, we should see the Twitter auth window:

Enter the credentials from your twitter account and DON’T hit the Remember me checkbox before signing in.  Provided you entered your credentials correctly, you should see the todo list show up again and pull down the items.  Now return to Xcode and rerun your application.  You should see the Twitter login pop up again.  This is fine because the user didn’t ask to be remembered and we reinstalled the app from Xcode.  Login again and this time hit Remember me.  Now, if you return to the home screen and kill the app (double tap the home button after you’ve returned to the home screen.  Tap and hold down on the Quickstart app.  Finally tap the red minus above the QUickstart icon and hit home again), and then run the app again, you’ll see that it has remembered your user.  However, let’s say you want to handle logging out.

Logging out

To facilitate logging out, we need to add a little bit to our UI.  Open up the MainStoryboard_iPhone.storyboard (we’re just going to change the iPhone version today).  Select the Todo List Controller in the storyboard and go to the Editor menu and select Embed In and Navigation Controller.  This will add a navigation bar to our app and give us a great place to put a logout button.  Drag a bar button item from the UI elements in the bottom right and put it in the top right of your navbar.  We’ll change the Title property of this button to be Logout.  When you’re done, the UI should look like this:

Next open the Assistant Editor  in the top right of Xcode and control + click and drag from the Logout button into your code and create an Action.  This should add a line to your header file that looks like this:

Now we just need to implement this.  Let’s open up the TodoListController.m file and find our logout method.  The first thing we’ll try doing is calling logout on the MSClient:

If you do this and rerun your app, you’ll see that it doesn’t prompt you for your Twitter credentials like you might think it would.  The reason this happens is that when you check the Remember me box, cookies are placed in your app that will be sent across to Twitter in the webview.  This means that the cookies aren’t tied to the specific webview, but instead to your app.  We can see this by changing the logout method to log all of the cookies for our application like this:

Now when we run our app and tap logout we should see the following printed to the console:

That’s a lot of cookies.  Since our webview was already dismissed, we know that these cookies aren’t tied to the specific webview that logged the user in.  So, the only way to solve this problem and fully log out our user, is to get rid of the cookies.  Now, depending on what your app does, you may want to ONLY remove the cookies for Twitter (or whatever auth provider you are using).  For today, we’re going to remove all of the cookies:

Now when we run our app and tap Logout and then run the app again, we should get prompted for our credentials.  In reality, we’d probably want to also clear the items on the screen and give the user an option to login (perhaps by changing the Logout button to Login and then handling it there) but for clarity’s sake, I’ve skipped that in this walkthrough.

Conclusion

Frequently users will never make use of logout functionality (how often do you logout of the Facebook or Twitter app on your phone?).  However, it’s important to provide it in the situations they can (such as wanting multiple people to be able to login after each other).  In the future, we may look at adding this ability into the SDK itself so that when you call logout on your MSClient, it removes the cookies for you.  However, the danger here is that the provider can change their cookies and mess with how this logging out works.  This is also a consideration you should have if you decide to try to only delete the provider specific cookies in your app.  You can view the full app sample code for the application here.  You will have to edit the TodoService.m file and enter your mobile service URL and application key before the application will run correctly (as well as set up the Twitter authentication as described above).  If you need a Windows Azure account, you can sign up for a free trial here.