How to Use Supabase with Angular

1npm install @supabase/supabase-js

1// src/environments/environment.ts
2export const environment = {
3  production: false,
4  supabaseUrl: 'https://your-project-ref.supabase.co',
5  supabaseAnonKey: 'your-anon-key-here'
6};
7
8// src/environments/environment.prod.ts
9export const environment = {
10  production: true,
11  supabaseUrl: 'https://your-project-ref.supabase.co',
12  supabaseAnonKey: 'your-anon-key-here'
13};

1// src/app/services/supabase.service.ts
2import { Injectable } from '@angular/core';
3import { createClient, SupabaseClient, User } from '@supabase/supabase-js';
4import { BehaviorSubject } from 'rxjs';
5import { environment } from '../../environments/environment';
6
7@Injectable({ providedIn: 'root' })
8export class SupabaseService {
9  private supabase: SupabaseClient;
10  private currentUser = new BehaviorSubject<User | null>(null);
11  currentUser$ = this.currentUser.asObservable();
12
13  constructor() {
14    this.supabase = createClient(
15      environment.supabaseUrl,
16      environment.supabaseAnonKey
17    );
18
19    this.supabase.auth.onAuthStateChange((event, session) => {
20      this.currentUser.next(session?.user ?? null);
21    });
22  }
23
24  get client(): SupabaseClient {
25    return this.supabase;
26  }
27}

1// Add to SupabaseService class
2async signUp(email: string, password: string) {
3  const { data, error } = await this.supabase.auth.signUp({
4    email,
5    password
6  });
7  if (error) throw error;
8  return data;
9}
10
11async signIn(email: string, password: string) {
12  const { data, error } = await this.supabase.auth.signInWithPassword({
13    email,
14    password
15  });
16  if (error) throw error;
17  return data;
18}
19
20async signOut() {
21  const { error } = await this.supabase.auth.signOut();
22  if (error) throw error;
23}

1// Add interface and methods to SupabaseService
2interface Todo {
3  id: number;
4  title: string;
5  is_complete: boolean;
6  user_id: string;
7}
8
9async getTodos(): Promise<Todo[]> {
10  const { data, error } = await this.supabase
11    .from('todos')
12    .select('*')
13    .order('id', { ascending: true });
14  if (error) throw error;
15  return data as Todo[];
16}
17
18async addTodo(title: string): Promise<Todo> {
19  const { data, error } = await this.supabase
20    .from('todos')
21    .insert({ title, is_complete: false })
22    .select()
23    .single();
24  if (error) throw error;
25  return data as Todo;
26}
27
28async updateTodo(id: number, updates: Partial<Todo>): Promise<Todo> {
29  const { data, error } = await this.supabase
30    .from('todos')
31    .update(updates)
32    .eq('id', id)
33    .select()
34    .single();
35  if (error) throw error;
36  return data as Todo;
37}

1// src/app/components/todo-list/todo-list.component.ts
2import { Component, OnInit } from '@angular/core';
3import { SupabaseService } from '../../services/supabase.service';
4
5@Component({
6  selector: 'app-todo-list',
7  template: `
8    <div *ngIf="(supabaseService.currentUser$ | async) as user; else login">
9      <h2>Todos for {{ user.email }}</h2>
10      <ul>
11        <li *ngFor="let todo of todos">
12          {{ todo.title }} - {{ todo.is_complete ? 'Done' : 'Pending' }}
13        </li>
14      </ul>
15    </div>
16    <ng-template #login>
17      <p>Please sign in to see your todos.</p>
18    </ng-template>
19  `
20})
21export class TodoListComponent implements OnInit {
22  todos: any[] = [];
23
24  constructor(public supabaseService: SupabaseService) {}
25
26  async ngOnInit() {
27    this.todos = await this.supabaseService.getTodos();
28  }
29}