Zuvo Docs

Guide

Build a User Management App with Expo React Native

Learn how to use Zuvo in your React Native App.

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:

Zuvo User Management example

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:

npx create-expo-app -t expo-template-blank-typescript expo-user-management

cd expo-user-management

Then install the additional dependencies:

npx expo install @supabase/supabase-js @react-native-async-storage/async-storage

Now create a helper file to initialize the Zuvo client using the API URL and the key that you copied earlier.

These variables are safe to expose in your Expo app since Zuvo has Row Level Security enabled on your Database.

LocalStorage

Code sample: see project quickstart in Zuvo Studio.

SecureStore

If you wish to encrypt the user's session information, you can use aes-js and store the encryption key in Expo SecureStore. The aes-js library is a reputable JavaScript-only implementation of the AES encryption algorithm in CTR mode. A new 256-bit encryption key is generated using the react-native-get-random-values library. This key is stored inside Expo's SecureStore, while the value is encrypted and placed inside AsyncStorage.

Make sure that:

  • You keep the expo-secure-storage, aes-js and react-native-get-random-values libraries up-to-date.
  • Choose the correct SecureStoreOptions for your app's needs. E.g. SecureStore.WHEN_UNLOCKED regulates when the data can be accessed.
  • Carefully consider optimizations or other modifications to the above example, as those can lead to introducing subtle security vulnerabilities.

Install the necessary dependencies in the root of your Expo project:

    npm install @supabase/supabase-js
    npm install @react-native-async-storage/async-storage
    npm install aes-js react-native-get-random-values
    npm install --save-dev @types/aes-js
    npx expo install expo-secure-store

Implement a LargeSecureStore class to pass in as Auth storage for the supabase-js client:

App styling

You can use the following StyleSheet component in styles/styles.ts to add style to the app:

Code sample: see project quickstart in Zuvo Studio.

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.

Code sample: see project quickstart in Zuvo Studio.

Account page

After a user signs in, let them edit their profile details and manage their account.

Create a new component for that called Account.tsx.

Code sample: see project quickstart in Zuvo Studio.

Launch!

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

Code sample: see project quickstart in Zuvo Studio.

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

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

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

Code sample: see project quickstart in Zuvo Studio.

Add the new widget

And then add the widget to the Account page:

Code sample: see project quickstart in Zuvo Studio.

Now run the prebuild command to get the application working on your chosen platform.

npx expo prebuild

At this stage you have a fully functional application!