mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
d8bd6b047c
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated examples and guides to use Supabase publishable (client) keys instead of anon keys for client-side usage across frameworks and platforms. * Renamed environment variable examples and .env templates to reflect publishable key naming. * Adjusted sample requests and client-init examples to send/use the publishable key via the apikey header where applicable. * Updated references from service_role to secret for server-side credential guidance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: fadymak <fady@fadymak.com>
90 lines
2.4 KiB
Markdown
90 lines
2.4 KiB
Markdown
# 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](https://supabase.com/dashboard).
|
|
|
|
### 2. Set up the database
|
|
|
|
Run the following SQL in your Supabase SQL Editor to create the `profiles` table:
|
|
|
|
```sql
|
|
-- 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 publishable key:
|
|
|
|
```typescript
|
|
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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 5. Run the development server
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
|
|
|
## Learn More
|
|
|
|
- [Supabase Documentation](https://supabase.com/docs)
|
|
- [Angular Documentation](https://angular.io/docs)
|
|
- [Supabase Angular Tutorial](https://supabase.com/docs/guides/getting-started/tutorials/with-angular)
|