Supabase has emerged as a popular open-source alternative to Firebase, offering developers a powerful backend solution with SQL capabilities and real-time updates. Yet, many tutorials focus on frameworks like React and Vue, leaving Angular developers seeking guidance. In this tutorial, we delve into how to integrate Supabase with an Ionic Angular application, highlighting user authentication, CRUD operations, and real-time data synchronization. Whether you’re new to Ionic or looking to expand your skill set, this guide will walk you through everything you need to know to harness the power of Supabase effectively.

What is Supabase?

Supabase is an open-source Backend-as-a-Service (BaaS) that provides developers with a suite of tools for building applications. It combines a PostgreSQL database with an authentication system, real-time capabilities, and storage solutions, making it a comprehensive choice for developers looking for Firebase-like functionality without the constraints of a proprietary platform.

Getting Started with Ionic and Supabase

Before we dive into the integration process, ensure you have the necessary tools and setups in place:

1. Node.js and npm installed on your machine.
2. The Ionic CLI, which can be installed using the command npm install -g @ionic/cli.
3. An account on Supabase, where you can create a new project.

Step 1: Create a New Ionic Application

1. Begin by generating a new Ionic Angular application. Run the command in your terminal:

   ionic start mySupabaseApp blank --type=angular

2. Navigate to your app’s directory:

   cd mySupabaseApp

Step 2: Install Supabase Client

To connect your Ionic application to Supabase, you need to install the Supabase JS client library:

npm install @supabase/supabase-js

Step 3: Setting Up Supabase

1. Log into your Supabase account and create a new project. For this tutorial, name your project and create a password for the database.
2. Once your project is ready, retrieve your Supabase URL and anonymous key from your project settings.

Step 4: Configure Environment Variables

In your Ionic project, create a new environment variable file, typically found in src/environments/environment.ts, and add your Supabase URL and key:

export const environment = {
  production: false,
  supabaseUrl: 'YOUR_SUPABASE_URL',
  supabaseKey: 'YOUR_SUPABASE_KEY',
};

Step 5: Creating the Authentication Service

To manage user authentication, create a new service named auth.service.ts in your src/app/services directory:

import { Injectable } from '@angular/core';
import { createClient, SupabaseClient } from '@supabase/supabase-js';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private supabase: SupabaseClient;

  constructor() {
    this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey);
  }

  async signUp(email: string, password: string) {
    const { user, error } = await this.supabase.auth.signUp({ email, password });
    return { user, error };
  }

  async signIn(email: string, password: string) {
    const { user, error } = await this.supabase.auth.signIn({ email, password });
    return { user, error };
  }

  async signOut() {
    return await this.supabase.auth.signOut();
  }
}

This service will handle user registration, login, and logout functionality using Supabase’s built-in auth methods.

Step 6: Implementing Authentication Guards

To protect routes in your application, set up an authentication guard. Create a file called auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  async canActivate() {
    const user = await this.authService.getUser();
    if (!user) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

This guard checks if a user is authenticated before granting them access to certain routes.

Step 7: Setting Up CRUD Functionality

Now let’s create the CRUD functionality using Supabase as our backend. Create a new service called todo.service.ts:

import { Injectable } from '@angular/core';
import { createClient } from '@supabase/supabase-js';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class TodoService {
  private supabase = createClient(environment.supabaseUrl, environment.supabaseKey);

  async addTask(task: string) {
    const { data, error } = await this.supabase
      .from('todos')
      .insert([{ task, is_complete: false }]);
    return { data, error };
  }

  async getTasks() {
    const { data, error } = await this.supabase
      .from('todos')
      .select('*');
    return { data, error };
  }

  async updateTask(id: number, isComplete: boolean) {
    const { data, error } = await this.supabase
      .from('todos')
      .update({ is_complete: isComplete })
      .eq('id', id);
    return { data, error };
  }

  async deleteTask(id: number) {
    const { data, error } = await this.supabase
      .from('todos')
      .delete()
      .eq('id', id);
    return { data, error };
  }
}

In this service, we define methods for adding, retrieving, updating, and deleting tasks.

Step 8: Building UI Components

1. Create the required pages in your Ionic application (e.g., Login, Todos). Use Ionic components such as ion-input for form fields, and ion-button for actions.
2. Integrate your services in these components to manage user interaction.
3. Use Angular’s reactive forms for input handling.

Example: Creating a Login Form

Here is an example of how to set up a login form using reactive forms:

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]='loginForm' (ngSubmit)="onLogin()">
    <ion-item>
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" formControlName="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit">Login</ion-button>
  </form>
</ion-content>

In your login component, subscribe to the form’s value changes and manage user credentials using the AuthService.

Conclusion

Integrating Supabase with Ionic Angular opens up a world of possibilities for developers seeking a powerful, open-source backend for their applications. With user authentication, CRUD operations, and real-time updates, Supabase provides a compelling alternative to Firebase. Now that you have a clear understanding of setting up Supabase with Ionic, you can begin creating dynamic applications quickly and efficiently.

For those eager to explore more advanced features such as email confirmations, role-based access, or further authentication mechanisms, consider examining the Supabase documentation or continuous learning through Ionic Academy. Happy coding!