Forem: Calin-Cristian Ciubotariu

Build your own button component library in SwiftUI from scratch

Calin-Cristian Ciubotariu — Wed, 20 May 2020 17:34:53 +0000

Introduction

Buttons are the UI components that people use to interact with your app. It's important to make them look appropriate to the action they trigger, to be consistent and accessible across the app and to give visual feedback to users.

In the previous blog post I talked about what are view modifiers and how can we use them to create stylish UI in our SwiftUI apps.

Here I will present how to apply them to create reusable styles for buttons. It's going to be a long and enjoyable ride.

SwiftUI buttons

Creating a button in SwiftUI is pretty simple. It requires an action and the actual content displayed and tappable.

Button(action: {
  //    action on tap - e.g. update a @State variable
}) {
  // content - e.g. Text or Image
}

Of course, to style this Button view you have to add view modifiers. You have 2 options:

apply the modifiers to (each of) the views inside the content
apply the modifiers to the button view - that will apply the modifiers to all the views inside the content

//  1.
Button(action: { }) {
  Text("Tap me!")
      .padding()
      .font(.title)
      .background(Color.green)
      .foregroundColor(.white)
}

/*=======================================================================*/

//  2.
Button(action: { }) {
  Text("Tap me!")
}
.padding()
.font(.title)
.background(Color.green)
.foregroundColor(.white)

Both will have the same result:

However, the difference however can be seen whenever you have multiple views inside the content:

//  1.
Button(action: { }) {
  Image(systemName: "square.and.arrow.down")
  Text("Tap me!")
  .padding()
  .font(.title)
  .background(Color.green)
  .foregroundColor(.white)
}

/*=======================================================================*/

//  2.
Button(action: { }) {
  Image(systemName: "square.and.arrow.down")
  Text("Tap me!")
}
.padding()
.font(.title)
.background(Color.green)
.foregroundColor(.white)

As you can see, in the first button the Image view is left out — but it's still tappable.

Something to keep in mind:

like I noted in my previous blog post about view modifiers, usually the order matters
padding should be (again, usually) put before anything regarding the background or border of the button. Let the button breathe, give it some space. We wouldn't want something like:

the modifiers regarding fonts and colors are applied here to the Image view because it's using the SF Symbol icon (the Apple's equivalent of FontAwesome)

ButtonStyle modifier

There are 2 types of view modifiers:

Modifiers bundled with the View protocol, available to any view:

E.g. padding or background , that you can be apply to any View.

Modifiers specific to a type, available only to instances of that type:

These are used to take advantage of specific traits of that View. And buttons are a perfect example for this. For example we want to change the look&feel whenever the user taps on the button.

We have buttonStyle view modifier that accepts a struct that implements the ButtonStyle protocol.

By default, we have 3 pre-defined styles.

/// The default button style.
Button(action: { }) {
  Image(systemName: "square.and.arrow.down")
  Text("Tap me!")
}
.buttonStyle(DefaultButtonStyle())

/// The style may apply a visual effect to indicate the pressed, focused,
/// or enabled state of the button.
Button(action: { }) {
  Image(systemName: "square.and.arrow.down")
  Text("Tap me!")
}
.buttonStyle(PlainButtonStyle())


/// A standard `Button` style that does not apply a border to its content.
Button(action: { }) {
  Image(systemName: "square.and.arrow.down")
  Text("Tap me!")
}
.buttonStyle(BorderlessButtonStyle())

But what if we would want to customise further our buttons? Like change the opacity when the button is pressed?

That's where the ButtonStyle protocol comes in.

Build your own ButtonStyle modifier

As I was stating before, the view modifier specific to buttons gives us access to specific traits. This is done through the Configuration(which is in fact a typealias Configuration = ButtonStyleConfiguration).

What we can access are:

label - the button content as a whole view
isPressed - a Bool var that becomes true whenever the button is pressed

Let's do a more interesting example: when the button is pressed, scale it down and decrease the opacity to give it a highlight effect. And as a bonus, animate these changes.

//  CustomButtonStyle
import SwiftUI

struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .padding()
            .background(Color.green)
            .foregroundColor(Color.white)
            .opacity(configuration.isPressed ? 0.7 : 1)
            .scaleEffect(configuration.isPressed ? 0.8 : 1)
            .animation(.easeInOut(duration: 0.2))
    }
}


//  USAGE:
Button(action: { }) {
  Text("This is a custom button")
}
.buttonStyle(CustomButtonStyle())

And the result:

React Native UI libraries

Short backstory

In 2019 I started a "sabbatical" year and a half from native iOS development. I started to develop mobile apps using React Native as my main job.

I learned a lot, but what amazed me was the power to quickly prototype apps with existing UI libraries. Where I came from (the native development world) that wasn't even a thought.

What I used back then was Callstack's React Native Paper (material design) and then NativeBase.

Import, use and still customise was mind blowing to me. I started to understand the power and noise around React Native.

NativeBase as an example

NativeBase library is made from pre-build components that help every developer to build stuff faster and consistent across all the screens. And buttons are not an exception to this.

They offer a long list of props — inputs for the Button component that tell it how to look or to behave - like outlined, transparent, bordered, rounded, large or small.

No more @IBOutlets, no more subclassing, no more "CustomButton" that ate another UIButton :)

I'm aware that in React Native you end up doing the same thing when implementing your custom styles, but it's nowhere near as easy using UIKit.

Fast-forward to today, I'm happy that I rediscovered my love to develop beautiful things using SwiftUI.

Let's see how can we develop a themed UI library for our buttons similar to the ones from NativeBase.

Create a UI library

Below I summarise how are the buttons described based on the NativeBase examples.

Types: light, primary, success, info, warning, danger, dark
Styles:
- default (color fill),
- transparent,
- outline
- rounded (color fill)
- full width
States: enabled(by default), disabled
Sizes: small, default, large (font sizes)

What I wanted to achieve is to be as close as possible as declaring:

<Button rounded success>
  <Text>Success</Text>
</Button>

So it would be something like this with all the variables in place:

Button(action: { }) {
  Text(primaryButtonText)
}
.buttonStyle(
  NativeBaseLikeButtonStyle(
    .rounded(type: .primary),
    size: .small,
    disabled: false,
    isFullWidth: true,
  )
)

Now, looking at these requirements and the native base examples, we can see there are common traits that describe this UI:

foreground color - the text color
background color
border color - for outlined buttons
border radius - for both default and rounded buttons
border width

Button style configuration

So let's create a protocol called ButtonStyleConfig.

protocol ButtonStyleConfig {
    var foregroundColor: Color? { get }
    var backgroundColor: Color? { get }
    var borderColor: Color { get }
    var borderWidth: CGFloat { get }
    var cornerRadius: CGFloat { get }
}

extension ButtonStyleConfig {
    var borderColor: Color {
        Color.clear
    }

    var borderWidth: CGFloat {
        0
    }

    var cornerRadius: CGFloat {
        6
    }
}

Looking on the designs, we can see that most of them buttons have no border and the same corner radius. As an arbitrary value, I chose 6 for corner radius.

Another thing that we can notice is that no matter what type of buttons there are, all of them have 2 colors: a primary and a secondary one. For example, for the default success button we have the primary color green and the secondary color white. In fact most of them have the secondary color white, so let's make that the default value.

protocol AccentColoured {
    static var primaryColor: Color?  { get }
    static var secondaryColor: Color? { get }
}

extension AccentColoured {
    static var secondaryColor: Color? {
        Color.white
    }
}

Now, let's create specific structs that describe each color for each style:

struct PrimaryStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        Color.blue
    }
}

struct SuccessStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        Color.green
    }
}

struct InfoStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        return Color.blue.opacity(0.6)
    }
}

struct LightStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        return Color.gray.opacity(0.2)
    }
    static var secondaryColor: Color? {
        Color.blue
    }
}

struct WarningStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        return Color.orange
    }
}

struct DangerStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        return Color.red
    }
}

struct DarkStyleConfig: AccentColoured {
    static var primaryColor: Color? {
        return Color.black
    }
}

Of course, there are a lot of ways of doing this instead of using structs, like plist or JSON files.

Let's make the styles easier to use and create an enum for them:

enum ButtonStyles {
    case primary, light, success, info, warning, danger, dark

    var secondaryColor: Color? {
        switch self {
        case .light:
            return LightStyleConfig.secondaryColor

        case .primary:
            return PrimaryStyleConfig.secondaryColor

        default:
            return Color.white
        }
    }

    var primaryColor: Color? {
        switch self {
        case .primary:
            return PrimaryStyleConfig.primaryColor

        case .light:
            return LightStyleConfig.primaryColor

        case .success:
            return SuccessStyleConfig.primaryColor

        case .info:
            return InfoStyleConfig.primaryColor

        case .warning:
            return WarningStyleConfig.primaryColor

        case .danger:
            return DangerStyleConfig.primaryColor

        case .dark:
            return DarkStyleConfig.primaryColor
        }
    }
}

Display styles

Now let's use an enum to describe the display styles: default, transparent, outline and rounded and to specify the button style configurations by implementing the ButtonStyleConfig protocol.

As you can see, having the type returning the primary and secondary colors helps us a lot when switching these for the transparent/outline styles.

enum DisplayStyle: ButtonStyleConfig {

    case `default`(type: ButtonStyles = .primary)
    case transparent(type: ButtonStyles = .primary)
    case outline(type: ButtonStyles = .primary)
    case rounded(type: ButtonStyles = .primary)

    var foregroundColor: Color? {
        switch self {
        case .default(let type):
            return type.secondaryColor

        case .transparent(let type):
            return type.primaryColor

        case .outline(let type):
            return type.primaryColor

        case .rounded(let type):
            return type.secondaryColor
        }
    }

    var backgroundColor: Color? {
        switch self {
        case .default(let type):
            return type.primaryColor

        case .transparent(let type):
            return type.secondaryColor

        case .outline(let type):
            return type.secondaryColor

        case .rounded(let type):
            return type.primaryColor
        }
    }

    var borderColor: Color {
        if case .outline(let type) = self {
            return type.primaryColor ?? Color.clear
        }

        return Color.clear
    }

    var cornerRadius: CGFloat {
        if case .rounded(_) = self {
            return 40
        }

        return 6
    }
}

Is there something we missed? Oh, yes, the size of the button, that is in fact the font size. So we can create a simple enum:

enum Size {
    case `default`, small, large

    func getFont() -> Font {
        switch self {
        case .small:
            return Font.caption
        case .large:
            return Font.title
        default:
            return Font.body
        }
    }
}

With all these components, we can start creating our custom button styles.

Theme the buttons

Let's use the CustomButtonStyle we created earlier and add a custom init. Like I described in the previous blog post we can pass parameters to our custom view modifier.

struct CustomButtonStyle: ButtonStyle {

  private var display: DisplayStyle
  private var font: Font

  init(_ display: DisplayStyle = .default(type: .primary),
         size: Size = .default) {

        self.display = display
        font = size.getFont()
    }

    func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .padding()
            .font(font)
            .background(display.backgroundColor)            //  <---
            .foregroundColor(display.foregroundColor)   //  <---
            .cornerRadius(display.cornerRadius)             //  <---
            .opacity(configuration.isPressed ? 0.7 : 1)
            .shadow(color: display.backgroundColor!.opacity(0.2),
                radius: display.cornerRadius,
                x: 0,
                y: 5)
    }
}

As a subtle touch, I added a shadow component to give the buttons a little depth.

Let's see it in action:

this is how it looks by default: .buttonStyle(CustomButtonStyle())

CustomButtonStyle(.rounded(type: .success))

CustomButtonStyle(.transparent(type: .success)

CustomButtonStyle(.outline(type: .success))

Wait, what? Shouldn't it be outlined? But where's the border? Let's fix it!

Borders

Let's fix it! We can add the border by adding a RoundedRectangle as an overlay view:

func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .padding()
            .font(font)
            .background(display.backgroundColor)            
            .foregroundColor(display.foregroundColor)   
            .cornerRadius(display.cornerRadius)             
            .opacity(configuration.isPressed ? 0.7 : 1)
            .shadow(color: display.backgroundColor!.opacity(0.2),
                radius: display.cornerRadius,
                x: 0,
                y: 5)
            .overlay(
              RoundedRectangle(cornerRadius: display.cornerRadius)  //  <---
              .stroke(display.borderColor, lineWidth: 1)
            )
}

The outlined style it's fixed!

What we achieved until now

Let's see what we can do until now:

Full width

Right now, our buttons take the minimum width needed. But what if we want to use a submit button for our form and want it to take the full width available?

How:

To make a view take the full width available, we can use the .frame view modifier like this:

.frame(maxWidth: .infinity).

Where:

In the previous blog post I emphasised that the order of modifiers matters.

What we want to achieve is not only a full width. We want make the corners, backgrounds, shadows and overlays impact the entire view and keep the proportions.

To do that we need to specify the frame before the background modifier.

struct CustomButtonStyle: ButtonStyle {
  //    ...
  func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .frame(maxWidth: .infinity) //  <---
            .padding()
            .font(font)
            .background(display.backgroundColor)
            .foregroundColor(display.foregroundColor)
            .cornerRadius(display.cornerRadius)
            .opacity(configuration.isPressed ? 0.7 : 1)
            .shadow(color: display.backgroundColor!.opacity(0.2),
                    radius: display.cornerRadius,
                    x: 0,
                    y: 5)
            .overlay(
              RoundedRectangle(cornerRadius: display.cornerRadius)
              .stroke(display.borderColor, lineWidth: 1)
            )
  }
}

And the result is this:

Now, this is not something I always want. I would like to specify that through a boolean, something like: CustomButtonStyle(.default(type: .dark), isFullWidth: true) .

So, specify the flag in the init method and apply the frame modifier only if it's true in the makeBody method.

struct CustomButtonStyle: ButtonStyle {
  //    ...
  private var isFullWidth: Bool //  <---

  init(_ display: DisplayStyle = .default(type: .primary),
         size: Size = .default,
         isFullWidth: Bool = false) {

        self.isFullWidth = isFullWidth  //  <---
        // ...
  }
}

If we're here, let's create a small custom modifier that's making a view to have full width.

struct FullWidthModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(maxWidth: .infinity)
    }
}

Unfortunately at this moment, there isn't a method to conditionally apply a modifier. But we can create it!

Googling about this issue, we find this excellent article on view modifiers. There we can find a very useful extension that applies a specified modifier only if the condition is true.

extension View {
    // If condition is met, apply modifier, otherwise, leave the view untouched
    public func applyModifier<T>(if condition: Bool, _ modifier: T) -> some View where T: ViewModifier {
        Group {
            if condition {
                self.modifier(modifier)
            } else {
                self
            }
        }
    }
}

Now we have all the building blocks we need:

func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .applyModifier(if: isFullWidth, FullWidthModifier()) // <---
            .padding()
            .font(font)
            .background(display.backgroundColor)
            .foregroundColor(display.foregroundColor)
                    // ...
}

As an example of usage, let's see it applied to the same button:

//  Dark themed button
Button(action: {}) {
  Text("Dark")
}
.buttonStyle(CustomButtonStyle(.default(type: .dark), isFullWidth: false))

//  Dark themed button full width
Button(action: {}) {
  Text("Dark")
}
.buttonStyle(CustomButtonStyle(.default(type: .dark), isFullWidth: true))

Crazy animations

As you can see, the only way we indicate the buttons are pressed is through a highlight effect: .opacity(configuration.isPressed ? 0.7 : 1).

Let's add back the scaleEffect modifier, but this time change the animation effect to make it bounce. And to make it even crazier let's change the radius when it's pressed:

func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .padding()
            .font(font)
            .background(display.backgroundColor)
            .foregroundColor(display.foregroundColor)
            .cornerRadius(display.cornerRadius)
            .opacity(configuration.isPressed ? 0.7 : 1)
            .shadow(color: display.backgroundColor!.opacity(0.2),
                    radius: display.cornerRadius,
                    x: 0,
                    y: 5)
            .overlay(
                RoundedRectangle(cornerRadius:display.cornerRadius)
                    .stroke(display.borderColor, lineWidth: 1)
            )
            .scaleEffect(configuration.isPressed ? 0.8 : 1)
            .animation(
              Animation.spring(response: 0.8, 
                               dampingFraction: 0.1, 
                               blendDuration: 10)
            )
    }

Voilà!

Do we really need that in a real-life scenario? Most probably not but we need to animate our lives sometimes :)

Conclusion

Congratulations! You made it this far and the reward is your own button component library that's easy to extend and customise. For example, what you can do is to enhance the button component to support loading states, displaying a spinner, making the button untappable.

Useful links

Follow me

If you enjoy what I write, please follow my activity wherever you prefer: Dev.to, Medium or on my very own gatsby powered blog calincrist.com.

Follow me on Twitter if you want to have a chat or simply see what I'm up to. I try to post something there every day.

A Beginner's guide to view modifiers in SwiftUI

Calin-Cristian Ciubotariu — Sat, 02 May 2020 07:34:53 +0000

Introduction & motivation

Developing a pet/serious project is the perfect way to learn a new framework or paradigm. SwiftUI is no exception to this truth.

While doing that, I stumbled upon having to use the same components on several screens: titles, subtitles and buttons. Having mini-ui-libraries inside the project for different UI building blocks helps a lot.

In SwiftUI we can use the existing UI components (e.g. Text, TextField, Button) with our own shared styles through view modifiers.

What are view modifiers?

A view modifier is a method of the View instance. What it does is:

takes the view (or another modifier)
makes a copy of the view
returns the modified view after applying some changes on its styles.

If you already tried constructing UI using SwiftUI, there's 99% chances that you've used a view modifier. There are built-in modifiers that help you shaping the screen you're working on.

For a full list, you can browse the documentation.

In Xcode, Option-click View in the source editor, and then click Open in Developer Documentation.

The simplest example would be applying paddings or fonts to a Text view:

Text("Cool headline")
    .font(.headline)
    .foregroundColor(.purple)
    .padding()

Ordering modifiers

A thing to keep in mind is that sometimes the order you apply the view modifiers impacts the UI outcome.

And sometimes it doesn't.

In our example,

Text("Cool headline")
    .font(.headline) // <--
    .foregroundColor(.purple) // <--
    .padding()

and

Text("Cool headline")
    .foregroundColor(.purple) // <--
    .font(.headline) // <--
    .padding()

have the same outcome (illustrated in the last image).

"Use headline font and make it purple" = "Make it purple and use headline font"

But if you want to add a background color that's a different story.

Below you add an orange background and then some padding.

Text("Cool headline")
    .foregroundColor(.purple)
    .font(.headline)
    .background(Color.orange) // <--
    .padding() // <--

Here you add padding and then an orange background.

Text("Cool headline")
    .foregroundColor(.purple)
    .font(.headline)
    .padding() // <--
    .background(Color.orange) // <--

Explanation time:

.padding() is a modifier that adds spacing around the view. Here it is called without parameters so SwiftUI is adding a default padding on the top, left, bottom and right sides.

func padding(_ edges: Edge.Set = .all, _ length: CGFloat? = nil) -> some View
//  OR
func padding(_ insets: EdgeInsets) -> some View

Without parameters, SwiftUI adds a default padding in all four directions, but you can configure that padding yourself. Example:

Text("Cool headline")
    .padding(EdgeInsets(top: 10, leading: 5, bottom: 10, trailing: 5))

On the first example, first the background color is applied and then the spacing.

On the second example, when you apply the padding first, the background color is applied on a different enlarged view.

To illustrate things better try adding background colors before and after padding.

Text("Cool headline")
    .foregroundColor(.purple)
    .font(.headline)
    .background(Color.red) // <--
    .padding()
    .background(Color.orange) // <--

The padding adds some space between the text and the edges of the view. The red background color is applied to the view that contains just the text and nothing more. The padding modifier results in a new view and the orange background is applied to it.

Custom view modifiers

That's all great!

But what if you have several purple headlines throughout the app? Telling texts: "be a purple headline with paddings" every time isn't a pretty solution, is it?

You might be saying "I'd like to be able to write something like":

Text("Cool headline")
    .purpleHeadline()

Fortunately, we can create our own modifiers on top of the built-in ones. And we can name them accordingly.

I know you're busy, so here's the code:

import SwiftUI

struct HeadlineViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundColor(.purple)
            .padding()
    }
}

extension View {
    func purpleHeadline() -> some View {
        ModifiedContent(
            content: self,
            modifier: HeadlineViewModifier()
        )
    }
}

Explanations:

create a struct that implements the ViewModifier protocol
implement the func body(content: Content) function
- apply all the modifiers you need
- what it does is it's taking the view (content) and returns it with the applied modifiers
because we're applying this custom modifier to a View, we can add an extension to it
- name the function whatever you want
- make sure it returns some View
- ModifiedContent represents a value with a view modifier applied to it
- specify the content and the custom modifier to apply

Now, writing Text("Cool headline").purpleHeadline() will make sense.

Modifiers with parameters

Customizing your custom modifiers? Maybe with some values as parameters? I thought you wouldn't ask!

Of course, our custom view modifiers can take parameters. What we have to do is to specify them in the init method.

For example, let's create another custom modifier that adds borders to a view. And on top of that, specify the border width and radius.

import SwiftUI

struct BorderedViewModifier: ViewModifier {

    var borderWidth: CGFloat = 0
    var borderRadius: CGFloat = 0

    init(borderWidth: CGFloat, borderRadius: CGFloat) {
        self.borderWidth = borderWidth
        self.borderRadius = borderRadius
    }

    func body(content: Content) -> some View {
        content
            .overlay(
                RoundedRectangle(cornerRadius: borderRadius)
                    .stroke(lineWidth: borderWidth)
        )
    }
}

extension View {
    func bordered(borderWidth: CGFloat = 1, borderRadius: CGFloat = 0) -> some View {
        ModifiedContent(
            content: self,
            modifier: BorderedViewModifier(
                borderWidth: borderWidth,
                borderRadius: borderRadius
            )
        )
    }
}

At the end of the day, the view modifier is just a struct, so we can make use of stored properties. In this example we're using the borderRadius and borderWidth to customize the overlay.

Usage:

Text("Cool headline")
    .purpleHeadline()
    .bordered(borderWidth: 3, borderRadius: 5)

Conclusion / Where to go from here?

You shouldn't refrain from using as many modifiers as you need. There are plenty of options like size, weight, overlay, cornerRadius that you can use to modify how your UI controls look on the screen.

For the most time you won't remember modifiers and their signature. That's why you should use the documentation.

Always use Apple Docs, so I'll write again: in Xcode, Option-click on any view in the source editor, and then click Open in Developer Documentation.

In the next blog post I'll discuss about applying view modifiers on buttons and how can we start having a mini-ui-library suited for a SwiftUI project. Stay close!

Let's stay in touch!

If you enjoy what I write, please follow my activity wherever you prefer: Dev.to, Medium or on my very own gatsby powered blog calincrist.com.

Follow me on Twitter if you want to have a chat or simply see what I'm up to. I try to post something there every day.

Three ways to react to @State event changes in SwiftUI

Calin-Cristian Ciubotariu — Mon, 13 Apr 2020 08:36:30 +0000

(... or how I learned to implement an equivalent of "onChange" on SwiftUI controls)

After almost a year since SwiftUI was released, I decided to give it a go. I started to get my hands dirty by implementing basic UI controls (like Slider or TextField) and how to manipulate view states.

In short time, I faced the challenge to update a @State variable based on another @State variable changes.

And yes, the property observers that we know (like didSet or willSet) don't work in @State variables.

After some research (took longer than I expected), I learned 3 ways to do that:

UI Controls specific callbacks: onEditingChanged
Binding variables
Making use of Combine framework

Below I will describe a specific simple use-case: check if a text field value is matching a predefined word and show that by toggling a switch on/off (the control is called Toggle).

The UI skeleton code:

struct ContentView: View {

    @State var textValue: String = "Hello"
    @State var enteredTextValue: String = ""
    @State var textsMatch: Bool = false

    var body: some View {
          VStack {
              HStack {
                  Text("Write this word: ")
                  Text(textValue)
              }

              TextField("Write here:", text: $enteredTextValue)
                  .padding(10)
                  .border(Color.green, width: 1)

              Toggle(isOn: $textsMatch) {
                  Text("Matching?")
              }
              .disabled(true)
              .padding()
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

onEditingChanged

According to Apple's Developer Documentation, this callback is available on the inits of 3 controls: TextField, Slider and Stepper.

TextField:
init(_:text:onEditingChanged:onCommit:)

Slider:
init(value:in:onEditingChanged:)

Stepper:
init(_:onIncrement:onDecrement:onEditingChanged:)

What we can do here is enhancing the TextField's init with this parameter:

@State var textValue: String = "Hello"
@State var enteredTextValue: String = ""
@State var textsMatch: Bool = false    

//  ADD THIS
func checkIfTextsMatch(changed: Bool) {
    self.textsMatch = self.textValue == self.enteredTextValue
}

var body: some View {
  VStack {
      HStack {
          Text("Write this word: ")
          Text(textValue)
      }

      TextField("Write here:", 
                text: $enteredTextValue,
                //  USE HERE
                onEditingChanged: self.checkIfTextsMatch)
      .padding(10)
      .border(Color.green, width: 1)

      Toggle(isOn: $textsMatch) {
          Text("Matching?")
      }
      .disabled(true)
      .padding()

  }.padding()
}

A possible downside to this approach is that onEditingChanged gets called after the user presses the return key of the keyboard.

But if you don't want this to happen in "real-time" it's a viable solution.

Binding variables

Binding is a property wrapper type that can read and write a value owned by a source of truth.

This reference enables the view to edit the state of any view that depends on this data.

We can use this to mimic the property observers from UIKit approach (getters/setters).

func checkIfTextsMatch() {
    self.textsMatch = self.textValue == self.enteredTextValue
}

var body: some View {
  let textValueBinding = Binding<String>(get: {
      self.enteredTextValue
  }, set: {
      self.enteredTextValue = $0
      self.checkIfTextsMatch()
  })

  return VStack {
      HStack {
          Text("Write this word: ")
          Text(String(textValue))
      }

      TextField("Write here:", text: textValueBinding)
          .padding(10)
          .border(Color.green, width: 1)
      Text(enteredTextValue)

      Toggle(isOn: $textsMatch) {
          Text("Matching?")
      }
      .disabled(true)
      .padding()
  }.padding()
}

I have to say that I don't particularly like this method as it doesn't look clean to declare bindings and have business inside the rendering section.

Combine framework

The Combine framework is used to customise handling of asynchronous events by combining event-processing operators - in our case to listen to state changes events.

In Combine's vocabulary we have:

- ObservableObject - A type of object with a publisher that emits before the object has changed.

- ObservedObject - declares dependency on a reference type that conforms to the ObservableObject protocol. It's a property wrapper type that subscribes to an observable object and invalidates a view whenever the observable object changes.

- Published - A type that publishes a property marked with an attribute.

This approach is forcing us (in a good way) to have a cleaner code by extracting the business logic out of the view.

Create the view model:

class ContentViewModel: ObservableObject {
    @Published var textValue: String = "Hello"
    @Published var enteredTextValue: String = "" {
        didSet {
            checkIfTextsMatch()
        }
    }
    @Published var textsMatch: Bool = false

    func checkIfTextsMatch() {
        self.textsMatch = textValue == enteredTextValue
    }
}

Use it in the desired view:

struct ContentView: View {

  @ObservedObject var viewModel = ContentViewModel()

  var body: some View {
      VStack {
          HStack {
              Text("Write this word: ")
              Text(String(viewModel.textValue))
          }

          TextField("Write here:", text: $viewModel.enteredTextValue)
              .padding(10)
              .border(Color.green, width: 1)
          Text(viewModel.enteredTextValue)

          Toggle(isOn: $viewModel.textsMatch) {
              Text("Matching?")
          }
          .disabled(true)
          .padding()
      }.padding()
  }

}

I don't know about you, but I have to say that I much prefer the third option as I have more control over the data flow and the code is more maintainable. And I need that in the real-world use cases.

How To Do Analytics in Your React Native App with Firebase

Calin-Cristian Ciubotariu — Fri, 17 Jan 2020 16:26:19 +0000

You're building two mobile apps (iOS and Android) using React Native. The apps get approved in their stores. How do you know if your customers are enjoying your creation and find it useful? You don't unless you find a way to get insights and understand how your apps are used.

Choices

First, one has to decide what library should be used. Fortunately, there are some great ones that make it easy to integrate, like:

AWS Amplify's Analytics
Segment
Firebase Analytics

In this post, I'll be focusing on Firebase Analytics as it's one of the most popular. Especially because of its easy integration with Google Analytics.

Love it or hate it, Google services are still (arguably) the most popular ones for many valid reasons.

Configure Firebase Account

Before integrating Firebase for React Native, you need a Firebase project in the console (link).

This project will hold information for both iOS and Android apps.

In my case, I named the project "tutorial-demo".

iOS project

After getting through the wizard, select the newly created project.

Now, we need to add different apps for different platforms. For iOS select the "iOS" icon.

Enter the native project's bundle ID (and App Store ID if you have one), give it a nickname and press "Register app".

The Firebase console provides a GoogleService-Info.plist file.

This contains a set of credentials for iOS devices to use when authenticating with your Firebase project.

Download the "GoogleService-Info.plist" presented in the second step and add it to the iOS native project.

Don't forget to select the correct target if you're having multiple targets. Also, don't forget to select "Copy items if needed".

Note: Open "GoogleService-Info.plist" and enable analytics by setting "YES" the key "IS_ANALYTICS_ENABLED".

The 3rd step is not relevant for us, as we are covered by the firebase package that will add the pods for us.

The 4th step is something that we can add later. For now, let's finish with Firebase console configurations.

Android project

The android side of things is very similar.

Go to the project homepage and select the "Android" icon.

Here, we have again a config file - this time called "google-services.json".

Add it to the native project inside the "app" folder from the android project folder.

Install and Configure Firebase Analytics package

For React Native, there is the official Firebase package: https://invertase.io/oss/react-native-firebase/

It contains all the Firebase services and we'll be installing and using the Analytics one.

Install the core and analytics packages:

yarn add @react-native-firebase/app
yarn add @react-native-firebase/analytics

Assuming the React Native version is >= 0.60, the module should be automatically linked to your project.

If not, you need to manually integrate the app module into your project. See the following steps for Android and iOS for more information on manual linking.

Install the pods for the iOS app:

cd ios && pod install && cd ..

iOS: I noticed that after integrating the firebase package I needed to do some extra steps to make it work:

clear the "Derived Data"
clean the project
remove the existing app from the simulator/testing device

Android: In case the build or the gradle syncing is failing - it happened to me in one occasion, this is what I modified.
I think it has to do with auto-linking failing for some reason.

android/build.gradle

 buildscript {
        // ...
     dependencies {
                // ...
         classpath 'com.google.gms:google-services:4.3.2' // <---
     }
 }

android/app/build.gradle

 dependencies {
        // ...
     implementation 'com.google.firebase:firebase-analytics:17.2.0' // <---
        // ...
 }
 // ...

 apply plugin: 'com.android.application'        // <---
 apply plugin: 'com.google.gms.google-services' // <---

Analytics layer

Automatic events

Just by integrating the Analytics package there are some events that are collected automatically like:

first_open, user_engagement, app_clear_data .

More details are provided here: https://support.google.com/firebase/answer/6317485

Custom events

What's cool about this package is that it provides predefined methods for different use cases depending on the nature of your app (e-commerce, games, etc.), but also bare-bones functions to customize your own event loggings.

Long story short, what we can do using react-native-firebase is:

Log custom events

  await analytics().logEvent("event_name", {"key_1": "value_1", "key_2": "value_2"});

Log the opening of the app

  await firebase.analytics().logAppOpen();

Log the sign in/sign up event

  await firebase.analytics().logLogin({
    method: 'facebook',
  });

  await firebase.analytics().logSignUp({
    method: 'facebook',
  });

Behind the scenes, these specific events (logAppOpen, logLogin, logSignUp) are using the logEvent method specifying the key and some properties for you.

Set user properties

  await analytics().setUserId("id");
  await analytics().setUserProperty('email', email); // <--- DON'T DO THIS !!!
  await analytics().setUserProperties('account', {
    'subscription': 'premium'
  });

It is highly recommended not to send any fragile and secret data to firebase (emails, passwords, names, etc.) - not even hashed.

Tracking screens

  await analytics().setCurrentScreen("screen_name", "screen_name");

And these are just a bunch of them. Here are all the supported methods.

Integrating it in your project and use cases

Now, to demo these events, let's do an old-fashioned class that we will be used to centralize the analytics code. An advantage of this approach would be that we can use multiple analytics solutions/packages by updating just one file. (Of course, it doesn't need to be a class but here we are :) )

    import analytics, { firebase } from '@react-native-firebase/analytics';

    class Analytics {
      static init() {
        if (firebase.app().utils().isRunningInTestLab) {
          analytics().setAnalyticsCollectionEnabled(false);
        } else {
          analytics().setAnalyticsCollectionEnabled(true);
        }
      }

      static onSignIn = async userObject => {
        const { id, email } = userObject;
        await Promise.all([
          analytics().setUserId(id),
          analytics().setUserProperty('email', email), // <--- DON'T DO THIS !!!
          this.logEvent("sign_in")
        ]);
      };

      static onSignUp = async userObject => {
        const { id, email } = userObject;
        await Promise.all([
          analytics().setUserId(id),
          analytics().setUserProperty('email', email),  // <--- DON'T DO THIS !!!
          analytics().setUserProperty('created_at', new Date()),
          this.logEvent("sign_up")
        ]);
      };

      static setCurrentScreen = async screenName => {
        await analytics().setCurrentScreen(screenName, screenName);
      };

      static logEvent = async (eventName, propertyObject = {}) => {
        await analytics().logEvent(eventName, propertyObject);
      }

      static onSignOut = async () => {
        await analytics().resetAnalyticsData();
      };
    }

    export default Analytics;

Track Sign ins

What's left is to use our Analytics static methods where they belong in the code

    // src/screens/Login.js

    // ...imports

    const Login = () => {

      const { navigate } = useNavigation();

      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('')

      const loginAction = async () => {

        //  validate inputs...
        //  api call for signing in...

        navigate('SignedIn');
        await Analytics.onSignIn({ id: "1", email })
      }

      return (
         // ...
      );

    }

Tracking screens

Here we have multiple options depending on what do we need.

Either track them separately in each component after they're being mounted or making use of events other packages we might have in our project. One example could be the beloved and frequently used react-navigation.

useEffect hook inside the components.

const HomepageScreen = () => {

  useEffect(() => {
    Analytics.setCurrentScreen('Homepage');
  }, []);

  return ( ... )
}

navigation state changes directly on the app container.

// App.js

const AppContainer = createAppContainer(Navigator);

const App = () => {

    // Helper method
  const getActiveRouteName = navigationState => {
    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
      return getActiveRouteName(route);
    }
    return route.routeName;
  };

  return (
    <Provider store={store}>
      <AppContainer
        onNavigationStateChange={(prevState, currentState, action) => {
          const currentRouteName = getActiveRouteName(currentState);
          const previousRouteName = getActiveRouteName(prevState);

          if (previousRouteName !== currentRouteName) {
            Analytics.setCurrentScreen(currentRouteName);
          }
        }}
      />
    </Provider>
  )
}

export default App;

Custom events

An example would be to track in an image sharing app either the users are more inclined to use the camera or the camera roll.

    // src/screens/Camera.js

    // ...imports
    const CameraScreen = ({ ... }) => {

      const { navigate } = useNavigation();

      const takePicture = async () => {
        if (this.camera) {
            // ...
          Analytics.logEvent("add_image", {
            "take_picture": true,
            "camera_roll": false
          });

          navigate('ImagesList');
        }
      }

      return (
        // ...
      );
    }

Last step: see it working

Everything is installed, configured and implemented. Let's see if we get something from the app to the Firebase Console.

Nothing?...

Well, there is a delay of about 1 hour between logging and seeing the events on the dashboard.

The good news is that there is something we can do to test it quickly - with a latency of about 1 second.

It is called DebugView.

iOS

For the iOS project, we can pass an argument on the Run process by editing the scheme.

The argument is called -FIRDebugEnabled

For the Release builds, we should specify the argument -FIRDebugDisabled.

Android

To enable Debug mode on Android, just run:

adb shell setprop debug.firebase.analytics.app package_name

This behaviour persists until you explicitly disable Debug mode by specifying the following command-line argument:

adb shell setprop debug.firebase.analytics.app .none.

Now run the apps again and you should see some action in the Firebase console:

From my experience: if for some mystical reason it doesn't work on iOS, what did the trick for me is to manually link the libraries in Xcode, like in the picture below.

Conclusion

And that's pretty much it.

What you can do from here is release your app and gather valuable information. Pair it with data from Google Analytics and you have the power (and the data to back it up) to decide what's the best next move.

For the full code here's the Github link: https://github.com/calincrist/imageSharingApp.

Previous blog post:
How To Do Authentication using AWS Amplify in iOS

How To Do Authentication using AWS Amplify in iOS

Calin-Cristian Ciubotariu — Fri, 14 Jun 2019 09:44:16 +0000

I am as happy as I am nervous to post my very first tutorial on something. 😊 So let's begin!

If you are a developer, there's a 99% chance that you'll be dealing with authenticating your app's users. The authentication flows need to be secure, easy to integrate and customisable. It may sound easy. But most of the times dealing with this feature requires more work than we'd want. That's where AWS Amplify comes into play. It makes this experience workable for developers and risk-less for users.

In this blog post I would like to prove this by showing how I integrated AWS Amplify Auth component into my iOS app.

AWS Amplify

AWS Amplify is an open source library for developers that want to integrate the powerful AWS services (Auth, API, S3 Storage, etc.) into their mobile/web apps.

It has a great strength: you need no über-strong backend knowledge to deploy and integrate. By using this, you can focus more on building your app than configuring.

Auth

"AWS Amplify Authentication module provides Authentication APIs and building blocks for developers who want to create user authentication experiences." (https://aws-amplify.github.io/docs/js/authentication)

It has a great strength: you need no über-strong backend knowledge to deploy and integrate. By using this, you can focus more on building your app than configuring.

What/How will I implement

What I have planned is to create a basic iOS app and to add authentication flows to it:

login
sign up
reset password

To be easier to understand, here's a diagram:

Create basic iOS app project

I created a SingleView Swift project and called it aws_amplify_integration.

Folder structure

Here's a screenshot with what I propose to be the folder structure:

Customise UI

The UI is pretty basic for the sake of the tutorial.

The Github link to the project can please your curiosity if you want to take a look over the xib files.

Add AWS Amplify libs

What needs to be done is very well explained on AWS Amplify docs (https://aws-amplify.github.io/docs/ios/start). But I will extract the important steps.

Install AWS Amplify

Install Nodejs and npm, and then run:

npm install -g @aws-amplify/cli
amplify configure

Install Cocoapods:

sudo gem install cocoapods
pod init

Open the Podfile and add the pods for AWS Mobile SDK to work:

platform :ios, '11.0'

target 'aws_amplify_integration' do
    use_frameworks!
    pod 'AWSCore', '~> 2.9.0'
    pod 'AWSMobileClient', '~> 2.9.0'
end

Install dependencies:

pod install --repo-update

Remember to open the newly created aws_amplify_integration.workspace.

Build the project in Xcode.

Setup AWS services

What needs to be done is to create new AWS backend resources. After that, pull the AWS services configuration into the app.

In a terminal window, navigate to your project folder (the folder that contains your xcodeproj file).

Run the following command (for this app, accepting all defaults is OK):

    amplify init        #accept defaults
    amplify push        #creates configuration file

In the Finder, drag awsconfiguration.json into Xcode under the top Project Navigator folder (the folder name should match your Xcode project name). When the Options dialog box that appears, do the following:

Clear the Copy items if needed check box.
Choose Create groups, and then choose Next.

Add Auth

To enjoy the automated setup, run the following command in your project’s root folder.

The CLI prompts will help you to customize your auth flow for your app.

    amplify add auth

After configuring your Authentication options, update your backend:

    amplify push

Now, the awsconfiguration.json is updated with Cognito configs:

If it's not, make sure that you added this file to your project.

Integrate Amplify Auth

Check for auth state

First, AWSMobileClient needs to be imported to use the client to check for the authentication state.

By calling sharedInstance() the configurations are being pulled from awsconfiguration.json. This manages the users' session for auth tasks like automatic credentials management and refresh routines.

The initialize() method will start a new session. The result contains an ENUM value that exposes the current user state:

    public enum UserState: String {
        case signedIn, signedOut, signedOutFederatedTokensInvalid, signedOutUserPoolsTokenInvalid, guest, unknown
    }

We can take advantage of this workflow to determine what to present to the user. For this example we use signedIn.

If the user is logged in we can redirect to MainViewController, otherwise to LoginViewController.

    import UIKit
    import AWSMobileClient

    class SplashViewController: UIViewController {

        override func viewDidLoad() {
            super.viewDidLoad()

            AWSMobileClient.sharedInstance().initialize { (userState, error) in
                if let error = error {
                    print("error: \(error.localizedDescription)")
                    return
                }

                guard let userState = userState else {
                    return
                }

                print("The user is \(userState.rawValue).")

                // Check user availability
                switch userState {
                case .signedIn:
                    // Show home page
                    let mainViewController = MainViewController()
                    UIApplication.setRootView(mainViewController)
                    break

                default:
                    // Show login page
                    let loginViewController = LoginViewController()
                    UIApplication.setRootView(loginViewController)
                    break
                }
            }
        }
    }

In AppDelegate.swift's method didFinishLaunchingWithOptions we present the SplashScreenViewController.

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

        window = UIWindow(frame: UIScreen.main.bounds)

        if let window = window {
            window.backgroundColor = #colorLiteral(red: 0.9960784314, green: 0.9960784314, blue: 0.9960784314, alpha: 1)

            let splashViewController = SplashViewController()
            window.makeKeyAndVisible()
            window.rootViewController = splashViewController

        }

        return true
    }

Login flow

When the user is not signed in the login screen in presented.

From here we can:

enter a username and a password to login
go to sign up flow
go to reset password flow

The outlets are referenced to UITextFields and the touch up inside event is referenced to the login method.

Now, in this method, we can use AWSMobileClient to sign in using a username and a password. This action calls a completion handler when a result is available.

    public func signIn(username: String, 
                                         password: String, 
                                         validationData: [String: String]? = nil, 
                                         completionHandler: @escaping ((SignInResult?, Error?) -> Void))

The error is a AWSMobileClientError enum value. This enum has 42 cases.

Usually, your needs won't reach all the client errors. But it's a good practice to handle most of them to give proper feedback to the users.

    /// The error enum for `AWSMobileClient` errors.
    public enum AWSMobileClientError: Error {
        case aliasExists(message: String)
        case codeDeliveryFailure(message: String)
        case codeMismatch(message: String)
        case expiredCode(message: String)
        case groupExists(message: String)
        case internalError(message: String)
        case invalidLambdaResponse(message: String)
        case invalidOAuthFlow(message: String)
        case invalidParameter(message: String)
        case invalidPassword(message: String)
        case invalidUserPoolConfiguration(message: String)
        case limitExceeded(message: String)
        case mfaMethodNotFound(message: String)
        case notAuthorized(message: String)
        case passwordResetRequired(message: String)
        case resourceNotFound(message: String)
        case scopeDoesNotExist(message: String)
        case softwareTokenMFANotFound(message: String)
        case tooManyFailedAttempts(message: String)
        case tooManyRequests(message: String)
        case unexpectedLambda(message: String)
        case userLambdaValidation(message: String)
        case userNotConfirmed(message: String)
        case userNotFound(message: String)
        case usernameExists(message: String)
        case unknown(message: String)
        case notSignedIn(message: String)
        case identityIdUnavailable(message: String)
        case guestAccessNotAllowed(message: String)
        case federationProviderExists(message: String)
        case cognitoIdentityPoolNotConfigured(message: String)
        case unableToSignIn(message: String)
        case invalidState(message: String)
        case userPoolNotConfigured(message: String)
        case userCancelledSignIn(message: String)
        case badRequest(message: String)
        case expiredRefreshToken(message: String)
        case errorLoadingPage(message: String)
        case securityFailed(message: String)
        case idTokenNotIssued(message: String)
        case idTokenAndAcceessTokenNotIssued(message: String)
        case invalidConfiguration(message: String)
        case deviceNotRemembered(message: String)
    }

When there is no error, the SignInResult contains the state of the user.

    public enum SignInState: String {
        case unknown = "UNKNOWN"
        case smsMFA = "CONFIRMATION_CODE"
        case passwordVerifier = "PASSWORD_VERIFIER"
        case customChallenge = "CUSTOM_CHALLENGE"
        case deviceSRPAuth = "DEVICE_SRP_AUTH"
        case devicePasswordVerifier = "DEVICE_PASSWORD_VERIFIER"
        case adminNoSRPAuth = "ADMIN_NO_SRP_AUTH"
        case newPasswordRequired = "NEW_PASSWORD_REQUIRED"
        case signedIn = "SIGN_IN_COMPLETE"
    }

Here are the entire implementation and handling.
When the sign in is complete, redirect to MainViewController.

    import UIKit
    import AWSMobileClient

    class LoginViewController: UIViewController {

        @IBOutlet weak var usernameTextField: UITextField!
        @IBOutlet weak var passwordTextField: UITextField!

        @IBAction func login(_ sender: Any) {

            guard let username = usernameTextField.text,
                let password = passwordTextField.text  else {
                print("Enter some values please.")
                return
            }

            print("\(username) and \(password)")

            AWSMobileClient.sharedInstance().signIn(username: username, password: password) { 
                            (signInResult, error) in

                    if let error = error  {
                        print("There's an error : \(error.localizedDescription)")
                        print(error)
                        return
                    }

                    guard let signInResult = signInResult else {
                        return
                    }

                    switch (signInResult.signInState) {
                    case .signedIn:
                        print("User is signed in.")

                        DispatchQueue.main.async {
                            let mainViewController = MainViewController()
                            UIApplication.setRootView(mainViewController)
                        }

                    case .newPasswordRequired:
                        print("User needs a new password.")
                    default:
                        print("Sign In needs info which is not et supported.")
                    }
            }
        }
    }

Sign Up flow

Here we have 2 screens to complete this flow:

Enter your account details (full name, email, username, password)
- SignUpViewController
Confirm the verification code
- ConfirmSignUpViewController

In AWS Amplify, signing up and confirming look very similar to the sign in process.

The only thing that is different is the result. It's using SignUpResult that contains the signUp confirmation state.

    /// Indicates the state of user during the sign up operation.
    public enum SignUpConfirmationState {
        case confirmed, unconfirmed, unknown
    }

When the state is unconfirmed, Cognito sends a verification code. It can be through SMS or Email, depending on how Cognito is configured.

Then, the app proceeds to the confirmation screen.

    import AWSMobileClient

    class SignUpViewController: UIViewController {

        @IBOutlet weak var passwordTextField: UITextField!
        @IBOutlet weak var usernameTextField: UITextField!
        @IBOutlet weak var emailTextField: UITextField!
        @IBOutlet weak var fullNameTextField: UITextField!

            @IBAction func createAccount(_ sender: Any) {

            guard let fullName = fullNameTextField.text,
                let email = emailTextField.text,
                let username = usernameTextField.text,
                let password = passwordTextField.text else {
                return
            }

            AWSMobileClient.sharedInstance().signUp(username: username,
                                                    password: password,
                                                    userAttributes: ["email" : email, "name": fullName],
                                                    completionHandler: signUpHandler);
        }

        func signUpHandler(signUpResult: SignUpResult?, error: Error?) {

            if let error = error {
                if let error = error as? AWSMobileClientError {
                    switch(error) {
                    case .usernameExists(let message):
                        print(message)
                    default:
                        break
                    }
                }
                print("There's an error on signup: \(error.localizedDescription), \(error)")
            }

            guard let signUpResult = signUpResult else {
                return
            }

            switch(signUpResult.signUpConfirmationState) {
            case .confirmed:
                print("User is signed up and confirmed.")

                DispatchQueue.main.async {
                    let mainViewController = MainViewController()
                    UIApplication.setRootView(mainViewController)
                }

            case .unconfirmed:
                let alert = UIAlertController(title: "Code sent",
                                              message: "Confirmation code sent via \(signUpResult.codeDeliveryDetails!.deliveryMedium) to: \(signUpResult.codeDeliveryDetails!.destination!)",
                    preferredStyle: .alert)

                alert.addAction(UIAlertAction(title: "Dismiss", style: .cancel) { _ in
                    guard let username = self.usernameTextField.text else {
                        return
                    }
                    let confirmSignupViewController = ConfirmSignUpViewController(username: username)
                    self.navigationController?.pushViewController(confirmSignupViewController, animated: true)
                })

                DispatchQueue.main.async {
                    self.present(alert, animated: true, completion: nil)
                }

            case .unknown:
                print("Unexpected case")
            }
        }

        @IBAction func dismissModal(_ sender: Any) {
            self.navigationController?.dismiss(animated: true, completion: nil)
        }
    }

ConfirmSignUpViewController:

    import AWSMobileClient

    class ConfirmSignUpViewController: UIViewController {

        @IBOutlet weak var verificationCodeTextField: UITextField!
        var username: String?

        init(username: String, nibName nibNameOrNil: String? = nil, bundle nibBundleOrNil: Bundle? = nil) {
            self.username = username
            super.init(nibName:nibNameOrNil, bundle: nibBundleOrNil)
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

            @IBAction func confirmSignUp(_ sender: Any) {

            guard let verificationCode = verificationCodeTextField.text,
                let username = self.username else {
                print("No username")
                return
            }

            AWSMobileClient.sharedInstance().confirmSignUp(username: username,
                                                           confirmationCode: verificationCode,
                                                           completionHandler: handleConfirmation)
        }

            func handleConfirmation(signUpResult: SignUpResult?, error: Error?) {
            if let error = error {
                print("\(error)")
                return
            }

            guard let signUpResult = signUpResult else {
                return
            }

            switch(signUpResult.signUpConfirmationState) {
            case .confirmed:
                print("User is signed up and confirmed.")

                DispatchQueue.main.async {
                    let mainViewController = MainViewController()
                    UIApplication.setRootView(mainViewController)
                }

            case .unconfirmed:
                print("User is not confirmed and needs verification via \(signUpResult.codeDeliveryDetails!.deliveryMedium) sent at \(signUpResult.codeDeliveryDetails!.destination!)")
            case .unknown:
                print("Unexpected case")
            }
        }

        @IBAction func resendCode(_ sender: Any) {
            guard let username = self.username else {
                print("No username")
                return
            }

            AWSMobileClient.sharedInstance().resendSignUpCode(username: username,
                                                              completionHandler: resendSignUpHandler)
        }

        func resendSignUpHandler(result: SignUpResult?, error: Error?) {
            if let error = error {
                print("\(error)")
                return
            }

            guard let signUpResult = result else {
                return
            }

            let message = "A verification code has been sent via \(signUpResult.codeDeliveryDetails!.deliveryMedium) at \(signUpResult.codeDeliveryDetails!.destination!)"
            let alert = UIAlertController(title: "Code Sent",
                                          message: message,
                                          preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "Dismiss", style: .cancel, handler: { _ in
                //Cancel Action
            }))

            DispatchQueue.main.async {
                self.present(alert, animated: true, completion: nil)
            }
        }

        @IBAction func dismissModal(_ sender: Any) {
            self.navigationController?.dismiss(animated: true, completion: nil)
        }
    }

Reset password flow

This flow is a 2 step process.

First, the user has to receive a confirmation code through email or SMS. It is done by calling forgotPassword(username: username). The details about how the code was sent can be retrieved from the UserCodeDeliveryDetails included in the response.

    /// Indicates the state of forgot password operation.
    public enum ForgotPasswordState {
        case done, confirmationCodeSent
    }

    /// Contains the result of the forgot password operation.
    public struct ForgotPasswordResult {
        public let forgotPasswordState: ForgotPasswordState
        public let codeDeliveryDetails: UserCodeDeliveryDetails?

        internal init(forgotPasswordState: ForgotPasswordState, codeDeliveryDetails: UserCodeDeliveryDetails?) {
            self.forgotPasswordState = forgotPasswordState
            self.codeDeliveryDetails = codeDeliveryDetails
        }
    }

Then this code is used to confirm the new password.

    confirmForgotPassword(username: username, 
                       newPassword: newPassword, 
                  confirmationCode: confirmationCode)

Here we have 2 screens:

Enter username
- ResetPasswordViewController
Confirm the verification code and enter a new password
- NewPasswordViewController

ResetPasswordViewController:

    import UIKit
    import AWSMobileClient

    class ResetPasswordViewController: UIViewController {

        @IBOutlet weak var usernameTextField: UITextField!

        @IBAction func submitUsername(_ sender: Any) {

            guard let username = usernameTextField.text else {
                print("No username")
                return
            }

            AWSMobileClient.sharedInstance().forgotPassword(username: username) { (forgotPasswordResult, error) in
                if let forgotPasswordResult = forgotPasswordResult {
                    switch(forgotPasswordResult.forgotPasswordState) {
                    case .confirmationCodeSent:
                        guard let codeDeliveryDetails = forgotPasswordResult.codeDeliveryDetails else {
                            return
                        }

                        let alert = UIAlertController(title: "Code sent",
                                                      message: "Confirmation code sent via \(codeDeliveryDetails.deliveryMedium) to: \(codeDeliveryDetails.destination!)",
                                                      preferredStyle: .alert)

                        DispatchQueue.main.async {
                            self.present(alert, animated: true, completion: nil)
                        }

                    default:
                        print("Error: Invalid case.")
                    }
                } else if let error = error {
                    print("Error occurred: \(error.localizedDescription)")
                }
            }


        }

        @IBAction func dismiss(_ sender: Any) {
            self.navigationController?.dismiss(animated: true, completion: nil)
        }
    }

NewPasswordViewController:

    import UIKit
    import AWSMobileClient

    class NewPasswordViewController: UIViewController {

        @IBOutlet weak var verificationCodeTextField: UITextField!
        @IBOutlet weak var newPasswordTextField: UITextField!

        var username: String?

        init(username: String, nibName nibNameOrNil: String? = nil, bundle nibBundleOrNil: Bundle? = nil) {
            self.username = username
            super.init(nibName:nibNameOrNil, bundle: nibBundleOrNil)
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        @IBAction func verifyCode(_ sender: Any) {

            guard let username = username,
                let newPassword = newPasswordTextField.text,
                let confirmationCode = verificationCodeTextField.text else {
                return
            }

            AWSMobileClient.sharedInstance().confirmForgotPassword(username: username,
                                                                   newPassword: newPassword,
                                                                   confirmationCode: confirmationCode) { (forgotPasswordResult, error) in
                if let forgotPasswordResult = forgotPasswordResult {
                    switch(forgotPasswordResult.forgotPasswordState) {
                    case .done:
                        self.dismiss(self)
                    default:
                        print("Error: Could not change password.")
                    }
                } else if let error = error {
                    print("Error occurred: \(error.localizedDescription)")
                }
            }
        }

        @IBAction func dismiss(_ sender: Any) {
            self.navigationController?.dismiss(animated: true, completion: nil)
        }
    }

Sign Out action

There is not much to say about it :) Call the following and the user will be logged out from the current device by clearing the local keychain store.

    AWSMobileClient.sharedInstance().signOut()

Also, this can be a global action that logs out the user from all active sessions - all the devices. It invalidates all tokens: id token, access token and refresh token.

Although the tokens are revoked, the AWS credentials will remain valid until they expire (which by default is 1 hour).

This is not a default behaviour, so we need to specify the signOut options using a SignOutOptions object:

    /// Signout options to change the default behavior.
    public struct SignOutOptions {
        let invalidateTokens: Bool
        let signOutGlobally: Bool

        /// Initializer: Signout options to change the default behavior.
        ///
        /// - Parameters:
        ///   - signOutGlobally: Invalidate all active sessions with the service. The user will be logged out of all devices.
        ///   - invalidateTokens: If functionality available, the access token, refresh token and id token will be invalidated and won't be usable.
        public init(signOutGlobally: Bool = false, invalidateTokens: Bool = true) {
            self.signOutGlobally = signOutGlobally
            self.invalidateTokens = invalidateTokens
        }
    }

    AWSMobileClient.sharedInstance().signOut(options: SignOutOptions(signOutGlobally: true)) { (error) in
        print("Error: \(error.debugDescription)")
    }

MainViewController:

    import UIKit
    import AWSMobileClient

    class MainViewController: UIViewController {

        @IBOutlet weak var logOutButton: UIButton!

        @IBAction func logOut(_ sender: Any) {
            AWSMobileClient.sharedInstance().signOut() { error in
                if let error = error {
                    print(error)
                    return
                }
            }


            let loginViewController = LoginViewController()
            UIApplication.setRootView(loginViewController)
        }

    }

When the signOut() action is complete, present the login screen.

Conclusion

That's it! And it's just one component from many others.

The Amplify library is a real game changer when it comes to development speed and reliability. Next step would be to use and handle other AWS services like Storage, Push Notifications or API.

It's really nice to focus on implementing features and not libraries.

Github link calincrist/aws_amplify_integration