How to Build a Chat App with SwiftUI: Part 1
Tags: ios, swift, beginners, tutorial
Published: 2020-05-19 16:19:52

---
title: How to Build a Chat App with SwiftUI: Part 1
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9kboc27gurw94f6ndinp.png
tags: iOS, Swift, Beginners, Tutorial
canonical_url: https://getstream.io/blog/chat-app-swiftui-part1/
---

Note: Find a more up-to-date version of this article at: https://getstream.io/blog/chat-app-swiftui-part2/

In this tutorial, we'll build a simple chat application for iOS and macOS using SwiftUI and [Stream Chat's Swift SDK](https://github.com/getstream/stream-chat-swift). Although Stream provides a [suite of UIKit components](https://getstream.io/tutorials/ios-chat/) that work out-of-the-box, we can use use the low-level client to develop custom components with SwiftUI.

![Screenshot shows a chat between two users running on an iPhone simulator and macOS](https://dev-to-uploads.s3.amazonaws.com/i/9kboc27gurw94f6ndinp.png)

If you get lost during this tutorial, you can check the completed project in this [GitHub repo](https://github.com/getstream/stream-chat-swiftui-example). 

## What is SwiftUI?
> "SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that's easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync. Automatic support for Dynamic Type, Dark Mode, localization, and accessibility means your first line of SwiftUI code is already the most powerful UI code you've ever written."
> - [Apple Developer Portal: SwiftUI](https://developer.apple.com/xcode/swiftui/)

## What you need
- iOS 13+
- Xcode 11+
- A [Stream](https://getstream.io/accounts/signup/) account

## Step 1: Set up the Xcode project

To start, let's create a SwiftUI project in Xcode.

Select 'Single View App'.
![Creating Single View App Project on Xcode](https://dev-to-uploads.s3.amazonaws.com/i/i2xehld05zwf0kz0bafg.png)

And make sure to select 'SwiftUI' for the User Interface.
![Creating SwiftUI Project on Xcode](https://dev-to-uploads.s3.amazonaws.com/i/0kae8cvxnry51vo9kffl.png)

## Step 2: Set up the Stream Chat dependency

To install the [Stream Chat](https://github.com/getstream/stream-chat-swift) dependency, we'll use [CocoaPods](https://cocoapods.org/). If you prefer Carthage or Swift Package Manager, they're also supported.

In the folder where you saved the project, run `pod init` and add `StreamChat` to the `Podfile`. It should look similar to this:

{% gist https://gist.github.com/cardoso/991c3db30e241c70ebe37b0e47d1b4f6 %}

After you do that, run `pod install`, wait a bit for it to finish, and open the project via the `.xcworkspace` that was created.

## Step 3: Configure the Stream Chat Dashboard

Sign up at [GetStream.io](https://getstream.io), create the application, and make sure to select development instead of production.

![Screenshot of a user creating a development application at GetStream.io](https://dev-to-uploads.s3.amazonaws.com/i/6f68f1phdcxhsxd9t27g.png)

To make things simple for now, let's disable both auth checks and permission checks. Make sure to hit save. When your app is in production, you should keep these enabled.

![Screenshot of skip auth checks and permission being enabled in a Stream App dashboard](https://dev-to-uploads.s3.amazonaws.com/i/ir0vtvh2rgowvy0lohn0.png)

You can see the documentation about authentication [here](https://getstream.io/chat/docs/tokens_and_authentication/?language=swift) and permissions [here](https://getstream.io/chat/docs/chat_permission_policies/?language=swift).  

Now, save your credentials, as we'll need them to power the chat in the app. Since we disabled auth and permissions, we'll only really need the key for now, but in production, you'll use the secret in your backend to create JWTs to allow users to interact with your app securely.

![Screenshot of credentials on stream dashboard](https://dev-to-uploads.s3.amazonaws.com/i/1bl76070ym1iiw211wef.png)

As you can see, I've blacked out my keys. You should make sure to keep your credentials safe.

## Step 4: Configure Stream Chat SDK

Now that we've set up the project and Stream Chat dashboard let's configure the SDK's singleton with the Stream Chat App's key. The `didFinishLaunchingWithOptions` function in `AppDelegate.swift` should look similar to the following snippet.

{% gist https://gist.github.com/cardoso/993c79080a7787e446f029c0fcdd32dd %}

That will configure the `Client.shared` instance, which we'll use throughout this tutorial to make calls to the [Stream Chat API](https://getstream.io/chat/) and subscribe to events.

## Step 5: Create the Login View

Finally, we can start using the power of SwiftUI to build the login screen, which will look similar to the following screenshot.

![Screenshot shows a simple login screen running on the iPhone simulator](https://dev-to-uploads.s3.amazonaws.com/i/mn1oekkonyzu5nub02pm.png)

Let's create a `LoginView.swift` file and paste the following contents.

{% gist https://gist.github.com/cardoso/a9a700119091013beaea0bbc3a633aa6 %}

In that snippet of code, we create a `TextField` and a `Button`. The Button calls `Client.shared.set(user:)` with the contents of the TextField for the username. The callback to that function, if successful, will trigger the `NavigationLink` to the `ChatView` we'll create in the next step.

Note we're not collecting a password since we're skipping authentication for this tutorial, so anyone can log in as the username they choose. Also, usernames may not contains spaces and some special characters. It would be best if you handled the possible errors.

## Step 6: Create the Chat View

For this first part, we'll have a single channel that the user joins as soon as they log in. It will look similar to the screenshot below. We'll make it look a bit cozier in the next step. 

![Screenshot shows a simple chat screen with two users chatting running on the iPhone simulator](https://dev-to-uploads.s3.amazonaws.com/i/ik15pkjzh9d081vranb3.png)

Let's create a `ChatView.swift` file and paste the contents below.

{% gist https://gist.github.com/cardoso/2c31d0d9dd5d7eefdf531f99a11875e0 %}

In that snippet, all we do is create a `List` for the messages and a simple composer with a TextField and a Button that sends the message with the function `Client.shared.send(message:)`. We also add a callback for the `onAppear` of this View, which watches the channel with `channel.watch(options:)`, which allows us to receive `.messageNew` events with `channel.subscribe(forEvents:)`. We now have a functioning chat, though the UI can be improved.

## Step 7: Improving the message UI

Instead of that simple text cell, let's create a custom view for it, similar to how it's displayed in iMessage. It will look comparable to this screenshot.

![Screenshot shows the chat view running on iPhone simulator with chat bubbles similar to iMessage](https://i.imgur.com/AEb4Bor.png)

Create `MessageView.swift` and paste the following contents.

{% gist https://gist.github.com/cardoso/3e3b7852a57129119e1d113337baa3f0 %}

After that, replace the line `Text("\($0.user.id): \($0.text)")` in `ChatView.swift` with `MessageView(message: $0)`.

To remove the separators between the messages, you'll need to run this call before displaying the chat screen: `UITableView.appearance().separatorStyle = .none`. I suggest you put it in `AppDelegate.swift`, next to where you configure the Stream Chat Client.

## Wrapping up

Congratulations! You've built the basis of a functioning chat app with SwiftUI and Stream. In part two, we'll make a UI for creating and selecting channels. Stay tuned! Meanwhile, I encourage you to browse through SwiftUI's [docs](https://developer.apple.com/documentation/swiftui), Stream Chat's [docs](https://getstream.io/chat/docs/introduction/?language=swift), and experiment with the project you just built.