Set up auth with Facebook Login in our iOS app

We are now going to add Facebook metadata & URL scheme to the info.plist of our iOS project, add AWS Mobile SDK dependencies, and integrate the AWSMobileClient for auth, and then implement the auth UI provided by the mobile SDK.

Add Facebook metadata and URL scheme to your Xcode project info.plist:

Set up AWS Mobile SDK dependencies (Cocoapods)

In this example, I’m going to use Cocoapods for dependency management as this is currently the recommended way to integrate AWS SDK into an iOS project. More info on Cocoapods. If you don’t already have pods in your app, you can simply run a $ pod init and it’ll create a fresh Podfile for you. Once you have a Podfile, add the following dependencies to that file.

$ pod init

In your Podfile, add the following dependencies to that file. This includes the dependencies for 1. Cognito User Pools (basic auth) and 2. Facebook Login and 3. drop-in Auth UI for authentication both User Pools and Facebook in one interface.

Pull the SDK libraries into your project:

$ pod install --repo-update

Integrate the awsconfiguration.json file into your iOS project

When using the AWS Amplify CLI to provision backend resources, it produces a file called awsconfiguration.json in the root of your iOS Xcode project. This file contains a description of the resources that you can access via your app and is updated (synced) with your project anytime a resource is added, updated, or deleted by the Amplify Toolchain. This auto-update of the configuration file is one of the great benefits of using the Amplify CLI to provision AWS resources from your local mobile development environment.

You only need to add the awsconfiguration.json file to your Xcode project just once. You can do this by dragging it to your Finder in the Xcode project organizer.

You will be prompted if you want to copy the file. UNCHECK THE COPY ITEMS BOX. The AWS Amplify CLI updates this file when things change. If you check the Destination box, then your project may not receive the updates if copied. If you uncheck the box, this file is updated whenever you modify the project resources via the Amplify CLI.

Initialize AWSMobileClient in Your ViewController

In your root UIViewController or related screen that you want users to sign-up or sign-in, add the following code referenced in the image below:

1. Add the import from line 2 2. Add initializeAWSMobileClient() call to bottom of your viewDidLoad() as shown on line 9 3. Add the new function initializeAWSMobileClient() from line 12–45 to your view controller.

Note: The showSignIn() function does not exist yet. We’ll add that in the next step.

Add the drop-in Auth UI to your ViewController

Add the showSignIn() function to the same View Controller as above. This is the drop-in auth UI that allows your users to sign-up, sign-in, and reset their passwords. You can customize the background color and image to match your branding. This function is called when the user is signed out or the refresh token has expired for the user. Note: The refresh token for Facebook is usually good for 60 days with no activity and the user pools refresh token is developer specific from 1 day to 365 days.

Add the new function showSignIn() from line 12–23 to your view controller.

Warning. A UINavigationController is required: The auth UI as part of the AWS Mobile SDK and it requires that your app have a UINavigationController.

To add a UINavigationController to your app, if one does not exist:

Add a UINavigationController to your iOS app: From your Xcode project, select the ViewController in Storyboard then select menu options: Editor->Embed In -> Navigation Controller.

Build and run your app

You should see the AWS SDK pre-built sign-in UI for your app as the user is not initially authenticated. The iOS SDK provides a standard default UI that now allows the user to sign in via Facebook along with register (sign-up), trigger “forgot password” functionality, and of course sign-in capabilities built-in along with the default username/email and password fields.

Click on the Continue with Facebook button. The user is then redirected and asked to sign in with their Facebook credentials. Once authenticated, the UI dialog will disappear and you should now see your view controller screen.

AWS Mobile SDK — Auth UI for Users Pools & Facebook

At this point, the app user is authenticated through Facebook and the user now assumes the authenticated IAM role and is granted permissions associated with that role, however, that role still has an empty access policy. This is the same process we went through when the user authenticated with username/password via Cognito User Pools. This time, the user authenticated with Facebook as an identity provider for Cognito Identity Pool.

Final Thoughts

Amazon Cognito is the default choice for both authenticated and unauthenticated flows for all mobile apps connecting to AWS resources. If you don’t require a login or use any other identity provider, such as Facebook, use Cognito Federated Identities (Cognito Identity Pool).

For authenticated users via Facebook, the mobile SDK will pass (and act as the identity manager) the authenticated user token to your Cognito Identity Pool in exchange for temporary AWS credentials for that user to make calls to your AWS resources. User access is then defined by the IAM authenticated role. If the user does not authenticate, Cognito Identity Pool still grants AWS credentials and the user’s access is defined by the IAM unauthenticated role.

Time to move onto Google authentication!

Resources

AWS Amplify (using the Amplify CLI to cloud enable our app)

Amazon Cognito User Pool (used for basic auth)

Amazon Cognito Identity Pool (used for federating basic auth and Facebook Login)