payload/examples/auth/cms

Auth Example for Payload CMS

This example demonstrates how to implement Authentication in Payload CMS.

There is a fully working Next.js app tailored specifically for this example which can be found here. Follow the instructions there to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!

Getting Started

1. Clone this repo
2. cd into this directory and run yarn or npm install
3. cp .env.example .env to copy the example environment variables
4. yarn dev or npm run dev to start the server and seed the database
5. open http://localhost:8000/admin to access the admin panel
6. Login with email dev@payloadcms.com and password test

How it works

An auth-enabled users collection is create which opens all auth-related operations needed to create a fully custom workflow on your front-end using the REST or GraphQL APIs, including:

• Me
• Login
• Logout
• Refresh Token
• Verify Email
• Unlock
• Forgot Password
• Reset Password

The cors, csrf, and cookies settings are also configured to ensure that the admin panel and front-end can communicate with each other securely.

Role-based Access Control

Basic role-based access control is setup to determine what users can and cannot do based on their roles, which are:

• admin: They can access the Payload admin panel to manage your application. They can see all data and make all operations.
• user: They cannot access the Payload admin panel and have a limited access to operations based on their user.

A beforeChange field hook called protectRoles is placed on this to automatically populate roles with the user role when a new user is created. It also protects roles from being changed by non-admins.

Seed

On boot, a seed script is included to create a user with the role admin.