Build a User Management App with Ionic Angular

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.
Supabase Auth - users log in through magic links sent to their email (without having to set up passwords).
Supabase Storage - users can upload a profile photo.

Supabase User Management example

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

Project setup

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.

Create a project

Create a new project in the Supabase Dashboard.
Enter your project details.
Wait for the new database to launch.

Set up the database schema

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.

Go to the SQL Editor page in the Dashboard.
Click User Management Starter.
Click Run.

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.


_10supabase link --project-ref <project-id>
_10# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>
_10supabase db pull

Get the API Keys

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.

Go to the API Settings page in the Dashboard.
Find your Project URL, anon, and service_role keys on this page.

Building the app

Let's start building the Angular app from scratch.

Initialize an Ionic Angular app

We can use the Ionic CLI to initialize an app called supabase-ionic-angular:


_10npm install -g @ionic/cli
_10ionic start supabase-ionic-angular blank --type angular
_10cd supabase-ionic-angular

Then let's install the only additional dependency: supabase-js


_10npm install @supabase/supabase-js

And finally, we want to save the environment variables in the src/environments/environment.ts file. All we need are the API URL and the anon key that you copied earlier. These variables will be exposed on the browser, and that's completely fine since we have Row Level Security enabled on our Database.

environment.ts


_10export const environment = {
_10  production: false,
_10  supabaseUrl: 'YOUR_SUPABASE_URL',
_10  supabaseKey: 'YOUR_SUPABASE_KEY',
_10}

Now that we have the API credentials in place, let's create a SupabaseService with ionic g s supabase to initialize the Supabase client and implement functions to communicate with the Supabase API.

src/app/supabase.service.ts


_80import { Injectable } from '@angular/core'
_80import { LoadingController, ToastController } from '@ionic/angular'
_80import { AuthChangeEvent, createClient, Session, SupabaseClient } from '@supabase/supabase-js'
_80import { environment } from '../environments/environment'
_80
_80export interface Profile {
_80  username: string
_80  website: string
_80  avatar_url: string
_80}
_80
_80@Injectable({
_80  providedIn: 'root',
_80})
_80export class SupabaseService {
_80  private supabase: SupabaseClient
_80
_80  constructor(
_80    private loadingCtrl: LoadingController,
_80    private toastCtrl: ToastController
_80  ) {
_80    this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey)
_80  }
_80
_80  get user() {
_80    return this.supabase.auth.getUser().then(({ data }) => data?.user)
_80  }
_80
_80  get session() {
_80    return this.supabase.auth.getSession().then(({ data }) => data?.session)
_80  }
_80
_80  get profile() {
_80    return this.user
_80      .then((user) => user?.id)
_80      .then((id) =>
_80        this.supabase.from('profiles').select(`username, website, avatar_url`).eq('id', id).single()
_80      )
_80  }
_80
_80  authChanges(callback: (event: AuthChangeEvent, session: Session | null) => void) {
_80    return this.supabase.auth.onAuthStateChange(callback)
_80  }
_80
_80  signIn(email: string) {
_80    return this.supabase.auth.signInWithOtp({ email })
_80  }
_80
_80  signOut() {
_80    return this.supabase.auth.signOut()
_80  }
_80
_80  async updateProfile(profile: Profile) {
_80    const user = await this.user
_80    const update = {
_80      ...profile,
_80      id: user?.id,
_80      updated_at: new Date(),
_80    }
_80
_80    return this.supabase.from('profiles').upsert(update)
_80  }
_80
_80  downLoadImage(path: string) {
_80    return this.supabase.storage.from('avatars').download(path)
_80  }
_80
_80  uploadAvatar(filePath: string, file: File) {
_80    return this.supabase.storage.from('avatars').upload(filePath, file)
_80  }
_80
_80  async createNotice(message: string) {
_80    const toast = await this.toastCtrl.create({ message, duration: 5000 })
_80    await toast.present()
_80  }
_80
_80  createLoader() {
_80    return this.loadingCtrl.create()
_80  }
_80}

Let's set up a route to manage logins and signups. We'll 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.

This guide will show the template inline, but the example app will have templateUrls

src/app/login/login.page.ts


_54import { Component, OnInit } from '@angular/core'
_54import { SupabaseService } from '../supabase.service'
_54
_54@Component({
_54  selector: 'app-login',
_54  template: `
_54    <ion-header>
_54      <ion-toolbar>
_54        <ion-title>Login</ion-title>
_54      </ion-toolbar>
_54    </ion-header>
_54
_54    <ion-content>
_54      <div class="ion-padding">
_54        <h1>Supabase + Ionic Angular</h1>
_54        <p>Sign in via magic link with your email below</p>
_54      </div>
_54      <ion-list inset="true">
_54        <form (ngSubmit)="handleLogin($event)">
_54          <ion-item>
_54            <ion-label position="stacked">Email</ion-label>
_54            <ion-input [(ngModel)]="email" name="email" autocomplete type="email"></ion-input>
_54          </ion-item>
_54          <div class="ion-text-center">
_54            <ion-button type="submit" fill="clear">Login</ion-button>
_54          </div>
_54        </form>
_54      </ion-list>
_54    </ion-content>
_54  `,
_54  styleUrls: ['./login.page.scss'],
_54})
_54export class LoginPage {
_54  email = ''
_54
_54  constructor(private readonly supabase: SupabaseService) {}
_54
_54  async handleLogin(event: any) {
_54    event.preventDefault()
_54    const loader = await this.supabase.createLoader()
_54    await loader.present()
_54    try {
_54      const { error } = await this.supabase.signIn(this.email)
_54      if (error) {
_54        throw error
_54      }
_54      await loader.dismiss()
_54      await this.supabase.createNotice('Check your email for the login link!')
_54    } catch (error: any) {
_54      await loader.dismiss()
_54      await this.supabase.createNotice(error.error_description || error.message)
_54    }
_54  }
_54}

Account page

After a user is signed in, we can allow them to edit their profile details and manage their account. Create an AccountComponent with ionic g page account Ionic CLI command.

src/app/account.page.ts


_99import { Component, OnInit } from '@angular/core'
_99import { Router } from '@angular/router'
_99import { Profile, SupabaseService } from '../supabase.service'
_99
_99@Component({
_99  selector: 'app-account',
_99  template: `
_99    <ion-header>
_99      <ion-toolbar>
_99        <ion-title>Account</ion-title>
_99      </ion-toolbar>
_99    </ion-header>
_99
_99    <ion-content>
_99      <form>
_99        <ion-item>
_99          <ion-label position="stacked">Email</ion-label>
_99          <ion-input type="email" name="email" [(ngModel)]="email" readonly></ion-input>
_99        </ion-item>
_99
_99        <ion-item>
_99          <ion-label position="stacked">Name</ion-label>
_99          <ion-input type="text" name="username" [(ngModel)]="profile.username"></ion-input>
_99        </ion-item>
_99
_99        <ion-item>
_99          <ion-label position="stacked">Website</ion-label>
_99          <ion-input type="url" name="website" [(ngModel)]="profile.website"></ion-input>
_99        </ion-item>
_99        <div class="ion-text-center">
_99          <ion-button fill="clear" (click)="updateProfile()">Update Profile</ion-button>
_99        </div>
_99      </form>
_99
_99      <div class="ion-text-center">
_99        <ion-button fill="clear" (click)="signOut()">Log Out</ion-button>
_99      </div>
_99    </ion-content>
_99  `,
_99  styleUrls: ['./account.page.scss'],
_99})
_99export class AccountPage implements OnInit {
_99  profile: Profile = {
_99    username: '',
_99    avatar_url: '',
_99    website: '',
_99  }
_99
_99  email = ''
_99
_99  constructor(
_99    private readonly supabase: SupabaseService,
_99    private router: Router
_99  ) {}
_99  ngOnInit() {
_99    this.getEmail()
_99    this.getProfile()
_99  }
_99
_99  async getEmail() {
_99    this.email = await this.supabase.user.then((user) => user?.email || '')
_99  }
_99
_99  async getProfile() {
_99    try {
_99      const { data: profile, error, status } = await this.supabase.profile
_99      if (error && status !== 406) {
_99        throw error
_99      }
_99      if (profile) {
_99        this.profile = profile
_99      }
_99    } catch (error: any) {
_99      alert(error.message)
_99    }
_99  }
_99
_99  async updateProfile(avatar_url: string = '') {
_99    const loader = await this.supabase.createLoader()
_99    await loader.present()
_99    try {
_99      const { error } = await this.supabase.updateProfile({ ...this.profile, avatar_url })
_99      if (error) {
_99        throw error
_99      }
_99      await loader.dismiss()
_99      await this.supabase.createNotice('Profile updated!')
_99    } catch (error: any) {
_99      await loader.dismiss()
_99      await this.supabase.createNotice(error.message)
_99    }
_99  }
_99
_99  async signOut() {
_99    console.log('testing?')
_99    await this.supabase.signOut()
_99    this.router.navigate(['/'], { replaceUrl: true })
_99  }
_99}

Launch!

Now that we have all the components in place, let's update AppComponent:

src/app/app.component.ts


_26import { Component } from '@angular/core'
_26import { Router } from '@angular/router'
_26import { SupabaseService } from './supabase.service'
_26
_26@Component({
_26  selector: 'app-root',
_26  template: `
_26    <ion-app>
_26      <ion-router-outlet></ion-router-outlet>
_26    </ion-app>
_26  `,
_26  styleUrls: ['app.component.scss'],
_26})
_26export class AppComponent {
_26  constructor(
_26    private supabase: SupabaseService,
_26    private router: Router
_26  ) {
_26    this.supabase.authChanges((_, session) => {
_26      console.log(session)
_26      if (session?.user) {
_26        this.router.navigate(['/account'])
_26      }
_26    })
_26  }
_26}

Then update the AppRoutingModule

src/app/app-routing.module.ts"


_23import { NgModule } from '@angular/core'
_23import { PreloadAllModules, RouterModule, Routes } from '@angular/router'
_23
_23const routes: Routes = [
_23  {
_23    path: '/',
_23    loadChildren: () => import('./login/login.module').then((m) => m.LoginPageModule),
_23  },
_23  {
_23    path: 'account',
_23    loadChildren: () => import('./account/account.module').then((m) => m.AccountPageModule),
_23  },
_23]
_23
_23@NgModule({
_23  imports: [
_23    RouterModule.forRoot(routes, {
_23      preloadingStrategy: PreloadAllModules,
_23    }),
_23  ],
_23  exports: [RouterModule],
_23})
_23export class AppRoutingModule {}

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


_10ionic serve

And the browser will automatically open to show the app.

Supabase Angular

Bonus: Profile photos

Every Supabase project is configured with Storage for managing large files like photos and videos.

Let's create an avatar for the user so that they can upload a profile photo.

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


_10npm 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.ts


_15import { enableProdMode } from '@angular/core'
_15import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
_15
_15import { AppModule } from './app/app.module'
_15import { environment } from './environments/environment'
_15
_15import { defineCustomElements } from '@ionic/pwa-elements/loader'
_15defineCustomElements(window)
_15
_15if (environment.production) {
_15  enableProdMode()
_15}
_15platformBrowserDynamic()
_15  .bootstrapModule(AppModule)
_15  .catch((err) => console.log(err))

Then create an AvatarComponent with this Ionic CLI command:


_10 ionic g component avatar --module=/src/app/account/account.module.ts --create-module

src/app/avatar.component.ts


_108import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
_108import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
_108import { SupabaseService } from '../supabase.service'
_108import { Camera, CameraResultType } from '@capacitor/camera'
_108import { addIcons } from 'ionicons'
_108import { person } from 'ionicons/icons'
_108@Component({
_108  selector: 'app-avatar',
_108  template: `
_108    <div class="avatar_wrapper" (click)="uploadAvatar()">
_108      <img *ngIf="_avatarUrl; else noAvatar" [src]="_avatarUrl" />
_108      <ng-template #noAvatar>
_108        <ion-icon name="person" class="no-avatar"></ion-icon>
_108      </ng-template>
_108    </div>
_108  `,
_108  style: [
_108    `
_108    :host {
_108       display: block;
_108       margin: auto;
_108       min-height: 150px;
_108    }
_108     :host .avatar_wrapper {
_108       margin: 16px auto 16px;
_108       border-radius: 50%;
_108       overflow: hidden;
_108       height: 150px;
_108       aspect-ratio: 1;
_108       background: var(--ion-color-step-50);
_108       border: thick solid var(--ion-color-step-200);
_108    }
_108     :host .avatar_wrapper:hover {
_108       cursor: pointer;
_108    }
_108     :host .avatar_wrapper ion-icon.no-avatar {
_108       width: 100%;
_108       height: 115%;
_108    }
_108     :host img {
_108       display: block;
_108       object-fit: cover;
_108       width: 100%;
_108       height: 100%;
_108    }
_108  `,
_108  ],
_108})
_108export class AvatarComponent {
_108  _avatarUrl: SafeResourceUrl | undefined
_108  uploading = false
_108
_108  @Input()
_108  set avatarUrl(url: string | undefined) {
_108    if (url) {
_108      this.downloadImage(url)
_108    }
_108  }
_108
_108  @Output() upload = new EventEmitter<string>()
_108
_108  constructor(
_108    private readonly supabase: SupabaseService,
_108    private readonly dom: DomSanitizer
_108  ) {
_108    addIcons({ person })
_108  }
_108
_108  async downloadImage(path: string) {
_108    try {
_108      const { data, error } = await this.supabase.downLoadImage(path)
_108      if (error) {
_108        throw error
_108      }
_108      this._avatarUrl = this.dom.bypassSecurityTrustResourceUrl(URL.createObjectURL(data!))
_108    } catch (error: any) {
_108      console.error('Error downloading image: ', error.message)
_108    }
_108  }
_108
_108  async uploadAvatar() {
_108    const loader = await this.supabase.createLoader()
_108    try {
_108      const photo = await Camera.getPhoto({
_108        resultType: CameraResultType.DataUrl,
_108      })
_108
_108      const file = await fetch(photo.dataUrl!)
_108        .then((res) => res.blob())
_108        .then((blob) => new File([blob], 'my-file', { type: `image/${photo.format}` }))
_108
_108      const fileName = `${Math.random()}-${new Date().getTime()}.${photo.format}`
_108
_108      await loader.present()
_108      const { error } = await this.supabase.uploadAvatar(fileName, file)
_108
_108      if (error) {
_108        throw error
_108      }
_108
_108      this.upload.emit(fileName)
_108    } catch (error: any) {
_108      this.supabase.createNotice(error.message)
_108    } finally {
_108      loader.dismiss()
_108    }
_108  }
_108}

And then, we can add the widget on top of the AccountComponent HTML template:

src/app/account.component.ts


_15template: `
_15<ion-header>
_15  <ion-toolbar>
_15    <ion-title>Account</ion-title>
_15  </ion-toolbar>
_15</ion-header>
_15
_15<ion-content>
_15  <app-avatar
_15    [avatarUrl]="this.profile?.avatar_url"
_15    (upload)="updateProfile($event)"
_15  ></app-avatar>
_15
_15<!-- input fields -->
_15`

Storage management

If you upload additional profile photos, they'll accumulate in the avatars bucket because of their random names with only the latest being referenced from public.profiles and the older versions getting orphaned.

To automatically remove obsolete storage objects, extend the database triggers. Note that it is not sufficient to delete the objects from the storage.objects table because that would orphan and leak the actual storage objects in the S3 backend. Instead, invoke the storage API within Postgres via the http extension.

Enable the http extension for the extensions schema in the Dashboard. Then, define the following SQL functions in the SQL Editor to delete storage objects via the API:


_34create or replace function delete_storage_object(bucket text, object text, out status int, out content text)
_34returns record
_34language 'plpgsql'
_34security definer
_34as $$
_34declare
_34  project_url text := '<YOURPROJECTURL>';
_34  service_role_key text := '<YOURSERVICEROLEKEY>'; --  full access needed
_34  url text := project_url||'/storage/v1/object/'||bucket||'/'||object;
_34begin
_34  select
_34      into status, content
_34           result.status::int, result.content::text
_34      FROM extensions.http((
_34    'DELETE',
_34    url,
_34    ARRAY[extensions.http_header('authorization','Bearer '||service_role_key)],
_34    NULL,
_34    NULL)::extensions.http_request) as result;
_34end;
_34$$;
_34
_34create or replace function delete_avatar(avatar_url text, out status int, out content text)
_34returns record
_34language 'plpgsql'
_34security definer
_34as $$
_34begin
_34  select
_34      into status, content
_34           result.status, result.content
_34      from public.delete_storage_object('avatars', avatar_url) as result;
_34end;
_34$$;

Next, add a trigger that removes any obsolete avatar whenever the profile is updated or deleted:


_32create or replace function delete_old_avatar()
_32returns trigger
_32language 'plpgsql'
_32security definer
_32as $$
_32declare
_32  status int;
_32  content text;
_32  avatar_name text;
_32begin
_32  if coalesce(old.avatar_url, '') <> ''
_32      and (tg_op = 'DELETE' or (old.avatar_url <> coalesce(new.avatar_url, ''))) then
_32    -- extract avatar name
_32    avatar_name := old.avatar_url;
_32    select
_32      into status, content
_32      result.status, result.content
_32      from public.delete_avatar(avatar_name) as result;
_32    if status <> 200 then
_32      raise warning 'Could not delete avatar: % %', status, content;
_32    end if;
_32  end if;
_32  if tg_op = 'DELETE' then
_32    return old;
_32  end if;
_32  return new;
_32end;
_32$$;
_32
_32create trigger before_profile_changes
_32  before update of avatar_url or delete on public.profiles
_32  for each row execute function public.delete_old_avatar();

Finally, delete the public.profile row before a user is deleted. If this step is omitted, you won't be able to delete users without first manually deleting their avatar image.


_14create or replace function delete_old_profile()
_14returns trigger
_14language 'plpgsql'
_14security definer
_14as $$
_14begin
_14  delete from public.profiles where id = old.id;
_14  return old;
_14end;
_14$$;
_14
_14create trigger before_delete_user
_14  before delete on auth.users
_14  for each row execute function public.delete_old_profile();

At this stage, you have a fully functional application!

Product

Data API

Development Cycle

Client Library Reference

Resources

Build a User Management App with Ionic Angular

Project setup

Create a project

Set up the database schema

Get the API Keys

Building the app

Initialize an Ionic Angular app

Account page

Launch!

Bonus: Profile photos

Create an upload widget

Add the new widget

Storage management

See also

Build a User Management App with Ionic Angular

Project setup#

Create a project#

Set up the database schema#

Get the API Keys#

Building the app#

Initialize an Ionic Angular app#

Set up a login route#

Account page#

Launch!#

Bonus: Profile photos#

Create an upload widget#

Add the new widget#

Storage management#

See also#

Project setup

Create a project

Set up the database schema

Get the API Keys

Building the app

Initialize an Ionic Angular app

Set up a login route

Account page

Launch!

Bonus: Profile photos

Create an upload widget

Add the new widget

Storage management

See also