rembBuild a User Management App with Expo React Native
This tutorial demonstrates how to build a basic user management app. The app authenticates and identifies the user, stores their profile information in the database, and allows the user to log in, update their profile details, and upload a profile photo. The app uses:
- Supabase Database - a Postgres database for storing your user data and Row Level Security so data is protected and users can only access their own information.
- Supabase Auth - allow users to sign up and log in.
- Supabase Storage - allow users to upload a profile photo.
If you get stuck while working through this guide, refer to the full example on GitHub.
Project setup#
Before you start building you need to set up the Database and API. You can do this by starting a new Project in Supabase and then creating a "schema" inside the database.
Create a project#
- Create a new project in the Supabase Dashboard.
- Enter your project details.
- Wait for the new database to launch.
Set up the database schema#
Now set up the database schema. You can use the "User Management Starter" quickstart in the SQL Editor, or you can copy/paste the SQL from below and run it.
- Go to the SQL Editor page in the Dashboard.
- Click User Management Starter under the Community > Quickstarts tab.
- Click Run.
You can pull the database schema down to your local project by running the db pull command. Read the local development docs for detailed instructions.
1supabase link --project-ref <project-id>2# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>3supabase db pull
Get API details#
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
To do this, you need to get the Project URL and key from the project Connect dialog.
Read the API keys docs for a full explanation of all key types and their uses.
Changes to API keys
Supabase is changing the way keys work to improve project security and developer experience. You can read the full announcement, but in the transition period, you can use both the current anon and service_role keys and the new publishable key with the form sb_publishable_xxx which will replace the older keys.
The legacy keys will be deprecated shortly, so we strongly encourage switching to and using the new publishable and secret API keys.
In most cases, you can get the correct key from the Project's Connect dialog, but if you want a specific key, you can find all keys in the API Keys section of a Project's Settings page:
For new keys, open the API Keys tab, if you don't have a publishable key already, click Create new API Keys, and copy the value from the Publishable key section.
Building the app#
Start by building the React Native app from scratch.
Initialize a React Native app#
Use expo to initialize an app called expo-user-management:
1npx create-expo-app -t expo-template-blank-typescript expo-user-management23cd expo-user-management
Then install the additional dependencies:
1npx expo install @supabase/supabase-js @rneui/themed expo-sqlite
Now create a helper file to initialize the Supabase client using the API URL and the key that you copied earlier.
These variables are safe to expose in your Expo app since Supabase has Row Level Security enabled on your Database.
lib/supabase.ts
1import { createClient } from '@supabase/supabase-js'2import AsyncStorage from '@react-native-async-storage/async-storage'34const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!5const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_KEY!67export const supabase = createClient(supabaseUrl, supabaseKey, {8 auth: {9 storage: AsyncStorage as any,10 autoRefreshToken: true,11 persistSession: true,12 detectSessionInUrl: false,13 },14})
Set up a login component#
Set up a React Native component to manage logins and sign ups. Users should be able to sign in with their email and password.
components/Auth.tsx
1import React, { useState } from 'react'2import { Alert, StyleSheet, View } from 'react-native'3import { supabase } from '../lib/supabase'4import { Button, Input } from '@rneui/themed'56export default function Auth() {7 const [email, setEmail] = useState('')8 const [password, setPassword] = useState('')9 const [loading, setLoading] = useState(false)1011 async function signInWithEmail() {12 setLoading(true)13 console.log({ email, password })14 const { error } = await supabase.auth.signInWithPassword({15 email: email,16 password: password,17 })1819 if (error) Alert.alert(error.message)20 setLoading(false)21 }2223 async function signUpWithEmail() {24 setLoading(true)25 const { error } = await supabase.auth.signUp({26 email: email,27 password: password,28 })2930 if (error) Alert.alert(error.message)31 setLoading(false)32 }3334 return (35 <View>36 <View style={[styles.verticallySpaced, styles.mt20]}>37 <Input38 label="Email"39 leftIcon={{ type: 'font-awesome', name: 'envelope' }}40 onChangeText={(text) => setEmail(text)}41 value={email}42 placeholder="email@address.com"43 autoCapitalize={'none'}44 />45 </View>46 <View style={styles.verticallySpaced}>47 <Input48 label="Password"49 leftIcon={{ type: 'font-awesome', name: 'lock' }}50 onChangeText={(text) => setPassword(text)}51 value={password}52 secureTextEntry={true}53 placeholder="Password"54 autoCapitalize={'none'}55 />56 </View>57 <View style={[styles.verticallySpaced, styles.mt20]}>58 <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />59 </View>60 <View style={styles.verticallySpaced}>61 <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />62 </View>63 </View>64 )65}6667const styles = StyleSheet.create({68 container: {69 marginTop: 40,70 padding: 12,71 },72 verticallySpaced: {73 paddingTop: 4,74 paddingBottom: 4,75 alignSelf: 'stretch',76 },77 mt20: {78 marginTop: 20,79 },80})
By default Supabase Auth requires email verification before a session is created for the users. To support email verification you need to implement deep link handling!
While testing, you can disable email confirmation in your project's email auth provider settings.
Account page#
After a user signs in, you can let them to edit their profile details and manage their account.
Create a new component for that called Account.tsx.
components/Account.tsx
1import { useState, useEffect } from 'react'2import { supabase } from '../lib/supabase'3import { StyleSheet, View, Alert } from 'react-native'4import { Button, Input } from '@rneui/themed'5import Avatar from './Avatar'67export default function Account({ userId, email }: { userId: string; email?: string }) {8 const [loading, setLoading] = useState(true)9 const [username, setUsername] = useState('')10 const [website, setWebsite] = useState('')11 const [avatarUrl, setAvatarUrl] = useState('')1213 useEffect(() => {14 if (userId) getProfile()15 }, [userId])1617 async function getProfile() {18 try {19 setLoading(true)2021 let { data, error, status } = await supabase22 .from('profiles')23 .select(`username, website, avatar_url`)24 .eq('id', userId)25 .single()26 if (error && status !== 406) {27 throw error28 }2930 if (data) {31 setUsername(data.username)32 setWebsite(data.website)33 setAvatarUrl(data.avatar_url)34 }35 } catch (error) {36 if (error instanceof Error) {37 Alert.alert(error.message)38 }39 } finally {40 setLoading(false)41 }42 }4344 async function updateProfile({45 username,46 website,47 avatar_url,48 }: {49 username: string50 website: string51 avatar_url: string52 }) {53 try {54 setLoading(true)5556 const updates = {57 id: userId,58 username,59 website,60 avatar_url,61 updated_at: new Date(),62 }6364 let { error } = await supabase.from('profiles').upsert(updates)6566 if (error) {67 throw error68 }69 } catch (error) {70 if (error instanceof Error) {71 Alert.alert(error.message)72 }73 } finally {74 setLoading(false)75 }76 }7778 return (79 <View>80 <View>81 <Avatar82 size={200}83 url={avatarUrl}84 onUpload={(url: string) => {85 setAvatarUrl(url)86 updateProfile({ username, website, avatar_url: url })87 }}88 />89 </View>90 <View style={[styles.verticallySpaced, styles.mt20]}>91 <Input label="Email" value={email} disabled />92 </View>93 <View style={styles.verticallySpaced}>94 <Input label="Username" value={username || ''} onChangeText={(text) => setUsername(text)} />95 </View>96 <View style={styles.verticallySpaced}>97 <Input label="Website" value={website || ''} onChangeText={(text) => setWebsite(text)} />98 </View>99100 <View style={[styles.verticallySpaced, styles.mt20]}>101 <Button102 title={loading ? 'Loading ...' : 'Update'}103 onPress={() => updateProfile({ username, website, avatar_url: avatarUrl })}104 disabled={loading}105 />106 </View>107108 <View style={styles.verticallySpaced}>109 <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />110 </View>111 </View>112 )113}114115const styles = StyleSheet.create({116 container: {117 marginTop: 40,118 padding: 12,119 },120 verticallySpaced: {121 paddingTop: 4,122 paddingBottom: 4,123 alignSelf: 'stretch',124 },125 mt20: {126 marginTop: 20,127 },128})
Launch
Now that you have all the components in place, update App.tsx:
App.tsx
1import 'react-native-url-polyfill/auto'2import { useState, useEffect } from 'react'3import { supabase } from './lib/supabase'4import Auth from './components/Auth'5import Account from './components/Account'6import { View } from 'react-native'78export default function App() {9 const [userId, setUserId] = useState<string | null>(null)10 const [email, setEmail] = useState<string | undefined>(undefined)1112 useEffect(() => {13 supabase.auth.getClaims().then(({ data: { claims } }) => {14 if (claims) {15 setUserId(claims.sub)16 setEmail(claims.email)17 }18 })1920 supabase.auth.onAuthStateChange(async (_event, _session) => {21 const {22 data: { claims },23 } = await supabase.auth.getClaims()24 if (claims) {25 setUserId(claims.sub)26 setEmail(claims.email)27 } else {28 setUserId(null)29 setEmail(undefined)30 }31 })32 }, [])3334 return <View>{userId ? <Account key={userId} userId={userId} email={email} /> : <Auth />}</View>35}
Once that's done, run this in a terminal window:
1npm start
And then press the appropriate key for the environment you want to test the app in and you should see the completed app.
Bonus: Profile photos#
Every Supabase project is configured with Storage for managing large files like photos and videos.
Additional dependency installation#
You need an image picker that works on the environment you are building the project for, this example uses expo-image-picker.
1npx expo install expo-image-picker
Create an upload widget#
Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:
components/Avatar.tsx
1import { useState, useEffect } from 'react'2import { supabase } from '../lib/supabase'3import { StyleSheet, View, Alert, Image, Button } from 'react-native'4import * as ImagePicker from 'expo-image-picker'56interface Props {7 size: number8 url: string | null9 onUpload: (filePath: string) => void10}1112export default function Avatar({ url, size = 150, onUpload }: Props) {13 const [uploading, setUploading] = useState(false)14 const [avatarUrl, setAvatarUrl] = useState<string | null>(null)15 const avatarSize = { height: size, width: size }1617 useEffect(() => {18 if (url) downloadImage(url)19 }, [url])2021 async function downloadImage(path: string) {22 try {23 const { data, error } = await supabase.storage.from('avatars').download(path)2425 if (error) {26 throw error27 }2829 const fr = new FileReader()30 fr.readAsDataURL(data)31 fr.onload = () => {32 setAvatarUrl(fr.result as string)33 }34 } catch (error) {35 if (error instanceof Error) {36 console.log('Error downloading image: ', error.message)37 }38 }39 }4041 async function uploadAvatar() {42 try {43 setUploading(true)4445 const result = await ImagePicker.launchImageLibraryAsync({46 mediaTypes: ['images'],47 allowsEditing: true,48 quality: 1,49 })5051 if (result.canceled || !result.assets || result.assets.length === 0) {52 return53 }5455 const image = result.assets[0]56 if (!image.uri) {57 throw new Error('No image uri!')58 }5960 const arraybuffer = await fetch(image.uri).then((res) => res.arrayBuffer())61 const fileExt = image.uri.split('.').pop()?.toLowerCase() ?? 'jpeg'62 const filePath = `${Math.random()}.${fileExt}`6364 const { error } = await supabase.storage.from('avatars').upload(filePath, arraybuffer, {65 contentType: image.mimeType ?? 'image/jpeg',66 })6768 if (error) {69 throw error70 }7172 onUpload(filePath)73 } catch (error) {74 if (error instanceof Error) {75 Alert.alert(error.message)76 }77 } finally {78 setUploading(false)79 }80 }8182 return (83 <View>84 {avatarUrl ? (85 <Image86 source={{ uri: avatarUrl }}87 accessibilityLabel="Avatar"88 style={[avatarSize, styles.avatar, styles.image]}89 />90 ) : (91 <View style={[avatarSize, styles.avatar, styles.noImage]} />92 )}93 <View>94 <Button95 title={uploading ? 'Uploading ...' : 'Upload'}96 onPress={uploadAvatar}97 disabled={uploading}98 />99 </View>100 </View>101 )102}103104const styles = StyleSheet.create({105 avatar: {106 borderRadius: 5,107 overflow: 'hidden',108 maxWidth: '100%',109 },110 image: {111 objectFit: 'cover',112 paddingTop: 0,113 },114 noImage: {115 backgroundColor: '#333',116 borderRadius: 5,117 },118})
Add the new widget#
And then add the widget to the Account page. The Account.tsx component shown earlier already includes the Avatar component when using the full example code.
Now run the prebuild command to get the application working on your chosen platform.
1npx expo prebuild
At this stage you have a fully functional application!