---
title: "Authentication in Ionic Angular with Supabase"
description: "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."
---

# Authentication in Ionic Angular with Supabase

[Supabase](https://yomu.fyi/company/supabase) · simon\_grimm · Nov 8, 2022

**Type:** Tutorial

## 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.

## Context

The work addresses authentication and data protection for an Ionic Angular application backed by Supabase, using a realtime messaging app as the example. It also covers the different redirect and session-handling requirements for web and native mobile magic-link authentication.

## Approach / What changed

The tutorial creates Supabase Postgres tables and Row Level Security policies, adds a registration trigger and realtime publication for messages, then implements Ionic Angular pages, services, a route guard, and Supabase authentication flows. Native magic links use a custom URL scheme, Capacitor's appUrlOpen listener, and manually supplied access and refresh tokens to establish the session.

## Takeaways

- 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.
- 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.
- 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.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Authentication](https://yomu.fyi/topic/authentication), [Postgres](https://yomu.fyi/topic/postgres), [Streaming](https://yomu.fyi/topic/streaming)

- Source: [Supabase](https://supabase.com/blog/authentication-in-ionic-angular)
- Source URL: https://supabase.com/blog/authentication-in-ionic-angular
- Ingested by Yomu: 2026-08-29T01:14:42.873Z

[Read original post](https://supabase.com/blog/authentication-in-ionic-angular)