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 Angular CLI to initialize
an app called supabase-angular:
_10
npx ng new supabase-angular --routing false --style css --standalone false
_10
cd supabase-angular
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 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.
src/environments/environment.ts
_10
export 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 ng g s supabase to initialize the Supabase client and implement functions to communicate with the Supabase API.
src/app/supabase.service.ts
_73
import { Injectable } from '@angular/core'
_73
import {
_73
AuthChangeEvent,
_73
AuthSession,
_73
createClient,
_73
Session,
_73
SupabaseClient,
_73
User,
_73
} from '@supabase/supabase-js'
_73
import { environment } from '../environments/environment'
Let's set up an Angular component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
Create an AuthComponent with ng g c auth Angular CLI command.
src/app/auth/auth.component.ts
_38
import { Component } from '@angular/core'
_38
import { FormBuilder } from '@angular/forms'
_38
import { SupabaseService } from '../supabase.service'
_38
_38
@Component({
_38
selector: 'app-auth',
_38
templateUrl: './auth.component.html',
_38
styleUrls: ['./auth.component.css'],
_38
})
_38
export class AuthComponent {
_38
loading = false
_38
_38
signInForm = this.formBuilder.group({
_38
email: '',
_38
})
_38
_38
constructor(
_38
private readonly supabase: SupabaseService,
_38
private readonly formBuilder: FormBuilder
_38
) {}
_38
_38
async onSubmit(): Promise<void> {
_38
try {
_38
this.loading = true
_38
const email = this.signInForm.value.email as string
Users also need a way to edit their profile details and manage their accounts after signing in.
Create an AccountComponent with the ng g c account Angular CLI command.
src/app/account/account.component.ts
_90
import { Component, Input, OnInit } from '@angular/core'
_90
import { FormBuilder } from '@angular/forms'
_90
import { AuthSession } from '@supabase/supabase-js'
_90
import { Profile, SupabaseService } from '../supabase.service'