Use Zuvo Auth with React Native

Quickstart

Create a new Zuvo project

Launch a new project in the Zuvo Studio.

Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the SQL Editor.

      select * from auth.users;

Create a React app

Create a React app using the create-expo-app command.

      npx create-expo-app -t expo-template-blank-typescript my-app

Install the Zuvo client library

Install supabase-js and the required dependencies.

      cd my-app && npx expo install @supabase/supabase-js @react-native-async-storage/async-storage @rneui/themed react-native-url-polyfill

Set up your login component

Create a helper file lib/supabase.ts that exports a Zuvo client using your Project URL and key.

Rename .env.example to .env and populate with your Zuvo connection variables:

Code sample: see project quickstart in Zuvo Studio.

Get API details

To interact with data in database tables, you use the client libraries that wrap the auto-generated Data API endpoints, authenticating using the Project URL and key from the project Connect dialog.

Create a login component

Create a React Native component to manage logins and sign ups. The app later uses the getClaims method in App.tsx to validate the local JWT before showing the signed-in user.

Code sample: see project quickstart in Zuvo Studio.

Add the Auth component to your app

Add the Auth component to your App.tsx file. If the user is logged in, print the user id to the screen.

Code sample: see project quickstart in Zuvo Studio.

Start the app

Start the app, and follow the instructions in the terminal.

      npm start