Mobile | Sun Mar 30 20258,111 views
Modern Chat App
Hi there! 👋
Learn how to build a real-time multi-user chat app using React Native and Expo with Clerk for Passkeys & Google Sign-In and Appwrite for the backend. Seamless auth, modern UI, real-time updates—everything you need to ship a production-ready chat app.
This project includes a figma design with the UI components. Feel free to use it as a reference or clone it to your own Figma account.
Prerequisites
- Clerk Account
- Appwrite Account
- Apple Team ID (for passkeys on iOS)
Dependencies
Clerk Authentication
bun add @clerk/clerk-expo @clerk/types @clerk/expo-passkeys
npx expo install expo-secure-store expo-auth-session expo-crypto expo-web-browser expo-build-properties
@clerk/clerk-expo
: Core Clerk SDK for Expo/React Native apps@clerk/types
: TypeScript types for Clerk@clerk/expo-passkeys
: Enables passkey (biometric) authenticationexpo-secure-store
: Provides secure storage for tokensexpo-auth-session
&expo-web-browser
: Required for OAuth flows (Google Sign-in)expo-crypto
: Handles cryptographic operationsexpo-build-properties
: Configures native build settings
Clerk Configuration
Add to your app.json
:
{
"expo": {
"ios": {
"associatedDomains": [
"applinks:your-clerk-app-link.clerk.accounts.dev",
"webcredentials:your-clerk-app-link.clerk.accounts.dev"
]
},
"plugins": [
"expo-secure-store",
[
"expo-build-properties",
{
"ios": {
"deploymentTarget": "16.0" // Required for passkeys
}
}
]
]
}
}
Appwrite Backend
npx expo install react-native-appwrite react-native-url-polyfill
react-native-appwrite
: Appwrite SDK for React Native (using v0.7.0 for stability)react-native-url-polyfill
: Polyfill for URL handling in React Native
UI Components
npx expo install @legendapp/list
@legendapp/list
: High-performance virtualized list component for React Native
Environment Variables
Create a .env.local
file in the root of your project and add the following variables:
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your-key-here
EXPO_PUBLIC_APPWRITE_APP_ID=your-app-write-app-id