Customizing the Account Kit UI for iOS

The user interface for the login screens is provided by the SDK. You can customize this user interface to match your app. For guidelines on customizing the UI, see Customize the UI in Best Practices.

Account Kit offers two ways to customize the the user interface:

  • Basic UI with three skins and limited customizability
  • Advanced UI with the ability to customize individual elements

If you already customized your UI with version 4.19.0 or earlier of the SDK, your customization will continue to work, but you can easily migrate your customization to the new the new SDK. For more information, see Migrating Your Customization.

Basic UI

The basic UI offers three skins to choose from.

For each skin you can optionally add a background image. If you add a background image, you can also choose a color and the background tint opacity as a value between 55-85%. The background tint also determines the color of the disclosure text, whether the text appears in black disclosure on a white background, or white on a black background.

The skin and the options you choose control the appearance of phone-number and email screens and all other screens in the login flow.

Classic Skin

The following images of email and SMS screens show the classic skin without a background image, with a background image and a white tint, and with an image and a black tint.

The other screens in the login flow follow the skin and options you choose. For example, the following verification screen represents the classic skin with a background image and a white tint.

Translucent Skin

The following pictures illustrate the translucent skin without a background image, with an background image and a white tint, and with an image and a black tint.

Contemporary Skin

The following pictures illustrate the contemporary skin without a background image, with an background image and a white tint, and with an image and a black tint.

The following code shows how to create a skin without a background image.

// Constructor for a skin without a background image

// init AccountKit
AKFAccountKit *accountKit;
accountKit = [[AKFAccountKit alloc] initWithResponseType:AKFResponseTypeAccessToken];

// Set view controller:
UIViewController<AKFViewController> *viewController;
// --either-- Phone number login:
viewController = [accountKit viewControllerForPhoneLoginWithPhoneNumber:nil
                                                                  state:nil]
// --or-- Email login:
viewController = [accountKit viewControllerForEmailLoginWithEmail:nil
                                                            state:nil]

// skinType can be AKFSkinTypeClassic, AKFSkinTypeTranslucent, or AKFSkinTypeContemporary

viewController.uiManager = [[AKFSkinManager alloc]
                            initWithSkinType:<#(AKFSkinType)#>
                            primaryColor:<#(nullable UIColor *)#>]
// -- or --
// Constructor using the default theme color
viewController.uiManager = [[AKFSkinManager alloc]
                            initWithSkinType:<#(AKFSkinType)#>]

The following codes shows how to create a skin with a background image.

// Constructor for a skin with a background image

// init AccountKit
AKFAccountKit *accountKit;
accountKit = [[AKFAccountKit alloc] initWithResponseType:AKFResponseTypeAccessToken];

// Set view controller:
UIViewController<AKFViewController> *viewController;
// --either-- Phone number login:
viewController = [accountKit viewControllerForPhoneLoginWithPhoneNumber:nil
                                                                  state:nil]
// --or-- Email login:
viewController = [accountKit viewControllerForEmailLoginWithEmail:nil
                                                            state:nil]

// skinType can be AKFSkinTypeClassic, AKFSkinTypeTranslucent, or AKFSkinTypeContemporary
// backgroundTint is either AKFBackgroundTintWhite or AKFBackgroundTintBlack
// tintIntensity is a number between 0.55 and 0.85
viewController.uiManager = [[AKFSkinManager alloc]
                            initWithSkinType:<#(AKFSkinType)#>
                            primaryColor:<#(nullable UIColor *)#>
                            backgroundImage:<#(nullable UIImage *)#>
                            backgroundTint:<#(AKFBackgroundTint)#>
                            tintIntensity:<#(CGFloat)#>]

Advanced UI

The advanced UI gives you the ability to customize many elements of the interface independently. With the advance UI, you can customize the following elements.

Note: Please don't obscure any elements of the Account Kit user interface when you adjust the text and background colors. This is required by our platform policy.

The following table provides the full set of customizable options.

Property Name Description

backgroundColor

Color for the background of the UI if an image is not used

buttonBackgroundColor

Color for the background of the buttons

buttonBorderColor

Color for the borders of buttons

buttonTextColor

Color for the text on buttons

iconColor

Color for icons

inputBackgroundColor

Color for the background of the input boxes.

inputBorderColor

Color of the input boxes' border

inputTextColor

Text color of the input text for Phone Number and Confirmation Code

statusBarStyle

Style for the status bar at the top

textColor

Color for text

Note: If you specify a backgroundImage, make sure your backgroundColor is at least partly transparent (alpha < 1.0), or your background image will not be visible.

Using the Advanced UI Manager

Account Kit offers deeper customization of the login UI by allowing you to define an Advanced UI manager. You do this by creating a class that implements the AKFAdvancedUIManager interface and implementing individual methods to return custom views to be inserted in the login UI. For each view you want to customize, you must provide customizations appropriate to the current state of the login flow.

Create a new interface in MyUIManager.h.

#import <AccountKit/AccountKit.h>

@interface MyUIManager : NSObject <AKFUIManager>

@property (nonatomic, assign, readonly) AKFButtonType confirmButtonType;
@property (nonatomic, assign, readonly) AKFButtonType entryButtonType;
@property (nonatomic, copy) AKFTheme *theme;

@end

The AKFUIManager protocol lets you define the following customization points. This is how the protocol is defined.

@protocol AKFActionController <NSObject>
- (void)back;
- (void)cancel;
@end

@protocol AKFUIManager <NSObject>
@optional
- (nullable UIView *)actionBarViewForState:(AKFLoginFlowState)state;
- (nullable UIView *)bodyViewForState:(AKFLoginFlowState)state;
- (nullable UIView *)footerViewForState:(AKFLoginFlowState)state;
- (nullable UIView *)headerViewForState:(AKFLoginFlowState)state;
- (void)setActionController:(nonnull id<AKFActionController>)actionController;
- (void)setError:(nonnull NSError *)error;
- (AKFButtonType)buttonTypeForState:(AKFLoginFlowState)state;
- (AKFTextPosition)textPositionForState:(AKFLoginFlowState)state;
- (nullable AKFTheme *)theme;
@end

Each UIView returned by these methods corresponds to a section on the UI.

If you do not wish to customize a section of the UI, simply either do not implement the method, or return nil to fall back to the default view for that portion of the screen.

The AKFActionController is the means to communicate back to Account Kit whether we want to go back to the previous screen or cancel the login flow. You'll need to maintain a handle to this action controlled inside your UI manager if you wish to perform these actions.

The following code shows how to implement an advanced UI manager.

@implementation AdvancedUIManager
{
  id<AKFActionController> _actionController;
}

- (void)setActionController:(id<AKFAdvancedUIActionController>)actionController
{
  _actionController = actionController;
}

- (AKFButtonType)buttonTypeForState:(AKFLoginFlowState)state
{
  switch (state) {
    case AKFLoginFlowStateCodeInput:
      return self.confirmButtonType;
    case AKFLoginFlowStateEmailInput:
    case AKFLoginFlowStatePhoneNumberInput:
      return self.entryButtonType;
    default:
      return AKFButtonTypeDefault;
  }
}

@end

This example changes the text on the "submit" button of the email or phone number input to be entryButtonType and for the code verification screen to be confirmButtonType, and leaves all the other buttons to be the default value for Account Kit.

Similarly, you may wish to customize the placement of the text or modify the theme or show a different header and footer on some of the screens. To do so you need to implement the corresponding UIView methods highlighted above.

You may also modify the action bar with different actions.

@implementation AdvancedUIManager

// definition of other methods from before

- (UIView *)actionBarViewForState:(AKFLoginFlowState)state
{
  UIView *view = [self _viewForState:state suffix:@"Action Bar" intrinsicHeight:64.0]; // Place holder UIView
  view.contentInset = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0);
  [view addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(_back:)]];
  return view;
}

- (void)_back:(id)sender
{
  [_actionController back];
}
@end

This example replaces the actionbar with a placeholder view of your choice, but makes tapping anywhere on the actionbar a trigger for a 'back' action and return to the previous screen.

Migrating Your Customization

If you've customized your app with version 4.19.0 or earlier of the SDK, you will not need to update your app immediately when you adopt the newest SDK. Your customization will continue to be supported for a limited time. Any changes that would break your customization will be announced 90 days in advance. This is to give time to test the new skins make the necessary changes when you are ready. Even though the old customization is supported, you should use the new customization methods as soon as possible because the old ones will eventually be deprecated.

Although the new customization is backwards compatible, it has a new default. If you have not specified an Advanced UI manager and have not chosen multiple colors, the customization will default to the classic skin. If you have specified an Advanced UI manager or specified multiple colors, the new customization reproduces your choices.

The following code illustrates the the differences between the old customization and the new customization.

// old:
viewController.theme = [AKFTheme themeWithPrimaryColor:primaryColor
                                      primaryTextColor:primaryTextColor
                                      secondaryColor:secondaryColor
                                      secondaryTextColor:secondaryTextColor
                                      statusBarStyle:statusBarStyle];
viewController.theme.backgroundImage = bgImage;
viewController.theme.backgroundColor = bgColor;
...

// new:
viewController.uiManager = [[AKFSkinManager alloc]
                            initWithSkinType:AKFSkinTypeClassic
                            primaryColor:primaryColor
                            backgroundImage:bgImage
                            backgroundTint:AKFBackgroundTintWhite
                            tintIntensity:tintIntensity];

Localization

Localization support is also provided by the SDK. The supported languages are packaged with the SDK. You don't need anything else to display text in the appropriate locale.