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:
Supabase 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.
Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase and then creating a "schema" inside the database.
Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor, or you can just copy/paste the SQL from below and run it yourself.
You can easily pull the database schema down to your local project by running the db pull command. Read the local development docs for detailed instructions.
_10
supabase link --project-ref <project-id>
_10
# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
We just need to get the Project URL and anon key from the API settings.
We can use the Ionic CLI to initialize
an app called supabase-ionic-vue:
_10
npm install -g @ionic/cli
_10
ionic start supabase-ionic-vue blank --type vue
_10
cd supabase-ionic-vue
Then let's install the only additional dependency: supabase-js
_10
npm install @supabase/supabase-js
And finally we want to save the environment variables in a .env.
All we need are the API URL and the anon key that you copied earlier.
.env
_10
VUE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
_10
VUE_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
on the browser, and that's completely fine since we have Row Level Security enabled on our Database.
src/supabase.ts"
_10
import { createClient } from '@supabase/supabase-js';
_10
_10
const supabaseUrl = process.env.VUE_APP_SUPABASE_URL as string;
_10
const supabaseAnonKey = process.env.VUE_APP_SUPABASE_ANON_KEY as string;
First install two packages in order to interact with the user's camera.
_10
npm install @ionic/pwa-elements @capacitor/camera
CapacitorJS 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 we can update our main.ts to include an additional bootstrapping call for the Ionic PWA Elements.
src/main.tsx"
_18
import { createApp } from 'vue'
_18
import App from './App.vue'
_18
import router from './router'
_18
_18
import { IonicVue } from '@ionic/vue'
_18
/* Core CSS required for Ionic components to work properly */
_18
import '@ionic/vue/css/ionic.bundle.css'
_18
_18
/* Theme variables */
_18
import './theme/variables.css'
_18
_18
import { defineCustomElements } from '@ionic/pwa-elements/loader'