Invalid avatar_url being put into the public.profiles table

[avallete]

Hey there !

Following this tutorial I've noticed something at the point where I was styling it to show the avatars and so on.

The "trigger" to automatically create new public.profile for every new auth.users is defined like so:

create function public.create_profile_for_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, name, username, avatar_url)
  values (
    new.id,
    new.raw_user_meta_data->'name',
    new.raw_user_meta_data->'user_name',
    new.raw_user_meta_data->'avatar_url'
  );
  return new;
end;
$$;

When later on, in the app, we use the "avatar_url" in two different ways, the first one, is inside NewTweet component, to which we pass the user coming from our session then we do user.user_metadata.avatar_url and this display the user avatar just fine.

But we also show the avatars on the side of each tweet, but there, the source of the avatar_url is no longer the session but the profile table.

And in that case, next/image complain that the image url is not a valid one, because the actual content in the profile.avatar_url is "https://githubcontent/avatar/..." (notice the extra quotes).

This is because, we are using the "json representation" of the "avatar_url" value in our trigger instead of the actual string value.

Changing the trigger function in favor of this fixed the issue:

create function public.create_profile_for_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, name, username, avatar_url)
  values (
    new.id,
    -- We want to access the value with ->> operator
    new.raw_user_meta_data->>'name',
    new.raw_user_meta_data->>'user_name',
    new.raw_user_meta_data->>'avatar_url'
  );
  return new;
end;
$$;

I've opened a PR to fix the concerned README.md. Let me know if I can be of any other help.