#what is the easiest way to access my collections data via API to populate in a react web app?

15 messages · Page 1 of 1 (latest)

austere canopy
#

what is the best way to access my content (collections) to populate my front end web app (React)? Is there some sort of Client to authenticate?

glossy vortex
#

Hey @austere canopy great question

#

Authentication

#

In addition, there is an access control system to fine tune permissions

#

A common approach is to generate an API-key for your user

#

However, if you create a login form on your frontend and hit the login endpoint for your auth enabled collection...

#

Then payload creates a secure cookie automatically on the client that authorizes your users requests

#

These should satisfy most use cases

#

Let me know if you have more questions

austere canopy
#

Thank you @glossy vortex , the API-key looks promising! I'll give that a go 🙂

silk isle
#

@austere canopy really depends on the type of content you want to access. Is it public? protected behind access control/auth?

#

you can make fetch requests (rest/gql) to retrieve data, I would say that is probably the simplest. If you have content that you want to restrict based on users and their access to certain data, you can set up access control on collections.

On the frontend you would have a login form (if you want to have private data). When a user logs in with rest/gql, a cookie will be attached to the request and if you make another request to any of the api endpoints you can use credentials: "include" on the request and it will send the user along with the request and payload will use that user to authenticate/validate access to certain data.

James made a nice video on access control if you learn more from that kind of content 🙂 https://www.youtube.com/watch?v=DoPLyXG26Dg&t=292s

YouTube
Payload CMS
Overview of Payload CMS Access Control

Access control is one of Payload's killer features. It delivers a ton of power and flexibility, especially compared to other CMS' rigid RBAC patterns.

Payload's admin UI automatically responds to the access control that you define. For example, if a user can't edit a document, the "Publish" button will be automatically removed. If a user can't...

▶ Play video
austere canopy
silk isle
#

Sure thing! I think that video I linked above would still be super valuable to watch. I do think learning how to use the browsers native fetch api will also be valuable! 🙂