Adding user's name in the sign up

[Vir3s]

Hi all,

We are using Supabase for our user management. Our users authenticate with email+password.
We want the users to be able to also include a first and last name on the same sign up form.
After reading existing issues / recommendations / docs ( #1469, Managing User Data, Quickstart: React, Row Level Security, Auth, #2495 ) we built a 'profiles' table that stores any additional user data to their id and email. We have row level security enabled and we allow only logged in users to update the table. The issue we are facing is with the insert action.

Issue => since the user is not verified at the time of sign up (they will need to go to their email and click on the link for that), they aren't actually logged in after completing the sign up. This means that we need a policy allowing inserts to the 'profiles' table to be made only by users with a user id that exists in the 'users' table (the auth.users table). So the user id will be returned when we sign the user up for the first time, and that id will then be used for the check on the row policy for the insert.

Unfortunately, the policy doesn't seem to have the privilege to select all ids from the 'users' table. Can that be fixed? We are doing something wrong? Should I raise a bug or is this intentional?

The policy ->
CREATE POLICY "New profile can be added if the added user is registered." ON public.profiles WITH CHECK ( ( user_id IN ( SELECT users.id FROM users ) ) );

The error ->
ERROR: permission denied for table users

Help will be greatly appreciated because we are now forced to omit the full name from our sign up form and that creates a wave of changes in our UX flow designs.

Thank you so much!

[CR1AT0RS]

I have this exact same issue. Can we please get an update on this.

[robhicks]

I think you can get around this by using the supabase client in the browser to create the user and then when you get the user object back using the supbase client in the server with the server key to add the profile.

You can also turn the email verification off and do it all in the browser.

[tsh356]

You may need to reference auth.users in your policy. If no schema is provided, postgres assumes public schema

[jasonho-lynx]

The recommended approach is to use a trigger to automatically insert into the public.profiles table after a user signs up: https://supabase.io/docs/guides/auth/managing-user-data#advanced-techniques

With this, you wouldn't have to manually insert it and worry about having the right policies etc. The user's name can then be updated in the profiles table by having an update policy like user_id = auth.uid() or something.

[sampl]

Probably not the answer you’re looking for, but I find that short signup forms are better converting anyway.

You could get their email, wait for the confirmation, and then ask for name and other personal details as a first onboarding step (if that works for your product).

[tatwater]

I like this direction and am trying to implement it in my own project, but I'm looking for an elegant way to determine when to prompt for those additional profile details!

I'm using NextJS, and the check I believe I need to make is: use the auth helper's supabase.auth.getUser() function to make sure there's a user and get the id, which I should then use to look up a profile in the profiles table I made. If none is returned, then redirect the user to /welcome, which has a form to upsert into profiles. They'll see this page once, only after creating a fresh account, and then never again because their profile will exist.

What feels inelegant about this is that I fear I'd have to either use middleware for the check, so I could catch the lack of profile and redirect before the user sees, but then I'd be performing this db fetch on every request.

Is there an efficient way to do this that I'm missing?

[sampl]

I think that’s probably the right direction, but it depends on your architecture of course.

Right now I’m building by a front-end heavy React app, and I have a top-level context wrapper that loads data from the user once on load, and makes everything about the user (auth, profile, etc) available to all child components.

[tatwater]

What I ended up doing was adding the following after a successful upsert into profiles from my /welcome page:

const { data, error } = await supabase.auth.updateUser({
  data: {
    hasProfile: true,
  },
});

Then in my middleware.ts file I check if (!user.user_metadata.hasProfile && pathname !== '/welcome') to force them to that welcome page. I have to refresh the user in middleware anyway, so I have it available and a flag seemed easiest. Ofc if I (or the user) deletes their profile I have to remove the flag, so opportunity for desync, but I'm happy enough!

[Klustre]

You add the first and last name to the user metadata and then insert that in the profiles table via a trigger:

-- This trigger automatically creates a user and profile entry
-- when a new user signs up via Supabase Auth.
create function public.handle_new_user () returns trigger as $$ begin
insert into public.profiles (id, first_name, last_name)
values (
        new.id,
        new.raw_user_meta_data->>'first_name',
        new.raw_user_meta_data->>'last_name'
    );
return new;
end;
$$ language plpgsql security definer;

create trigger on_auth_user_created
after insert on auth.users for each row
execute procedure public.handle_new_user ();

[KrzysztofRozbicki]

Yeah, great answer , i did it with the providers.
But the issue with email /password sign up is how even add the name to the auth using supabase.auth.signUp? And the answer is:

 const { data, error } = await supabase.auth.signUp({
      email: email,
      password: password,
      options: {
        data: {
          full_name: "John Smith"
        },
      },
    });

and then you can do as you told

insert into public.profiles (id, name)
values (
        new.id,
        new.raw_user_meta_data->>'full_name'
    );

[NordlingDev]

@KrzysztofRozbicki This way you have to maintain the value in two different tables auth.users and in this case public.profiles. So when you in the future update the profile, you need to make sure to update the user row as well.