How to customize drop-in UI with the AWSMobileClient? - swift

Question

I currently have the correct code to customize the drop in UI straight from the iOS SDK docs. However it runs but is still the default AWS look. I have browsed profusely for the solution but to no avail.
import UIKit
import AWSAuthCore
import AWSAuthUI
import AWSMobileClient
class SignInViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
showSignIn()
//
AWSMobileClient.default().initialize { (userState, error) in
if let userState = userState {
switch(userState){
case .signedIn:
self.createAlert(title: "You are already signed in!", message: "Sign out first")
DispatchQueue.main.async {
// self.signInStateLabel.text = "Signed out"
}
case .signedOut:
AWSMobileClient.default().showSignIn(navigationController: self.navigationController!, { (userState, error) in
if(error == nil){ //Successful signin
DispatchQueue.main.async {
// self.signInStateLabel.text = "Logged In"
// self.signOutButton.isHidden = false
// self.tableView.reloadData()
}
}
})
default:
AWSMobileClient.default().signOut()
}
} else if let error = error {
print(error.localizedDescription)
}
}
// Do any additional setup after loading the view.
}
func showSignIn() {
if !AWSSignInManager.sharedInstance().isLoggedIn{
AWSAuthUIViewController.presentViewController(with: self.navigationController!, configuration: nil, completionHandler: {(provider: AWSSignInProvider, error: Error?) in
if error != nil {
print("Error occured: \(String(describing: error))")
}else{
//Sign in Successful
print("Logged in with provider \(provider.identityProviderName)with Token: \(provider.token())")
}
})
AWSMobileClient.default()
.showSignIn(navigationController: self.navigationController!,
signInUIOptions: SignInUIOptions(
canCancel: true,
logoImage: UIImage(named: "MyCustomLogo"),
backgroundColor: UIColor.red)) { (result, err) in
//handle results and errors
}
}
}
func createAlert (title: String, message: String){
let alert = UIAlertController(title: title, message: message, preferredStyle: UIAlertController.Style.actionSheet)
alert.addAction(UIAlertAction(title: "Ok", style: UIAlertAction.Style.default, handler: { (Action) in
alert.dismiss(animated: true, completion: nil)
}))
self.present(alert, animated: true, completion: nil)
}
}
I try to customize it in func showSignIn(). I would like to customize this UI to my own preferences.

Answer 1

Looks like you have the right idea with SignInUIOptions but might just need less code and in the right places. Here's what's worked for me:
In AppDelegate:
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Initialize AWSMobileClient singleton
AWSMobileClient.default().initialize { (userState, error) in
if let userState = userState {
print("UserState: \(userState.rawValue)")
} else if let error = error {
print("error: \(error.localizedDescription)")
}
}
return true
}
In ViewController:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
if !AWSMobileClient.default().isSignedIn {
showLoginScreen()
return
}
}
func showLoginScreen() {
AWSMobileClient.default().showSignIn(
navigationController: self.navigationController!,
signInUIOptions: SignInUIOptions(
canCancel: false,
logoImage: UIImage(named: "MyLogo"),
backgroundColor: UIColor.red,
secondaryBackgroundColor: UIColor.red,
disableSignUpButton: true)
) { (signInState, error) in
if let signInState = signInState {
print("Sign in flow completed: \(signInState)")
} else if let error = error {
print("error logging in: \(error.localizedDescription)")
}
}
}