Avatar Bucket and settings

By enabling the avatar section, you can let users upload avatars to your application. This is useful if you want to let users upload their own avatars or if you want to use the avatars from other applications.

Setting up the avatar bucket

In Supabase, go to your project and select 'Storage'. Then click on 'New bucket'.

Then set the following information:

• Name of Bucket: Avatars
• Public: true
• Restrict file upload size: true
• File size limit: 20MB

Setting up Policies

After you have created the bucket, you need to set up the policies.

In Storage, select Policies. Then click on 'New Policy' on your Avatars bucket. Then select full customization.

In there set the following information:

• Policy name: Avatars
• Allowed operations: Select & Insert
• Policy definition: (bucket_id = 'avatars'::text)

Now you can able avatars in your profile settings.

Now we only have one thing left to do, to make sure you can see your avatars in the application.

Removing error by allowing bucket access

In your folder, go to next.config.js and update the following line:

    const nextConfig = {
        images: {
            domains: ["<Add your supabase url here>"],
        },
    };
 
    module.exports = nextConfig;