Passer au contenu
Capgo - Live Updates for Capacitor Apps Capgo

Supabase Integration Introduction

Aperçu

Section titled “Aperçu”

This Tutoriel will Guide you through setting up Supabase Authentication with the Capacitor Social Connexion plugin. This integration allows you to use Natif social Connexion providers (Google, Apple, Facebook, Twitter) on mobile platforms while leveraging Supabase Auth for backend authentication and PostgreSQL for data storage.

What You’ll Learn

Section titled “What You’ll Learn”
  • How to configure Supabase Authentication
  • How to integrate Capacitor Social Connexion plugin with Supabase Auth
  • Platform-specific Configuration for Android, iOS, and Web
  • How to handle nonces securely for Supabase

What You’ll Need

Section titled “What You’ll Need”

Before you begin, make sure you have:

  1. A Supabase Project

  2. Supabase JS SDK

    • Installer Supabase in your project:
      Terminal window
      npm install @supabase/supabase-js

  3. A Capacitor Project

    • An existing Capacitor Application
    • Capacitor Social Connexion plugin installed:
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. Platform-Specific Google Configuration

Exemple Application

Section titled “Exemple Application”

A Terminé working Exemple is Disponible in the repository:

Code Repository: You can find the code repository here

The Exemple Application demonstrates:

  • Email/password authentication with Supabase
  • Google Sign-In integration (Android, iOS, and Web)
  • A simple key-value store using Supabase PostgreSQL tables
  • Utilisateur-specific data storage with Row Level Sécurité (RLS)

Key Implementation Details

Section titled “Key Implementation Details”

Nonce Handling

Section titled “Nonce Handling”

Supabase requires special nonce handling for Sécurité. The implementation follows the React Natif Google Sign In Documentation:

  • Generate a rawNonce (URL-safe random string)
  • Hash it with SHA-256 to get nonceDigest
  • Pass nonceDigest to Google Sign-In
  • Pass rawNonce to Supabase (Supabase hashes it internally for comparison)

JWT Validation

Section titled “JWT Validation”

The Exemple implementation includes JWT validation to ensure:

  • The token audience matches your configured Google Client IDs
  • The nonce matches the expected digest
  • Automatic retry on validation failure (especially Important for iOS)

Platform-Specific Considerations

Section titled “Platform-Specific Considerations”
  • iOS: Token caching can cause nonce issues - the implementation handles this automatically
  • Web: Must call isLoggedIn() on mount to handle OAuth redirects
  • Android: Standard implementation with SHA-1 fingerprint Configuration

Suivant Steps

Section titled “Suivant Steps”

Continue with the Configuration guides:

Apple Sign-In

Section titled “Apple Sign-In”