Build a Modern Multi-User Chat App with React Native, Expo, Clerk & Appwrite (Real-Time)

Learn how to build a modern real-time chat application using React Native and Expo. You'll learn seamless user authentication with Clerk, including Google sign-in and the new Expo Passkeys integration for passwordless login. The backend uses Appwrite, which supports real-time subscriptions perfect for chat apps.

If you want to add secure, passwordless authentication and real-time messaging to your React Native app, this video walks you through the setup, dependencies, and code. It’s ideal for developers looking to build collaborative apps with modern auth and real-time features.

What's inside

Setting up passwordless authentication with Clerk and Expo Passkeys
Integrating Google sign-in using Clerk
Installing and configuring Appwrite backend with real-time subscriptions
Creating a new Expo app and resetting boilerplate
Managing dark mode and app configuration
Using performant lists with React Native’s Legend List
Implementing real-time chat rooms and message syncing
Handling user interface features like emoji, chat deletion, and keyboard awareness

Setting up passwordless authentication with Clerk and Expo Passkeys

I demonstrate how to integrate Clerk’s authentication system with Expo, focusing on passwordless login using the new Expo Passkeys module. This allows users to sign in without typing passwords by using biometric authentication like Touch ID or Face ID on supported devices.

You learn how to enable Passkeys in the Clerk dashboard, configure email as a contact method (required for Passkeys), and enroll devices using biometrics in the iOS simulator. The demo shows creating and deleting Passkeys, then signing in by scanning a fingerprint or face, making authentication seamless and secure.

Alongside Passkeys, the app supports Google sign-in through Clerk. This lets users authenticate with their Google accounts without managing passwords. I show signing in with two different Google accounts on separate devices to demonstrate multi-user support.

Clerk handles the OAuth flow and user sessions, simplifying the integration. This approach ensures users have multiple convenient options to authenticate, improving user experience in your chat app.

Installing and configuring Appwrite backend with real-time subscriptions

For the backend, I use Appwrite, which offers easy integration with React Native and supports real-time subscriptions. This is crucial for chat apps to instantly sync messages and chat rooms across users.

You see how to install the Appwrite SDK and its dependencies, including the React Native URL polyfill. I explain setting up Appwrite projects and configuring collections for chat rooms and messages, enabling real-time updates that keep all users in sync.

Creating a new Expo app and resetting boilerplate

I start by creating a new Expo app using Bun and resetting the project boilerplate with a custom script. This simplifies the app structure to just a layout and index, providing a clean slate to build the chat app.

You also learn how to open the project in VS Code and run it on iOS simulators, switching between devices like iPhone SE and iPhone 16 Pro to test features like Face ID and Touch ID.

Managing dark mode and app configuration

Since the app targets a modern look, I set the user interface style to always use dark mode in the app.json configuration. This ensures consistent theming across the app without supporting light mode.

Additionally, I show how to rename the app scheme to match the project name, helping keep your app organized and identifiable during development.

Using performant lists with React Native’s Legend List

To efficiently render chat messages and rooms, I use Legend List, a high-performance list component for React Native. It’s similar to FlatList but optimized for better performance in complex lists.

You see how to install a specific stable version (0.7.0) to avoid issues and integrate it into the app for smooth scrolling and rendering of chat content.

Implementing real-time chat rooms and message syncing

The core of the app is real-time collaboration. I show how users can create chat rooms, send messages with emojis, and see updates instantly on all connected devices.

It uses Appwrite’s real-time subscriptions to listen for new messages and chat room changes. The UI updates automatically with user profile pictures and message content, providing a minimal but beautiful chat experience.

Handling user interface features like emoji, chat deletion, and keyboard awareness

Additional UI features include emoji support in messages, deleting chat rooms, and keyboard awareness to avoid input fields being hidden when typing.

I demonstrate using the regular KeyboardAvoidingView from React Native to handle keyboard input gracefully on both iOS simulators. I also show how deleting a chat room removes it from all users’ views in real time.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Pro MembershipPro membership

Get access to exclusive tutorials, projects, and support.

Let's connect!