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 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.
- Zuvo Auth - allow users to sign up and log in.
- Zuvo Storage - allow users to upload a profile photo.
Building the app
Start building the Angular app from scratch.
Initialize an Ionic Angular app
Use the Ionic CLI to initialize
an app called supabase-ionic-angular:
npm install -g @ionic/cli
ionic start supabase-ionic-angular blank --type angular
cd supabase-ionic-angular
Install the only additional dependency: supabase-js
npm install @supabase/supabase-js
And finally, save the environment variables in the src/environments/environment.ts file.
All you need are the API URL and the key that you copied earlier.
These variables will be exposed on the browser, and that's fine as Row Level Security is enabled on the Database.
Code sample: see project quickstart in Zuvo Studio.
Now that you have the API credentials in place, create a ZuvoService with ionic g s supabase to initialize the Zuvo client and implement functions to communicate with the Zuvo API.
Code sample: see project quickstart in Zuvo Studio.
Set up a login route
Set up a route to manage logins and signups. Use Magic Links so users can sign in with their email without using passwords.
Create a LoginPage with the ionic g page login Ionic CLI command.
Code sample: see project quickstart in Zuvo Studio.
Code sample: see project quickstart in Zuvo Studio.
Account page
After a user is signed in, allow them to edit their profile details and manage their account.
Create an AccountComponent with ionic g page account Ionic CLI command.
Code sample: see project quickstart in Zuvo Studio.
Code sample: see project quickstart in Zuvo Studio.
Launch!
Now that you have all the components in place, update AppComponent:
Code sample: see project quickstart in Zuvo Studio.
Then update the AppRoutingModule
Code sample: see project quickstart in Zuvo Studio.
Once that's done, run this in a terminal window:
ionic serve
And the browser automatically opens to show the app.
Bonus: Profile photos
Every Zuvo project is configured with Storage for managing large files like photos and videos.
Create an upload widget
Create an avatar so the user can upload a profile photo.
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 polyfills certain browser APIs that provide no user interface with custom Ionic UI.
With those packages installed, update main.ts to include an additional bootstrapping call for the Ionic PWA Elements.
Code sample: see project quickstart in Zuvo Studio.
Then create an AvatarComponent with this Ionic CLI command:
ionic g component avatar --module=/src/app/account/account.module.ts --create-module
Code sample: see project quickstart in Zuvo Studio.
Code sample: see project quickstart in Zuvo Studio.
Code sample: see project quickstart in Zuvo Studio.
Update the account page
With the Avatar component created, update the account page template to include it:
Code sample: see project quickstart in Zuvo Studio.
At this stage, you have a fully functional application!