supabase/examples/user-management/angular-user-management

Supabase Angular User Management

This example demonstrates how to build a user management app with Angular and Supabase.

Features

• Magic link authentication (passwordless)
• User profile management
• Avatar upload with Supabase Storage

Getting Started

1. Create a Supabase project

Create a new project in the Supabase Dashboard.

2. Set up the database

Run the following SQL in your Supabase SQL Editor to create the profiles table:

-- Create a table for public profiles
create table profiles (
  id uuid references auth.users on delete cascade not null primary key,
  updated_at timestamp with time zone,
  username text unique,
  avatar_url text,
  website text,

  constraint username_length check (char_length(username) >= 3)
);

-- Set up Row Level Security (RLS)
alter table profiles enable row level security;

create policy "Public profiles are viewable by everyone." on profiles
  for select using (true);

create policy "Users can insert their own profile." on profiles
  for insert with check ((select auth.uid()) = id);

create policy "Users can update own profile." on profiles
  for update using ((select auth.uid()) = id);

-- Set up Storage
insert into storage.buckets (id, name)
  values ('avatars', 'avatars');

-- Set up access controls for storage. Allows downloading object with public key
-- See https://supabase.com/docs/guides/storage/security/access-control#policy-examples for more details.
create policy "Avatar images are publicly accessible." on storage.objects
  for select using (bucket_id = 'avatars' and storage.allow_any_operation(array['object.get_authenticated_info', 'object.get_authenticated']));

create policy "Anyone can upload an avatar." on storage.objects
  for insert with check (bucket_id = 'avatars');

3. Configure environment variables

Update the src/environments/environment.ts file with your Supabase project URL and publishable key:

export const environment = {
  production: false,
  supabaseUrl: 'YOUR_SUPABASE_URL',
  supabasePublishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY',
}

You can find these values in your Supabase project settings under API.

4. Install dependencies

npm install

5. Run the development server

npm start

Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Learn More

• Supabase Documentation
• Angular Documentation
• Supabase Angular Tutorial