Build a User Management App with Ionic React

<$Partial path="quickstart_intro.mdx" />

If you get stuck while working through this guide, refer to the full example on GitHub.

<$Partial path="project_setup.mdx" variables={{ "framework": "ionicreact", "tab": "mobiles" }} />

Building the app

Start building the React app from scratch.

Initialize an Ionic React app

Use the Ionic CLI to initialize an app called supabase-ionic-react:

npm install -g @ionic/cli
ionic start supabase-ionic-react blank --type react
cd supabase-ionic-react

Install the only additional dependency: supabase-js

npm install @supabase/supabase-js

Save the environment variables in a .env. You need the API URL and the key that you copied earlier.

<$CodeTabs>

VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_KEY=YOUR_SUPABASE_KEY

</$CodeTabs>

With the API credentials in place, create a helper file to initialize the Supabase client. These variables will be exposed in the browser, which is safe because they use a restricted publishable key and the SQL quickstart enables Row Level Security on the profiles table.

<$CodeSample path="/user-management/ionic-react-user-management/src/supabaseClient.ts" lines={[[1, -1]]} meta="name=src/supabaseClient.ts" />

Set up a login route

Set up a React component to manage logins and sign ups which uses Magic Links, so users can sign in with their email without using passwords.

<$CodeSample path="/user-management/ionic-react-user-management/src/pages/Login.tsx" lines={[[1, -1]]} meta="name=src/pages/Login.tsx" />

Account page

After a user signs in, they should be able to edit their profile details and manage their account.

Create a new component for that called Account.tsx.

<$CodeSample path="/user-management/ionic-react-user-management/src/pages/Account.tsx" lines={[[1, -1]]} meta="name=src/pages/Account.tsx" />

Launch!

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

<$CodeSample path="/user-management/ionic-react-user-management/src/App.tsx" lines={[[1, -1]]} meta="name=src/App.tsx" />

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

ionic serve

Then open your browser to the URL printed by ionic serve (by default, http://localhost:8100) 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.

Create an upload widget

First install two packages in order to interact with the user's camera.

npm install @ionic/pwa-elements @capacitor/camera

Capacitor is a cross platform native runtime from Ionic that enables web apps to be deployed through the app store and provides access to native device API.

Ionic PWA elements is a companion package that will polyfill certain browser APIs that provide no user interface with custom Ionic UI.

With those packages installed update index.tsx to include an additional bootstrapping call for the Ionic PWA Elements.

<$CodeSample path="/user-management/ionic-react-user-management/src/index.tsx" lines={[[1, -1]]} meta="name=src/index.tsx" />

Then create an AvatarComponent.

<$CodeSample path="/user-management/ionic-react-user-management/src/components/Avatar.tsx" lines={[[1, -1]]} meta="name=src/components/Avatar.tsx" />

Add the new widget

And then add the widget to the Account page:

<$CodeSample path="/user-management/ionic-react-user-management/src/pages/Account.tsx" lines={[[16, 16], [101, 110]]} meta="name=src/pages/Account.tsx" />

At this stage you have a fully functional application!