Skip to content

In this tutorial, we delve into creating a powerful real time Chat application using Angular 17 and Supabase. Here is the link to the tutorial on YouTube: https://www.youtube.com/watch?v=8SRhekaJ5iI

Notifications You must be signed in to change notification settings

desoga10/ng-chat-ui-setup

Repository files navigation

users table

  • id (uuid)
  • full_name (text)
  • avatar_url (text)

Creating a users table

CREATE TABLE public.users (
   id uuid not null references auth.users on delete cascade,
   full_name text NULL,
   avatar_url text NULL,
   primary key (id)
);

Enable Row Level Security

ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;

Permit Users Access Their Profile

CREATE POLICY "Permit Users to Access Their Profile"
  ON public.users
  FOR SELECT
  USING ( auth.uid() = id );

Permit Users to Update Their Profile

CREATE POLICY "Permit Users to Update Their Profile"
  ON public.users
  FOR UPDATE
  USING ( auth.uid() = id );

Supabase Functions

CREATE
OR REPLACE FUNCTION public.user_profile() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.users (id, full_name,avatar_url)
VALUES
  (
    NEW.id,
    NEW.raw_user_meta_data ->> 'full_name'::TEXT,
    NEW.raw_user_meta_data ->> 'avatar_url'::TEXT,
  );
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

Supabase Trigger

  CREATE TRIGGER
  create_user_trigger
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE PROCEDURE
    public.user_profile();

Chat_Messages table (Real Time)

  • id (uuid)
  • Created At (date)
  • text (text)
  • editable (boolean)
  • sender (uuid)