Overview
ai integration
ai integration rag
animations
authentication
data fetching
date picker
fully responsive ui
lazy infinite scroll
lazy loading
mailing system
pagination
search feature
tanstack prefetch
tanstack query
tanstack query pro
zustand theme
Authentication System
This is a full auth for a Next.js app using Payload (email/password, email verify, forgot-password) plus AuthSmith for Google OAuth so users can sign in with Google without Payload's enterprise plan.
If you are ready, please feel free to test the authentication system below.
Loading
How it works
- Server: Payload config adds authPlugin with GoogleAuthProvider, users + accounts collections (withAccountCollection), and success/error redirects.
- Client: Using AuthSmith AuthClient and the button calls oauth("google").
- Forms: Custom Sign In / Sign Up modals post to Payload REST, credentials: "include" for cookie sessions.
- Profiles: Hooks auto-create/link a Profile on signup and keep email in sync on updates.
- Email flows: Custom verify and forgot-password templates with app URLs.
- Access control: Guards for read/update/delete/admin using role checks and a secret-header for protected reads.
Why it matters
- Fast to ship social login with clean fallback to email/password.
- Single source of truth (Payload) with OAuth accounts tracked separately.
- Great UX: lightweight modals, loading states, and instant post-login refresh.
Skills shown
Auth architecture (OAuth + password), Payload plugin wiring, secure fetches/cookies, collection hooks, role-based access, and polished UI states.