Display Login

A dead simple tutorial on how to present a user login with different providers in three lines of code.

Login Module

Welcome to the module. You are in the right place if you are looking to integrate a login form in your app. There two main configurations:

  • List of providers for login. Apple is on by default, since Apple review process requires an Apple login option to always be present. Additionally, you can decide whether you wish to add Google and/or Facebook login.
  • Request user notification access. Often in time, this is the best moment to request access to notification.

Setup

Apple

There is only one step needed to allow users to login with Apple. In your app targer, under Signing and Capabilities, use the + button to add Sign in with Apple. You are all set.

Facebook

You can optionally enable Facebook login.

Step 1. Setup a new Facebook app in the developer consoles

  • Follow instructions here
  • Just create an app and configure the app, ignore any codes or suggested snippets, we got you covered!

Step 2. Add Facebook login SDK

  • Go to File -> Add Package Dependency.
  • In the search bar, enter this URL.
  • Choose the version you'd like to install.
  • Click Add Package.

Step 3. Link your iOS app with your Facebook app

  • Open the Info.plist for your app
  • Add the snippet of xml below to the file
<key>FacebookAppID</key>
<string>YOUR APP ID</string>
<key>FacebookClientToken</key>
<string></string>
<key>FacebookDisplayName</key>
<string>App Name</string>
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>fb[YOU APP ID]</string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Viewer</string>
		<key>CFBundleURLName</key>
		<string>YOUR APP BUNDLE IDENTIFIER</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>travi</string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>Bundle ID</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>YOUR APP BUNDLE IDENTIFIER</string>
		</array>
	</dict>
</array>

Step 4. Setup Facebook Login in AppDelegate In your AppDelegate::didFinishLaunchingWithOptions just adds the following line:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    
    ApplicationDelegate.shared.application(application, didFinishLaunchingWithOptions: launchOptions)
    return true
}


Google

You can optionally enable Google login.

Step 1. Setup a new Google OAuth in the developer consoles

  • Follow instructions here
  • Just create an app and configure the oauth, ignore any codes or suggested snippets, we got you covered!

Step 2. Add Google login SDK

  • Go to File -> Add Package Dependency.
  • In the search bar, enter this URL.
  • Choose the version you'd like to install.
  • Click Add Package.

Step 3. Link your iOS app with your Google OAuth

  • Open the Info.plist for your app
  • Add the snippet of xml below to the file
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>YOUR_IOS_CLIENT_ID</string>
		</array>
	</dict>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
		</array>
	</dict>
</array>

Step 4. Setup Google Login in AppDelegate In your AppDelegate add the following snippet

func application(
  _ app: UIApplication,
  open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
  var handled: Bool

  handled = GIDSignIn.sharedInstance.handle(url)
  if handled {
    return true
  }

  // If not handled by this app, return false.
  return false
}

Usage

At any point of your app, use the following snippet to load the login view:

let vc = LoginControllerFactory.init(shouldRequestNotificationAccess: true, googleLogin: true, facebookLogin: true, shouldShowSkipButton: true).build()
vc.modalPresentationStyle = .overCurrentContext
self.present(vc, animated: true)

The UI will dynamically add the needed components according to your initial config:

  • shouldRequestNotificationAccess
  • googleLogin
  • facebookLogin
  • shouldShowSkipButton