How to add a phone number to Supabase user profile?

 

Step 1: Set Up Supabase Project

 

To start adding a phone number to a Supabase user profile, first, ensure you have a Supabase project set up. You can create a new Supabase project from the Supabase website. It requires you to log in and then follow the process to create a new project where you will be provided with an API URL and an API Key.

 

Step 2: Initialize Your Project with Supabase

 

Ensure you have Node.js installed. Then, initialize your project with Supabase by installing the @supabase/supabase-js package.

npm install @supabase/supabase-js

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-id.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

 

Step 3: Add the Phone Number Field to the User Schema

 

By default, the Supabase authentication system includes basic fields in the user profile. To add more fields like a phone number, you need to extend the users' table in the Supabase database. This can be done through the SQL Editor in the Supabase dashboard.

ALTER TABLE auth.users
ADD COLUMN phone_number VARCHAR;

This SQL command adds a new column named phone_number to the users table.

 

Step 4: Update a User Profile with Phone Number

 

Now, you can update a user profile to include a phone number using Supabase's API. Here's how you can update a specific user's phone number:

const updateUserPhoneNumber = async (userId, phoneNumber) => {
  const { data, error } = await supabase
    .from('users')
    .update({ phone_number: phoneNumber })
    .eq('id', userId);

  if (error) {
    console.error('Error updating phone number:', error);
    return;
  }

  console.log('User phone number updated:', data);
};

// Example usage
updateUserPhoneNumber('user-123', '123-456-7890');

Make sure to replace 'user-123' with the actual user's ID you wish to update.

 

Step 5: Fetch User Data Including Phone Number

 

To retrieve user data including the newly added phone number, you can perform a simple SELECT query through Supabase.

const fetchUserProfile = async (userId) => {
  const { data, error } = await supabase
    .from('users')
    .select('id, email, phone_number')
    .eq('id', userId);

  if (error) {
    console.error('Error fetching user profile:', error);
    return;
  }

  console.log('User profile:', data);
};

// Example usage
fetchUserProfile('user-123');

This query will return the user's id, email, and phone number.

 

Step 6: Implementing UI Changes (Optional)

 

If you're building a client application, you'll want to include form fields to capture and display the phone number. This step involves modifying your frontend form to capture the phone number and updating an event handler to send the phone number alongside other profile data to your Supabase backend.

For example, if you're using React:

import React, { useState } from 'react';

const UserProfileForm = ({ userId }) => {
  const [phoneNumber, setPhoneNumber] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    const { data, error } = await supabase
      .from('users')
      .update({ phone_number: phoneNumber })
      .eq('id', userId);

    if (error) {
      console.error('Error updating profile:', error);
    } else {
      console.log('Profile updated successfully:', data);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Phone Number:
        <input
          type="text"
          value={phoneNumber}
          onChange={(e) => setPhoneNumber(e.target.value)}
        />
      </label>
      <button type="submit">Update Profile</button>
    </form>
  );
};

export default UserProfileForm;

Make sure you import supabase from your initialized Supabase client file.

 

Conclusion

 

Following these steps will allow you to add and manage a phone number in your Supabase user profile system. It involves modifying your database schema, using Supabase API calls to update and retrieve user data, and optionally adjusting your frontend for capturing new user information. Ensure your application logic is sufficiently robust to handle any potential errors, especially when dealing with user data and database operations.