Customize the drop in GUI

You can customize the Amplify dropin UI with minimum effort. The SignInUIOptions allows you to customize elements such as the background color or the logo.

For example, let’s modify some SignInUIOptions in authenticateWithDropinUI() method (in Landmarks/AppDelegate.swift class)

public func authenticateWithDropinUI(navigationController : UINavigationController) {
        print("dropinUI()")
        
        // Option to launch sign in directly
        let signinUIOptions = SignInUIOptions(canCancel: false,
                                              logoImage: UIImage(named: "turtlerock"),
                                              backgroundColor: .black)

        AWSMobileClient.default().showSignIn(navigationController: navigationController, signInUIOptions: signinUIOptions, { (signInState, error) in
            if let signInState = signInState {
                print("Sign in flow completed: \(signInState)")
            } else if let error = error {
                print("error logging in: \(error.localizedDescription)")
            }
        })
    }

Build and launch the application to verify everything is working as expected. Click the build icon or press ⌘R. build

If you are still authenticated, click Sign Out and click the user badge to sign in again. You should see this:

customized drop in UI