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

Clone this repo
cd into this directory and run yarn or npm install
cp .env.example .env to copy the example environment variables
yarn dev or npm run dev to start the server and seed the database
open http://localhost:8000/admin to access the admin panel
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.