Authentication in Ionic Angular with Supabase

Summary

The tutorial builds a simple realtime messaging app with Ionic Angular and Supabase, covering account authentication and database protection. It defines Postgres tables for users, groups, and messages, enables Row Level Security with policies for public reads and authenticated operations, and adds a trigger to copy newly registered users into a public users table. Angular services, route guards, and Supabase client logic handle email/password registration and login, session state, protected navigation, and magic links. For native apps, Capacitor URL events extract access and refresh tokens from a custom-scheme callback before establishing the session and navigating to the groups page. The tutorial concludes that Supabase can support Ionic Angular authentication with magic links, while phone authentication through Twilio is another possible option.

Takeaways

1. 1

   Row Level Security policies allow unauthenticated reads for users and groups, while message access and group creation require authenticated users; group deletion is restricted to the creator.

2. 2

   A database trigger inserts a new authenticated user's ID and email into the public users table after registration, because the Supabase auth table is internal.

3. 3

   Native magic links require a custom redirect URL, Capacitor URL handling, manual session creation from access and refresh tokens, and the redirect scheme added to Supabase's allowed URLs.