Create Profile

Overview

Profile management is a critical feature of any application, and in the Next.js Supabase SaaS template, it plays a vital role in the user experience. This documentation outlines the key aspects of profile creation and management within the template.

Profile Creation

After signing up, users are prompted to create a profile. This process involves the following steps:

1. First Name and Last Name:

   • The First Name and Last Name is a mandatory field that must be filled in by the user.
   • The First Name and Last Name cannot be left empty.

2. Profile Image:

   • Users have the option to upload or change their profile image.
   • The profile image should have a resolution of 400x400 pixels.
   • Users can also remove an existing profile image for profile if desired.

OAuth Providers

If users sign up using OAuth providers such as Google or GitHub, their profile image is automatically preloaded from the OAuth account. However, users can choose to change this image or keep the preloaded one.

Managing Profile Images

To manage profile images in the Next.js Supabase SaaS template, you must configure the Supabase storage settings correctly.

1. Bucket Setup:

   • In Supabase, you need to create and configure a storage bucket under the storage key in client.config.ts file.
   • Ensure that the bucketName is set correctly, as this is required for storing user-uploaded profile images.

2. Uploading Profile Images:

   • The template uses the supabase.storage.upload API to handle the image upload process.
   • This API stores the profile image in the designated storage bucket.

3. Accessing Profile Images:

   • To retrieve a user’s profile image, the getPublicUrl function is executed.
   • This function generates a publicly accessible URL for the uploaded image.

4. Security Consideration:

   • For security reasons, timezone information is appended to the profile image URL to prevent unauthorized access.

5. Removing Profile Images:

   • If a user decides to remove their profile image, the supabase.storage.remove API is used to delete the image from storage.

Next Steps

Once the user completes the profile creation step, they are automatically directed to the next step in the onboarding process, ensuring a smooth transition.