Build 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.

Supabase User Management example

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.

1
supabase link --project-ref <project-id>
2
# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>
3
supabase 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.

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.

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 legacy keys, copy the anon key for client-side operations and the service_role key for server-side operations from the Legacy API Keys tab.
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.

Read the API keys docs for a full explanation of all key types and their uses.

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:

1
npx create-expo-app -t expo-template-blank-typescript expo-user-management
2
3
cd expo-user-management

Then install the additional dependencies:

1
npx 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

1
import { createClient } from '@supabase/supabase-js'
2
import AsyncStorage from '@react-native-async-storage/async-storage'
3
4
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!
5
const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_KEY!
6
7
export const supabase = createClient(supabaseUrl, supabaseKey, {
8
  auth: {
9
    storage: AsyncStorage as any,
10
    autoRefreshToken: true,
11
    persistSession: true,
12
    detectSessionInUrl: false,
13
  },
14
})

View source

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

1
import React, { useState } from 'react'
2
import { Alert, StyleSheet, View } from 'react-native'
3
import { supabase } from '../lib/supabase'
4
import { Button, Input } from '@rneui/themed'
5
6
export default function Auth() {
7
  const [email, setEmail] = useState('')
8
  const [password, setPassword] = useState('')
9
  const [loading, setLoading] = useState(false)
10
11
  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
    })
18
19
    if (error) Alert.alert(error.message)
20
    setLoading(false)
21
  }
22
23
  async function signUpWithEmail() {
24
    setLoading(true)
25
    const { error } = await supabase.auth.signUp({
26
      email: email,
27
      password: password,
28
    })
29
30
    if (error) Alert.alert(error.message)
31
    setLoading(false)
32
  }
33
34
  return (
35
    <View>
36
      <View style={[styles.verticallySpaced, styles.mt20]}>
37
        <Input
38
          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
        <Input
48
          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
}
66
67
const 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
})

View source

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

1
import { useState, useEffect } from 'react'
2
import { supabase } from '../lib/supabase'
3
import { StyleSheet, View, Alert } from 'react-native'
4
import { Button, Input } from '@rneui/themed'
5
import Avatar from './Avatar'
6
7
export 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('')
12
13
  useEffect(() => {
14
    if (userId) getProfile()
15
  }, [userId])
16
17
  async function getProfile() {
18
    try {
19
      setLoading(true)
20
21
      let { data, error, status } = await supabase
22
        .from('profiles')
23
        .select(`username, website, avatar_url`)
24
        .eq('id', userId)
25
        .single()
26
      if (error && status !== 406) {
27
        throw error
28
      }
29
30
      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
  }
43
44
  async function updateProfile({
45
    username,
46
    website,
47
    avatar_url,
48
  }: {
49
    username: string
50
    website: string
51
    avatar_url: string
52
  }) {
53
    try {
54
      setLoading(true)
55
56
      const updates = {
57
        id: userId,
58
        username,
59
        website,
60
        avatar_url,
61
        updated_at: new Date(),
62
      }
63
64
      let { error } = await supabase.from('profiles').upsert(updates)
65
66
      if (error) {
67
        throw error
68
      }
69
    } catch (error) {
70
      if (error instanceof Error) {
71
        Alert.alert(error.message)
72
      }
73
    } finally {
74
      setLoading(false)
75
    }
76
  }
77
78
  return (
79
    <View>
80
      <View>
81
        <Avatar
82
          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>
99
100
      <View style={[styles.verticallySpaced, styles.mt20]}>
101
        <Button
102
          title={loading ? 'Loading ...' : 'Update'}
103
          onPress={() => updateProfile({ username, website, avatar_url: avatarUrl })}
104
          disabled={loading}
105
        />
106
      </View>
107
108
      <View style={styles.verticallySpaced}>
109
        <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />
110
      </View>
111
    </View>
112
  )
113
}
114
115
const 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
})

View source

Launch!#

Now that you have all the components in place, update App.tsx:

App.tsx

1
import 'react-native-url-polyfill/auto'
2
import { useState, useEffect } from 'react'
3
import { supabase } from './lib/supabase'
4
import Auth from './components/Auth'
5
import Account from './components/Account'
6
import { View } from 'react-native'
7
8
export default function App() {
9
  const [userId, setUserId] = useState<string | null>(null)
10
  const [email, setEmail] = useState<string | undefined>(undefined)
11
12
  useEffect(() => {
13
    supabase.auth.getClaims().then(({ data: { claims } }) => {
14
      if (claims) {
15
        setUserId(claims.sub)
16
        setEmail(claims.email)
17
      }
18
    })
19
20
    supabase.auth.onAuthStateChange(async (_event, _session) => {
21
      const { data: { claims } } = await supabase.auth.getClaims()
22
      if (claims) {
23
        setUserId(claims.sub)
24
        setEmail(claims.email)
25
      } else {
26
        setUserId(null)
27
        setEmail(undefined)
28
      }
29
    })
30
  }, [])
31
32
  return (
33
    <View>
34
      {userId ? <Account key={userId} userId={userId} email={email} /> : <Auth />}
35
    </View>
36
  )
37
}

View source

Once that's done, run this in a terminal window:

1
npm 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.

1
npx expo install expo-image-picker

Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:

components/Avatar.tsx

1
import { useState, useEffect } from 'react'
2
import { supabase } from '../lib/supabase'
3
import { StyleSheet, View, Alert, Image, Button } from 'react-native'
4
import * as ImagePicker from 'expo-image-picker'
5
6
interface Props {
7
  size: number
8
  url: string | null
9
  onUpload: (filePath: string) => void
10
}
11
12
export 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 }
16
17
  useEffect(() => {
18
    if (url) downloadImage(url)
19
  }, [url])
20
21
  async function downloadImage(path: string) {
22
    try {
23
      const { data, error } = await supabase.storage.from('avatars').download(path)
24
25
      if (error) {
26
        throw error
27
      }
28
29
      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
  }
40
41
  async function uploadAvatar() {
42
    try {
43
      setUploading(true)
44
45
      const result = await ImagePicker.launchImageLibraryAsync({
46
        mediaTypes: ['images'],
47
        allowsEditing: true,
48
        quality: 1,
49
      })
50
51
      if (result.canceled || !result.assets || result.assets.length === 0) {
52
        return
53
      }
54
55
      const image = result.assets[0]
56
      if (!image.uri) {
57
        throw new Error('No image uri!')
58
      }
59
60
      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}`
63
64
      const { error } = await supabase.storage.from('avatars').upload(filePath, arraybuffer, {
65
        contentType: image.mimeType ?? 'image/jpeg',
66
      })
67
68
      if (error) {
69
        throw error
70
      }
71
72
      onUpload(filePath)
73
    } catch (error) {
74
      if (error instanceof Error) {
75
        Alert.alert(error.message)
76
      }
77
    } finally {
78
      setUploading(false)
79
    }
80
  }
81
82
  return (
83
    <View>
84
      {avatarUrl ? (
85
        <Image
86
          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
        <Button title={uploading ? 'Uploading ...' : 'Upload'} onPress={uploadAvatar} disabled={uploading} />
95
      </View>
96
    </View>
97
  )
98
}
99
100
const styles = StyleSheet.create({
101
  avatar: {
102
    borderRadius: 5,
103
    overflow: 'hidden',
104
    maxWidth: '100%',
105
  },
106
  image: {
107
    objectFit: 'cover',
108
    paddingTop: 0,
109
  },
110
  noImage: {
111
    backgroundColor: '#333',
112
    borderRadius: 5,
113
  },
114
})

View source

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.

1
npx expo prebuild

At this stage you have a fully functional application!

Build a User Management App with Expo React Native

Project setup#

Create a project#

Set up the database schema#

Get API details#

Changes to API keys

Building the app#

Initialize a React Native app#

lib/supabase.ts

components/Auth.tsx

Account page#

components/Account.tsx

Launch!#

App.tsx

Bonus: Profile photos#

Additional dependency installation#

Create an upload widget#

components/Avatar.tsx

Add the new widget#

Is this helpful?

AI Tools

Build a User Management App with Expo React Native

Project setup#

Create a project#

Set up the database schema#

Get API details#

Changes to API keys

Building the app#

Initialize a React Native app#

lib/supabase.ts

Set up a login component#

components/Auth.tsx

Account page#

components/Account.tsx

Launch!#

App.tsx

Bonus: Profile photos#

Additional dependency installation#

Create an upload widget#

components/Avatar.tsx

Add the new widget#

Is this helpful?

AI Tools