How to correctly get data from supabase?

I have created a table in supabase called blogposts, and have added couple of rows.

Here is what the columns look like:

I have created multiple functions for the data, such as newest to oldest posts, most viewed to less viewed posts, etc.

Here is one of my functions, which tries to get all of the posts:

export async function getAllPosts() {
    const { data, error } = await supabase.from('blogposts').select('*');
    
    if (error) {
        console.error('Error fetching posts:', error.message);
        throw error;
    }

    return data;
}

And here is how I initialized supabase:

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Here is what happens when I run the getAllPosts function:

const posts = await getAllPosts();
console.log(posts);

This happens to all of my functions that I use. I have even tried:

const [newestPosts, mostViewedPosts, allPosts] = await Promise.all([
   getNewestPosts(),
   getMostViewedPosts(),
   getAllPosts(),
]);

console.log(newestPosts, mostViewedPosts, allPosts);

But I still get:

I have looked in the supabase docs and it seems that all of my code is in working order. Really don't know what might have caused this.

I have double checked the supabase base url and the anon key just in case that is the issue.

Minimal reproducible example would be:

'use server';

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

const supabase = createClient(supabaseUrl, supabaseAnonKey);

async function getAllPosts() {
    const { data, error } = await supabase.from('blogposts').select('*');
    
    if (error) {
        console.error('Error fetching posts:', error.message);
        throw error;
    }

    return data;
}

export default async function Page() {
    const posts = await getAllPosts();
    console.log(posts)

    return (
        <div>
            {posts.map(post => (<span>{post.title}</span>))
        </div>
    );
}

@cheekyprogrammer sent me on the right route.

It appears that you have to add an RLS policy for the database to work. Here is how to do that:

1. Go to Authentication > Policies.
2. Find the table you are working with.
3. On the right, you will see a button that says Create Policy. Press that.
4. On the next screen, you will find multiple actions like INSERT or DELETE.
5. Add the ones you need.

And that's it. Now your project should work properly.