#How to authenticate requests from React Application?

7 messages · Page 1 of 1 (latest)

livid mica
#

I have an App Updates Collection

const AppUpdates: CollectionConfig = {
  slug: "app-updates",
  admin: {
    useAsTitle: "heading",
  },
  auth: {
    useAPIKey: false,
  },
  access: {
    read: () => true,
  },
  fields: [
   // additional fields
    {
      name: "poster",
      type: "upload",
      label: "Upload Thumbnail",
      relationTo: "media",
      admin: {
        hidden: true,
      },
    },
    {
      name: "body",
      type: "textarea",
      required: true,
    },
    {
      name: "buttonLink",
      type: "text",
      label: "Learn more URL",
    },
  ],
};

export default AppUpdates;

When I try to access this data via API I can't get the Image URL. Here's a media collection.

const Media: CollectionConfig = {
  slug: "media",
  upload: {
    staticDir: path.resolve(__dirname, "../../media"),
    // Specify the size name that you'd like to use as admin thumbnail
    adminThumbnail: "thumbnail",
    imageSizes: [
      {
        height: 400,
        width: 400,
        crop: "center",
        name: "thumbnail",
      },
      {
        width: 900,
        height: 450,
        crop: "center",
        name: "sixteenByNineMedium",
      },
    ],
  },
  fields: [],
};

I have tried to access it by adding depth=1 in params but it didn't work. It can be the authentication issue I guess.
Payload -> localhost:4000
React App -> localhost:3000

React Code

const fetchData = async () => {
      try {
        const response = await axios.get(
          "http://localhost:4000/api/app-updates?depth=1"
        );
        setData(response.data.docs);
        console.log("Data from CMS: ", response.data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

How can I make sure that I get complete data from an API?

plain pebbleBOT
livid mica
#

Respone from Payload API (You can notice I am only getting the poster Id)

{
    "docs": [
        {
            "id": "660a8d1cb89ef74e2b2fde36",
            "heading": "Push-to-talk mic mode",
            "category": "feature",
            "date": "2024-04-01T12:00:00.000Z",
            "number": "1.19.1",
            "body": [
                {
                    "children": [
                        {
                            "text": "Test body is here:"
                        }
                    ]
                },
                {
                    "children": [
                        {
                            "children": [
                                {
                                    "text": "Bullet point 1"
                                }
                            ],
                            "type": "li"
                        }
                    ],
                    "type": "ul"
                }
            ],
            "buttonLink": "https://www.louper.io/blog/louper-ambassador-program-mar24/",
            "createdAt": "2024-04-01T10:31:56.153Z",
            "updatedAt": "2024-04-01T10:31:56.153Z"
        },
        {
            "id": "660a4b15f4bfbf33d08bc0e8",
            "heading": "New Updates v1.15",
            "category": "feature",
            "date": "2024-03-30T11:30:00.000Z",
            "poster": "660a4aa4f4bfbf33d08bc0b9",
            "body": [
                {
                    "children": [
                        {
                            "text": "Testing..."
                        }
                    ]
                }
            ],
            "buttonLink": "https://www.louper.io/blog/louper-update-v1-15/",
            "createdAt": "2024-04-01T05:50:13.758Z",
            "updatedAt": "2024-04-01T05:50:13.758Z"
        }
    ],
// additional data
}
sonic mica
#

Try adding access: { read: () => true} to your Collection. Later you should add your apikey to the request

#

example for adding the apikey to your request:

export async function request<T>(
    url: string,
    options: Options = { method: 'get' },
    fetch = window.fetch
): Promise<T> {
    let opts: Dict = {
        method: options.method,
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `users API-Key ${PUBLIC_API_TOKEN}`
        }
    };

    if (options.body) {
        opts = { ...opts, body: JSON.stringify(options.body) };
    }

    try {
        const result = await fetch(PUBLIC_API_URL + url, opts);
        return (await result.json()) as Promise<T>;
    } catch (err) {
        console.log(err);
    }
livid mica
#

I just added access: { read: () => true }, to the Media collection and it worked. Thanks a lot.

livid mica
#

Is it safe to get fetch the data directly and don't have an authentication?