React Native file upload with Supabase Storage

In this tutorial, we will be building a React Native app with Expo SDK49. We will use Supabase for user authentication and file storage. The app will have protected routes that can only be accessed by authenticated users. We will also be using Expo Router v2 for navigation and Expo Secure Store for managing the Supabase session.

To start, we need to set up a Supabase project with authentication and storage. We will disable email confirmation for simplicity. We will also create a bucket under storage and add some security rules to protect the files.

Next, we will set up our React Native app. We will create a new Expo app with the tabs template and install the necessary dependencies. We will use Expo Secure Store to store the Supabase session and Expo Image Picker to select images from the device.

To connect our app to Supabase, we will initialize the Supabase client with the project URL and the public key. We will use Expo Secure Store to store the session and create a helper function to handle the session.

We will then create a new page for the app using Expo Router v2. This page will be the first page that comes up in our app. We will create a form to upload files and add logic to handle file selection and submission.

Finally, we will create protected routes that can only be accessed by authenticated users. We will use Supabase authentication to check if a user is logged in and navigate to the appropriate pages.

That's it! We have now set up a React Native app with Supabase authentication and file storage. Users can upload files and access protected routes. You can find the full source code on GitHub to get started with Supabase quickly.