Adding a user profile to our Supabase user


Extending a user profile in Next.js using Supabase auth profiles

9 Dec, 2021 · 3 min read

Now that we logged in with our magic link, we might have a user in Supabase, but we can’t add any details to this user.

See the below image for where to find your authenticated users in Supabase.

Supabase auth user

Adding a profile table

The first thing we need to do is add a profile table to our Supabase database.

Luckily for us, Supabase has a great starter template for that.

Supabase auth starter

Once you click this, click the run button on the right, and you should end up with a user profile table.

Profile table in Supabase

This table, by default, comes with username, avatar_url, and website.

Let’s see how we can make the user set their username.

Modify the profile component

We only used the session data to retrieve the email address. We need to add a function to check if a row in the profile table exists.

Open up the components/Profile.js file and add the following function.

async function getProfile() {
  try {
    const user = supabase.auth.user();
    let { data, error, status } = await supabase

    if (error && status !== 406) {
      throw error;

    if (data) {
  } catch (error) {

This function will query our profiles table and search for someone with the user id.

In the first instance, it will fail as we don’t have this set up yet.

But let’s render a form field so the user can set their username.

<input className='my-4 border-2 border-gray-500 rounded-xl p-4 w-full' type='username' placeholder='Enter a username' value={username} onChange={(e) => setUsername(} />
<button onClick={(e) => { e.preventDefault(); updateProfile();}} className='w-full mt-4 p-2 pl-5 pr-5 bg-blue-500 text-gray-100 text-lg rounded-lg focus:border-4 border-blue-300'>
    <span>Update profile</span>

Once the user clicks this button, we invoke the updateProfile method, so let’s go ahead and create that.

async function updateProfile() {
  try {
    const user = supabase.auth.user();
    const updates = {
      updated_at: new Date(),

    let { error } = await supabase.from('profiles').upsert(updates);
    if (error) {
      throw error;
  } catch (error) {

This function will upsert the profiles table with our user id (based on the session) and the username chosen by the user.

The next time we come back, we should see our username already populated as it now exists in the database.

Username set in Supabase

You can also find this completed code sample on GitHub.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Next portfolio - Filter by category

30 Nov, 2022 · 5 min read

Next portfolio - Filter by category

A glance at Turbopack

17 Nov, 2022 · 3 min read

A glance at Turbopack

Join 2099 devs and subscribe to my newsletter