mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Ahmad Yasser
63b80b5e92
### What kind of change does this PR introduce? Bug fix — corrects a TypeScript initialization error in the Angular user management tutorial example. ### What is the current behavior? In the Angular tutorial's `AuthComponent`, `signInForm` is declared with a non-null assertion (`signInForm!: FormGroup`) and initialized inside `ngOnInit()`. This causes a TypeScript strict-mode error because `formBuilder` is used before the constructor runs. Developers following the tutorial encounter: > Property 'formBuilder' is used before being initialized. ### What is the new behavior? `signInForm` is now initialized in the constructor, matching the pattern already used by `AccountComponent` in the same example project. The non-null assertion is removed since the property is properly assigned during construction. ### Changes **`examples/user-management/angular-user-management/src/app/auth/auth.component.ts`** - Moved `signInForm` initialization from `ngOnInit()` into the constructor - Removed non-null assertion operator (`!`) from `signInForm` declaration - Reordered property declarations for consistency (`loading` before `signInForm`) ### Additional context The sibling `AccountComponent` already follows the correct pattern — initializing `updateProfileForm` inside the constructor (line 35). This PR aligns `AuthComponent` with that established convention. Closes #34392 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a loading indicator state to the authentication form. * **Refactor** * Restructured form initialization logic for improved component setup. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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
create policy "Avatar images are publicly accessible." on storage.objects
for select using (bucket_id = 'avatars');
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 anon key:
export const environment = {
production: false,
supabaseUrl: 'YOUR_SUPABASE_URL',
supabaseKey: 'YOUR_SUPABASE_ANON_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.