0:[["children","(pages)",["(pages)",{"children":[["slug","use-cases","c"],{"children":["__PAGE__",{}]}]}],"$L1",[[],["$L2",["$","meta",null,{"name":"next-size-adjust"}]]]]]
3:HL["/_next/static/css/ae32d1393d93e388.css",{"as":"style"}]
4:HL["/_next/static/css/140f684bf20c47e1.css",{"as":"style"}]
5:HL["/_next/static/css/7fb8f47f7a6c0db0.css",{"as":"style"}]
6:I{"id":"14463","chunks":["2272:static/chunks/webpack-630ee09a68f20470.js","2667:static/chunks/2443530c-c09d327277e94567.js","6488:static/chunks/6488-ad9e5b3158999833.js"],"name":"","async":false}
7:I{"id":"91010","chunks":["2272:static/chunks/webpack-630ee09a68f20470.js","2667:static/chunks/2443530c-c09d327277e94567.js","6488:static/chunks/6488-ad9e5b3158999833.js"],"name":"","async":false}
1:["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","(pages)","children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L7",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children","(pages)","children",["slug","use-cases","c"],"children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L7",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$L8",null],"segment":"__PAGE__"},"styles":[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/ae32d1393d93e388.css","precedence":"next"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/140f684bf20c47e1.css","precedence":"next"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/css/7fb8f47f7a6c0db0.css","precedence":"next"}]]}],"segment":["slug","use-cases","c"]},"styles":[]}]
9:I{"id":"84373","chunks":["5878:static/chunks/5878-1b8a4168667db3f8.js","1253:static/chunks/1253-17e5e27dffb2117e.js","4932:static/chunks/4932-2917a847c6665c4f.js","2616:static/chunks/2616-33e5b92ea33290c0.js","6371:static/chunks/6371-12cf62f27e6d0410.js","2392:static/chunks/2392-ce1ef19af231c39f.js","9049:static/chunks/9049-7edc8d95edd6b1eb.js","1641:static/chunks/1641-90475c09ef5685f7.js","2690:static/chunks/2690-f212deb40ed54f81.js","2207:static/chunks/2207-6a3c6a7caa9b46de.js","5410:static/chunks/app/(pages)/styleguide/heros/form-hero/page-beebbf6be989c9c6.js"],"name":"DefaultHero","async":false}
a:I{"id":"38389","chunks":["5878:static/chunks/5878-1b8a4168667db3f8.js","1253:static/chunks/1253-17e5e27dffb2117e.js","9054:static/chunks/9054-cf7864eea1d21235.js","4932:static/chunks/4932-2917a847c6665c4f.js","2616:static/chunks/2616-33e5b92ea33290c0.js","5671:static/chunks/5671-19878d9947a3aa5a.js","4135:static/chunks/4135-4fc24bf1643e0a13.js","1839:static/chunks/1839-bbded0950ec07e64.js","9686:static/chunks/9686-d78d7b6643df9b35.js","2392:static/chunks/2392-ce1ef19af231c39f.js","9049:static/chunks/9049-7edc8d95edd6b1eb.js","1641:static/chunks/1641-90475c09ef5685f7.js","2690:static/chunks/2690-f212deb40ed54f81.js","8997:static/chunks/8997-627c34f6aac3b90d.js","5610:static/chunks/app/(pages)/blog/[slug]/page-0fd124cac9f11ddf.js"],"name":"RenderBlocks","async":false}
8:[["$","$L9",null,{"type":"default","richText":[{"children":[{"text":"A CMS for websites, native apps, & more."}],"type":"h1"}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"media":null,"adjectives":[],"form":null,"livestream":{"id":null,"date":null,"richText":null,"guests":[],"hideBreadcrumbs":null},"breadcrumbs":[{"url":"/use-cases","label":"Use Cases"}]}],["$","$La",null,{"blocks":[{"blockType":"contentGrid","contentGridFields":{"forceDarkBackground":true,"useLeadingHeader":null,"leadingHeader":null,"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":{"id":"636d40d899cdd1791a20ddc8","title":"Websites","hero":{"type":"contentMedia","livestream":{},"richText":[{"children":[{"text":"Content management for websites—"},{"text":"simple to enterprise.","underline":true}],"type":"h1"},{"type":"large-body","children":[{"text":"Payload is the modern, developer-first headless CMS for any type of website. Deliver your website editors a beautiful admin panel with the exact features they need."}]}],"links":[],"actions":[],"buttons":[],"media":{"id":"636d4a570718c174729d46c1","alt":"Enterprise website powered by Payload","filename":"websites-hero-min.png","mimeType":"image/png","filesize":271270,"width":1280,"height":1200,"createdAt":"2022-11-10T19:00:39.807Z","updatedAt":"2022-11-10T19:00:39.807Z","url":"/media/websites-hero-min.png"},"adjectives":[]},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"No field limits or API quotas"}],"type":"label"}],"layout":"twoThirdsOneThird","columnOne":[{"type":"h3","children":[{"text":"Give content editors and marketers the perfect editing experience for any design, and build the frontend with any framework you want."}]}],"columnTwo":[{"type":"p","children":[{"text":"Scale with as little to no-code as needed, configure fields into the perfect structure for any web presence. The Payload configuration defines the admin panel experience and fully functional APIs for a complete solution to content management and delivery."}]}]},"id":"636d40b4ca1a25339db7def1","blockType":"content"},{"mediaContentFields":{"alignment":"contentMedia","richText":[{"children":[{"text":"Layout Builder"}],"type":"label"},{"type":"h3","children":[{"text":"Give your editors a page builder."}]},{"children":[{"text":"Give too much control and your site will start to look like a kaleidoscope. Give too little, and you’ll have editors harping on the dev team to create more features."}]},{"children":[{"text":"The Payload Blocks field is the best way to build enterprise websites that live up to marketing demands.  "}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/fields/blocks","label":"More about blocks"},"media":{"id":"637116c3807b4c03e7443b73","alt":"Layout builder using Payload's Blocks field type","filename":"websites-layout-builder.png","mimeType":"image/png","filesize":119884,"width":1280,"height":1120,"createdAt":"2022-11-13T16:09:39.640Z","updatedAt":"2022-11-13T16:22:32.415Z","url":"/media/websites-layout-builder.png"}},"id":"636e8f0025472c6bcce664bb","blockType":"mediaContent"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"children":[{"text":"Rich Text Editor "}],"type":"label"},{"type":"h3","children":[{"text":"Build your own branded Rich Text elements."}]},{"children":[{"text":"The rich text field is fully extensible. Give editors access to elements like headings, links and uploads or configure the editor to embed complex relationships. "}]},{"children":[{"text":"By building custom components within the field itself, anything is possible. Content is stored as JSON—not HTML, so you can use it anywhere."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/fields/rich-text","label":"Rich Text Docs"},"media":{"id":"63711971807b4c03e7443e69","alt":"Payload's Rich Text Editor","filename":"rich-text-1.png","mimeType":"image/png","filesize":318963,"width":1280,"height":1120,"createdAt":"2022-11-13T16:21:05.574Z","updatedAt":"2022-11-13T16:21:33.850Z","url":"/media/rich-text-1.png"}},"id":"636e8fd025472c6bcce664bc","blockType":"mediaContent"},{"contentGridFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"UX features designed to give your editors a best-in-class editing experience."}],"type":"h3"}],"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/configuration/localization","children":[{"text":"Localization & i18n"}]},{"text":""}]},{"children":[{"text":"Manage content for every language needed and deliver it to multiple domains or a single website with language translations. Choose which fields are localized, even within nested structures or relationships."}]}],"id":"636e905425472c6bcce664be"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/fields/overview#conditional-logic","children":[{"text":"Conditional Logic"}]},{"text":""}]},{"children":[{"text":"Payload has an easy way to show and hide fields based on the value of other fields. For example, you might have an “Enable Link” checkbox, that, when checked, a few more fields should be rendered."}]}],"id":"636e907125472c6bcce664bf"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/access-control/overview","children":[{"text":"User Roles"}]},{"text":""}]},{"children":[{"text":"Build smart role-based access control patterns into your CMS however you need. The Admin UI reacts dynamically to show admins what they can and can't edit."}]}],"id":"636e908825472c6bcce664c0"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"https://github.com/payloadcms/plugin-seo","children":[{"text":"SEO"}]},{"text":""}]},{"children":[{"text":"Payload’s official SEO plugin enables robust tooling to put your editors in complete control of your site’s search engine optimization."}]}],"id":"636e909425472c6bcce664c1"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/configuration/collections#preview","children":[{"text":"Preview"}]},{"text":""}]},{"type":"p","children":[{"text":"Preview is baked in. Use Payload's Drafts and Versions to allow your editors to easily preview their content as they create it."}]}],"id":"636e90a125472c6bcce664c2"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":{"id":"636941cc513596e6872d2ba2","title":"White Label the Admin UI","image":{"id":"636941a9513596e6872d2b9a","alt":"White Label the Admin UI","filename":"white-label-admin-ui.webp","mimeType":"image/webp","filesize":35172,"width":1920,"height":1081,"createdAt":"2022-11-07T17:34:33.237Z","updatedAt":"2022-11-07T17:34:33.237Z","url":"/media/white-label-admin-ui.webp"},"excerpt":[{"type":"h4","children":[{"text":"Easily make Payload the perfect white labeled headless CMS. With Payload, you get complete control of the look and feel of the Admin Panel. "}]}],"content":[{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"Across the Admin UI, the branding from Payload is minimal so that the focus stays where it should be—on your application. By updating the Payload branding, you can create a customized interface and your client (or team, or whoever will access your admin panel) will be greeted with a dynamic interface that is consistent with your application branding."}]},{"type":"p","children":[{"text":"In this blog post, you will learn how to rebrand and white label the Payload admin panel for your application by modifying the following elements:"}]},{"type":"ul","children":[{"type":"li","children":[{"text":"Favicon"}]},{"type":"li","children":[{"text":"Title"}]},{"type":"li","children":[{"text":"ogImage"}]},{"type":"li","children":[{"text":"Icon"}]},{"type":"li","children":[{"text":"Logo"}]}]},{"type":"h4","children":[{"text":"Get Started"}]},{"type":"p","children":[{"text":"You can use your own Payload app or start a new one for this tutorial. If you haven't started a project yet, you can get set up easily by running "},{"text":"npx create-payload-app","code":true},{"text":" in your terminal."}]},{"type":"p","children":[{"text":"For more details on how to start an application, including how to do so from scratch, read the "},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/getting-started/installation","children":[{"text":"installation"}]},{"text":" documentation."}]},{"type":"h4","children":[{"text":"Payload Config"}]},{"type":"p","children":[{"text":"Start by navigating to your base Payload config file in which all options for the Admin panel are defined."}]},{"type":"p","children":[{"text":"Below is an example config file:"}]}]},"id":"636941c9259290961c5a637a","blockType":"blogContent"},{"codeFields":{"language":"js","code":"import { buildConfig } from 'payload/config';\nimport dotenv from 'dotenv';\nimport Page from './collections/Page';\nimport Media from './collections/Media';\n\ndotenv.config();\n\nexport default buildConfig({\n  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,\n  collections: [\n    Page,\n    Media,\n  ],\n});"},"id":"63694208259290961c5a637b","blockType":"code"},{"blogContentFields":{"richText":[{"type":"h4","children":[{"text":"Admin Option"}]},{"type":"p","children":[{"text":"Next, add the admin option to your payload config file this can start as an empty object."}]}]},"id":"63694266259290961c5a637c","blockType":"blogContent"},{"codeFields":{"language":"js","code":"export default buildConfig({\n  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,\n  admin: {},\n  collections: [\n    Page,\n    Media,\n  ],\n});"},"id":"6369426c259290961c5a637d","blockType":"code"},{"blogContentFields":{"richText":[{"type":"h4","children":[{"text":"Meta"}]},{"type":"p","children":[{"text":"The admin property takes the following sub-properties:"}]},{"type":"p","children":[{"text":"titleSuffix","code":true},{"text":": Text that appends the meta/page title displayed in the browser tab—must be a string."}]},{"type":"p","children":[{"text":"favicon","code":true},{"text":": Image that will be displayed as the tab icon."}]},{"type":"p","children":[{"text":"ogImage","code":true},{"text":": Image that will appear in the preview when you share links to your admin panel online and through social media."}]},{"type":"p","children":[{"text":"Now, let’s add the meta-object and the above properties."}]}]},"id":"6369581f259290961c5a6389","blockType":"blogContent"},{"codeFields":{"language":"js","code":"export default buildConfig({\n  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,\n  admin: {\n    meta: {\n      titleSuffix: '- TRBL Design',\n      favicon: '/assets/favicon.svg',\n      ogImage: '/assets/logo.svg',\n    },\n  },\n  collections: [\n    Page,\n    Media,\n  ],\n});"},"id":"6369582b259290961c5a638a","blockType":"code"},{"blogContentFields":{"richText":[{"type":"h4","children":[{"text":"Serving Images"}]},{"type":"p","children":[{"text":"We need to ensure the images are served somewhere they can be downloaded by the browser. We could have saved an absolute URL if the assets are hosted somewhere. Instead of that we set relative paths to an assets folder for "},{"text":"favicon.svg","code":true},{"text":" and "},{"text":"logo.svg","code":true},{"text":" above; we can serve them from the same express app as Payload is using. Create a directory called "},{"text":"assets","code":true},{"text":" and save your images there."}]},{"type":"p","children":[{"text":"Then in your "},{"text":"server.js","code":true},{"text":" or wherever you have defined express routes, add the line that serves "},{"text":"/assets","code":true},{"text":" with "},{"text":"express.static","code":true},{"text":":"}]}]},"id":"63695840259290961c5a638b","blockType":"blogContent"},{"codeFields":{"language":"js","code":"import express from 'express';\nimport path from 'path';\n\nconst app = express();\napp.use('/assets', express.static(path.resolve(__dirname, './assets')));\n\npayload.init({\n  secret: process.env.PAYLOAD_SECRET_KEY,\n  mongoURL: process.env.MONGO_URL,\n  express: app,\n    license: process.env.PAYLOAD_LICENSE_KEY,\n});\n\napp.listen(process.env.PORT);"},"id":"63695843259290961c5a638c","blockType":"code"},{"bannerFields":{"type":"default","content":[{"children":[{"text":"Note: Anything in that assets folder will be publicly available when your app is hosted online.\n"}]}]},"id":"63695855259290961c5a638d","blockType":"banner"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"At this point, if we check out our app in the browser—the tab will display your updated favicon and title suffix."},{"text":"\n"}]}]},"id":"63695879259290961c5a638f","blockType":"blogContent"},{"mediaBlockFields":{"position":"default","media":{"id":"6369431a513596e6872d2c22","alt":"Payload CMS Metadata Screenshot","filename":"metadata.png","mimeType":"image/png","filesize":11046,"width":618,"height":280,"createdAt":"2022-11-07T17:40:42.958Z","updatedAt":"2022-11-07T17:40:42.958Z","url":"/media/metadata.png"}},"id":"63695862259290961c5a638e","blockType":"mediaBlock"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"To test that the ogImage has successfully updated, use the browser inspector to view the metadata or test your app through your social media of choice or a web developer tool e.g. "},{"type":"link","newTab":false,"url":"https://cards-dev.twitter.com/validator","children":[{"text":"Twitter’s Card Validator"}]},{"text":"."}]},{"type":"h4","children":[{"text":"Custom Components"}]},{"type":"p","children":[{"text":"In addition to metadata, the admin option also takes custom components to override the default configuration."}]},{"type":"p","children":[{"text":"The properties we are interested in for rebranding the admin panel are:"}]},{"type":"p","children":[{"text":"graphics.Logo","code":true},{"text":": Image component to be displayed as the logo on the Sign Up / Login view."}]},{"type":"p","children":[{"text":"graphics.Icon","code":true},{"text":": Image component displayed above the Nav in the admin panel, often a condensed version of a full logo."}]},{"type":"p","children":[{"text":"Now let's set up these custom components:"}]},{"type":"ul","children":[{"type":"li","children":[{"text":"Add "},{"text":"components","code":true},{"text":" and open an object"}]},{"type":"li","children":[{"text":"Within components, add the "},{"text":"graphics","code":true},{"text":" property and open another object"}]},{"type":"li","children":[{"text":"Now we can point to the relevant files for the "},{"text":"Logo","code":true},{"text":" and "},{"text":"Icon","code":true}]}]}]},"id":"6369588e259290961c5a6390","blockType":"blogContent"},{"codeFields":{"language":"js","code":"import Logo from './graphics/Logo';\nimport Icon from './graphics/Icon';\n\ndotenv.config();\n\nexport default buildConfig({\n  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,\n  admin: {\n     meta: {\n       titleSuffix: '- Custom Title',\n       favicon: '/assets/favicon.svg',\n       ogImage: '/assets/logo.svg',\n     },\n     components: {\n       graphics: {\n         Logo,\n         Icon,\n       },\n     },\n  },\n  collections: [\n    Page,\n    Media,\n  ],\n});"},"id":"6369589b259290961c5a6391","blockType":"code"},{"blogContentFields":{"richText":[{"children":[{"text":"These graphics need to be React components that can render whatever you'd like. They could render "},{"text":"img","code":true},{"text":" tags or full React SVGs. In this example, we're going to include images, css and other html too."}]}]},"id":"636958d6259290961c5a6392","blockType":"blogContent"},{"codeFields":{"language":"js","code":"import React from 'react';\nimport './logo.scss';\n\nexport const Logo = () => (\n  <div className=\"logo\">\n    <img\n      src=\"/assets/logo.png\"\n      alt=\"TRBL Design Logo\"\n    />\n  </div>\n);"},"id":"636958da259290961c5a6393","blockType":"code"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"Optionally we can include some styling too."}]}]},"id":"636959c9259290961c5a6394","blockType":"blogContent"},{"codeFields":{"language":"js","code":".logo {\n  img {\n    max-height: 200px;\n    margin: auto;\n  }\n\n  h1 {\n    margin: 3rem auto;\n    text-align: center;\n  }\n}"},"id":"636959da259290961c5a6395","blockType":"code"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"Final step, let’s check out the new logo and icons."}]}]},"id":"63695a5d259290961c5a6396","blockType":"blogContent"},{"mediaBlockFields":{"position":"default","media":{"id":"63695a85441275b70514e801","alt":"Payload CMS White Label Branded Login","filename":"white-label-branded-login.png","mimeType":"image/png","filesize":13072,"width":929,"height":637,"createdAt":"2022-11-07T19:20:37.210Z","updatedAt":"2022-11-07T19:20:37.210Z","url":"/media/white-label-branded-login.png"}},"id":"63695a62259290961c5a6397","blockType":"mediaBlock"},{"mediaBlockFields":{"position":"default","media":{"id":"63695b00441275b70514e82a","alt":"Payload CMS White Label Branded Dashboard","filename":"white-label-branded-dashboard.png","mimeType":"image/png","filesize":37233,"width":930,"height":770,"createdAt":"2022-11-07T19:22:40.977Z","updatedAt":"2022-11-07T19:22:40.977Z","url":"/media/white-label-branded-dashboard.png"}},"id":"63695af0259290961c5a6398","blockType":"mediaBlock"},{"blogContentFields":{"richText":[{"type":"h4","children":[{"text":"Summary"}]},{"type":"p","children":[{"text":"There you have it! With around 10 lines of code you can brand the admin panel, update metadata and add custom components to effectively white label the admin panel for your clients or users."}]},{"type":"p","children":[{"text":"Payload gives you the freedom and control to customize other aspects too, like the swapping out the Dashboard or creating custom inputs, to learn more about the admin panel and custom components—check out the pages below."}]},{"type":"h4","children":[{"text":"Read More"}]},{"type":"ul","children":[{"type":"li","children":[{"text":""},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/admin/overview","children":[{"text":"Admin Panel"}]},{"text":""}]},{"type":"li","children":[{"text":""},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/admin/components","children":[{"text":"Custom Components"}]},{"text":""}]}]},{"type":"h4","children":[{"text":"Questions or Comments?"}]},{"type":"p","children":[{"text":"Join us on "},{"type":"link","newTab":false,"url":"https://github.com/payloadcms/payload/discussions","children":[{"text":"GitHub discussions"}]},{"text":"."}]}]},"id":"63695b66259290961c5a6399","blockType":"blogContent"}],"slug":"white-label-admin-ui","author":{"id":"636e94c6b554c827004b230b","firstName":"Jessica","lastName":"Chowdhury","email":"jessica@payloadcms.com","createdAt":"2022-11-11T18:30:31.256Z","updatedAt":"2023-05-30T14:55:28.086Z","photo":"63724c9c766dd27e7908790a","twitter":"https://twitter.com/JessMarieChow"},"_status":"published","createdAt":"2022-11-07T17:35:08.997Z","updatedAt":"2023-02-27T12:15:04.982Z","meta":{"title":"White Label the Admin UI | Blog | Payload CMS","description":"White label the Payload admin panel's logo, company name, favicon, and more to fit your client's branding.","image":{"id":"63715e47c155959a32eb2075","alt":"White Label the Admin UI","filename":"white-label-admin-ui.jpg","mimeType":"image/jpeg","filesize":154430,"width":1920,"height":1081,"createdAt":"2022-11-13T21:14:47.301Z","updatedAt":"2022-11-13T21:14:47.301Z","url":"/media/white-label-admin-ui.jpg"}},"publishedOn":"2022-02-04T18:00:00.000Z"},"relationTo":"posts"},"children":[{"text":"White-labeled UI"}]},{"text":""}]},{"children":[{"text":"Whitelabel your CMS and make it match your website's branding. Theme everything about the UI—from logo to color scheme."}]}],"id":"636e90af25472c6bcce664c3"}]},"id":"636e904925472c6bcce664bd","blockType":"contentGrid"},{"caseStudyCardFields":{"cards":[{"richText":[{"children":[{"text":"Enterprise Website Case Study"}],"type":"label"},{"children":[{"text":"Hope Network"}],"type":"h3"}],"caseStudy":{"id":"63613e53ac92f4d422f93b1e","title":"Hope Network","introContent":[{"children":[{"text":"An enterprise website that scales to keep up with marketing needs."}],"type":"h2"}],"featuredImage":{"id":"636d5065969bcf4617bd68b8","alt":"Hope Network Case Study Featured Image","filename":"hope-network-featured-image-compressed.jpg","mimeType":"image/jpeg","filesize":267068,"width":1920,"height":1080,"createdAt":"2022-11-10T19:26:29.815Z","updatedAt":"2022-11-10T19:26:29.815Z","url":"/media/hope-network-featured-image-compressed.jpg"},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"Payload has delivered Hope Network with a truly "},{"text":"enterprise-tier website","underline":true},{"text":" CMS."}],"type":"h2"}],"layout":"twoColumns","columnOne":[{"children":[{"text":"And thanks to Payload’s code-based nature, this is only the beginning. Over time, Hope will add more and more functionality to its site, which will allow it to continue to provide ROI to the organization for years to come."}]}],"columnTwo":[{"children":[{"text":"The organization consists of 8 “service lines” and hundreds of pages of content. Among the content models are Subsites, Forms, Housing, Locations, People, Redirects, and much more. "}]}]},"id":"63618d251011a841528d5422","blockName":"Intro","blockType":"content"},{"sliderFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"Multi-tenant, “subsite”-based access control"}],"type":"h2"}],"sliderType":"imageSlider","imageSlides":[{"image":{"id":"636d3f5080a87332ff69364c","alt":"Hope Network Autism Subsite","filename":"hope-network-austim-subsite.jpg","mimeType":"image/jpeg","filesize":256781,"width":1920,"height":1080,"createdAt":"2022-11-10T18:13:36.356Z","updatedAt":"2022-11-10T18:13:36.356Z","url":"/media/hope-network-austim-subsite.jpg"},"id":"636d86407266cfd75259d4f3"},{"image":{"id":"636d3fc380a87332ff6936b5","alt":"Hope Network Developmental Disabilities Subsite","filename":"hope-network-developmental-disabilities-subsite.jpg","mimeType":"image/jpeg","filesize":283068,"width":1920,"height":1080,"createdAt":"2022-11-10T18:15:31.710Z","updatedAt":"2022-11-10T18:15:31.710Z","url":"/media/hope-network-developmental-disabilities-subsite.jpg"},"id":"636d3faedc9db42badb94480"},{"image":{"id":"636d3f6580a87332ff6936ac","alt":"Hope Network Neuro Rehab Subsite","filename":"hope-network-neuro-rehab-subsite.jpg","mimeType":"image/jpeg","filesize":241946,"width":1920,"height":1080,"createdAt":"2022-11-10T18:13:57.336Z","updatedAt":"2022-11-10T18:13:57.336Z","url":"/media/hope-network-neuro-rehab-subsite.jpg"},"id":"636d3f54dc9db42badb9447f"}],"quoteSlides":[{"richText":[{"children":[{"text":"This is the first CMS that I’ve "},{"text":"actually enjoyed working","underline":true},{"text":" with and believe me when I say--I’ve tried a lot of them."}],"type":"h4"}],"quoteDate":"2022-11-09T05:00:00.000Z","id":"6362e261fb93847dbca8d72b"},{"richText":[{"children":[{"text":"This is the first CMS that I’ve "},{"text":"actually enjoyed working","underline":true},{"text":" with and believe me when I say--I’ve tried a lot of them."}],"type":"h4"}],"quoteDate":"2022-11-17T05:00:00.000Z","id":"6362e266fb93847dbca8d72c"},{"richText":[{"children":[{"text":"This is the first CMS that I’ve "},{"text":"actually enjoyed working","underline":true},{"text":" with and believe me when I say--I’ve tried a lot of them."}],"type":"h4"}],"quoteDate":"2022-11-16T05:00:00.000Z","id":"6362e26bfb93847dbca8d72d"}]},"id":"6362e25ffb93847dbca8d72a","blockName":"Images","blockType":"slider"},{"contentFields":{"layout":"threeColumns","columnOne":[{"children":[{"text":"Hope Network has 8 distinct “service lines” which required their own content, navigation, color scheme, and more. And each service line is managed by entirely separate teams, which need to log into the CMS and only be allowed to edit their own service line’s content.  "}]}],"columnTwo":[{"children":[{"text":"However, the Hope marketing team should be able to log in and control everything—across the entire site. From global content to a specific service line’s content, Hope needed a system of access control that could scale with their ever-expanding team’s needs."}]}],"columnThree":[{"children":[{"text":"Payload’s Access Control stood up to the task. Hope editors can log in and see only their own service line’s content, seamlessly. They are limited to control only their own site’s navigation, content, and more. "}]}]},"id":"636d44dbdc9db42badb94481","blockName":"Slider Detail","blockType":"content"},{"linkGridFields":{"links":[{"link":{"type":"custom","url":"/docs/access-control/overview","label":"Learn about Payload’s Access Control"},"id":"636c1ccf10f2d6ed1ab96ac0"},{"link":{"type":"reference","reference":{"value":"6367d4cf4536413078215ed7","relationTo":"posts"},"url":"/blog/access-control-overview","label":"Watch a video to see how to set up multi-tenant architecture"},"id":"636c1d0e10f2d6ed1ab96ac1"}]},"id":"636c1ca910f2d6ed1ab96abf","blockName":"Access Control Links","blockType":"linkGrid"},{"mediaContentFields":{"alignment":"mediaContent","container":true,"richText":[{"children":[{"text":"Drafts & Previews"}],"type":"label"},{"children":[{"text":"Drafts allow editors to preview their work"}],"type":"h2"},{"children":[{"text":"A “Preview” button is baked into the editor so that admins can quickly pop back and forth between their work—and the results of their work."}]},{"children":[{"text":"While navigating through the site, an “admin bar” appears at the top of the window with quick access back to the CMS."}]}],"link":{"type":"reference","reference":{"value":"6363f57fe2d7a415f906bf57","relationTo":"pages"},"label":"Remove later"},"media":{"id":"6364286ddfa8dcdc3a66ff75","alt":"Screenshot of hope websites teal homepage overlaying a screenshot of the Payload CMS admin panel, used as an example to show what editing a page on the backend can produce content-wise for the frontend website.","filename":"hope-media-content-1.png","mimeType":"image/png","filesize":337060,"width":968,"height":787,"createdAt":"2022-11-03T20:45:33.742Z","updatedAt":"2022-11-03T20:45:33.742Z","url":"/media/hope-media-content-1.png"}},"id":"63642995886295454d6036fb","blockName":"Drafts + Preview","blockType":"mediaContent"},{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"A page-builder grants editors with the perfect amount of flexibility "}],"type":"h3"}],"layout":"twoColumns","columnOne":[{"children":[{"text":"The trick to building an enterprise CMS is all about how much control to give editors. You want the site to remain branded and deliberate, but allow editors to author experiences that can be incredibly flexible in nature. "}]},{"children":[{"text":"Give too much control and the site starts to look like a kaleidoscope. Too little, and you’ll have editors harping on the dev team to create more features."}]}],"columnTwo":[{"children":[{"text":"The Hope site makes heavy use of Payload’s Blocks field to craft pages not on a template basis—rather, dynamically based on the layout and content that the page requires. The site features 21 distinct layout-building blocks, each of which are flexible and usable, yet bulletproof and impossible to uglify."}]}]},"id":"636d45d3dc9db42badb94483","blockName":"Page builder","blockType":"content"},{"mediaBlockFields":{"position":"default","media":{"id":"636d8a48c748220d49c13a72","alt":"Hope Network Block Editor Light","filename":"hope-network-home-page-light.jpg","mimeType":"image/jpeg","filesize":133757,"width":1920,"height":1080,"createdAt":"2022-11-10T23:33:28.252Z","updatedAt":"2022-11-10T23:33:28.252Z","url":"/media/hope-network-home-page-light.jpg"},"caption":[{"children":[{"text":"The Payload block editor, showing the layout of the Hope Network homepage"}]}]},"id":"636d46d9dc9db42badb94484","blockName":"Block editor","blockType":"mediaBlock"},{"linkGridFields":{"links":[{"link":{"type":"custom","url":"https://payloadcms.com/docs/fields/blocks","label":"Learn more about the Payload Blocks field type"},"id":"636d4729dc9db42badb94486"}]},"id":"636d4728dc9db42badb94485","blockName":"Blocks link","blockType":"linkGrid"},{"reusableContentBlockFields":{"reusableContent":{"id":"636d48b70718c174729d3dc2","title":"For Enterprise Form Block","layout":[{"formFields":{"container":true,"richText":[{"children":[{"text":"For Enterprise"}],"type":"label"},{"type":"h2","children":[{"text":"Let us "},{"text":"guarantee your success.","underline":true}]},{"children":[{"text":"Enterprises throughout the Fortune 500 leverage Payload for critical content infrastructure."}]},{"children":[{"text":"Let us design a plan and budget deliberately meant to solve your needs."}]}],"form":"636270638500b86c17b16b40"},"id":"636d4873dc9db42badb94487","blockType":"form"}],"createdAt":"2022-11-10T18:53:43.244Z","updatedAt":"2022-11-13T16:24:00.044Z"}},"id":"636d48c6dc9db42badb94488","blockName":"For Enterprise CTA","blockType":"reusableContentBlock"}],"slug":"hope-network","link":{"type":"custom","url":"https://hopenetwork.org/"},"_status":"published","createdAt":"2022-11-01T15:42:11.111Z","updatedAt":"2022-11-13T16:25:19.919Z","meta":{"title":"Hope Network Website CMS | Payload CMS | Case Studies","description":"Hope Network needed a system of access control that could scale with their ever-expanding needs. Payload’s Access Control stood up to the task. ","image":{"id":"636d3d17aa2359c573815001","alt":"Hope Network Case Study Featured Image","filename":"hope-network-featured-image.jpg","mimeType":"image/jpeg","filesize":402442,"width":1920,"height":1430,"createdAt":"2022-11-10T18:04:07.129Z","updatedAt":"2022-11-10T18:04:07.129Z","url":"/media/hope-network-featured-image.jpg"}},"url":"https://hopenetwork.org"},"id":"63711209b63e956143681903"}]},"id":"6371121b4759ab4f6d591358","blockType":"caseStudyCards"},{"reusableContentBlockFields":{"reusableContent":{"id":"636be59374e94056f1fa6206","title":"NPX Block","layout":[{"blogContentFields":{"richText":[{"type":"h4","children":[{"text":"Get up and running with one line"}]},{"type":"p","children":[{"text":"Getting started is easy—and free forever. Just fire up a new terminal window and run the following command:"}]}]},"id":"636be57dd320bd2eb7d30c53","blockType":"blogContent"},{"codeFields":{"language":"none","code":"npx create-payload-app"},"id":"636be579d320bd2eb7d30c52","blockType":"code"}],"createdAt":"2022-11-09T17:38:27.060Z","updatedAt":"2022-11-09T17:38:27.060Z"}},"id":"636e90e925472c6bcce664c5","blockType":"reusableContentBlock"}],"slug":"websites","parent":{"id":"6363e44b5b4dcb5b5c7f6098","title":"Use Cases","hero":{"type":"default","livestream":{"guests":[]},"richText":[{"children":[{"text":"A CMS for websites, native apps, & more."}],"type":"h1"}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"adjectives":[]},"layout":[{"contentGridFields":{"forceDarkBackground":true,"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636d40d899cdd1791a20ddc8","relationTo":"pages"},"children":[{"text":"Websites"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Payload powers content for websites both large and small in an extremely fast, manageable and scalable manner."}]}],"id":"6363e3c1f04070411015b35b"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","url":"","doc":{"value":"636e95deb554c827004b2a10","relationTo":"pages"},"children":[{"text":"Web apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"636889e3795126c43286acab"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":"Native apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":""}]},{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"63689618795126c43286acac"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"646e6d4134461489d764c929","relationTo":"pages"},"children":[{"text":"Ecommerce"}]},{"text":""}],"type":"h4"},{"children":[{"text":"If you need more customization than off-the-shelf ecommerce platforms can provide, Payload is for you."}]}],"id":"6368964e795126c43286acad"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Subscription"}],"type":"h4"},{"children":[{"text":"Pair Payload with Stripe or a similar payments engine to create your own full subscriptions app."}]}],"id":"6368965f795126c43286acae"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Omnichannel"}],"type":"h4"},{"children":[{"text":"Author content in one place, but use it anywhere. Truly decouple your content from your presentation."}]}],"id":"63689673795126c43286acaf"}]},"id":"6363e3c0f04070411015b35a","blockType":"contentGrid"}],"slug":"use-cases","_status":"published","createdAt":"2022-11-03T15:54:51.928Z","updatedAt":"2023-05-31T21:41:55.021Z","meta":{"title":"Payload Use Cases | A CMS for websites, native apps, & more.","description":"Payload CMS can be used to power just about anything. Be it a website, native app, or as an application framework for something else entirely.","image":null},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2eba"}],"fullTitle":"Use Cases"},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2ec1"},{"doc":"636d40d899cdd1791a20ddc8","url":"/use-cases/websites","label":"Websites","id":"6477bf239b27bf3a5e5a2ec2"}],"_status":"published","createdAt":"2022-11-10T18:20:08.408Z","updatedAt":"2023-05-31T21:41:55.265Z","meta":{"title":"Websites | Use Cases | Payload CMS","description":"A headless CMS to build websites for ecommerce stores, blogs, portfolios, digital agencies and enterprise websites."},"fullTitle":"Use Cases > Websites"},"relationTo":"pages"},"children":[{"text":"Websites"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Payload powers content for websites both large and small in an extremely fast, manageable and scalable manner."}]}]},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","url":"","doc":{"value":{"id":"636e95deb554c827004b2a10","title":"Web Apps","fullTitle":"Use Cases > Web Apps","hero":{"type":"contentMedia","livestream":{},"richText":[{"children":[{"text":"A headless CMS for web apps that lets you "},{"text":"focus on what matters.","underline":true}],"type":"h1"},{"children":[{"text":"Unlike other headless CMS, Payload doesn't stop at websites. It can power ecommerce apps, SaaS, video game backends, and any other web app you can dream up. "}],"type":"large-body"}],"links":[{"link":{"type":"reference","reference":{"value":{"id":"6362714c8500b86c17b16b78","title":"For Enterprise","hero":{"type":"form","richText":[{"children":[{"text":"For enterprise"}],"type":"label"},{"children":[{"text":"Power your enterprise with Payload."}],"type":"h1"},{"type":"ul","children":[{"children":[{"text":"Enterprise plugins like SSO"}],"type":"li"},{"children":[{"text":"Support SLA"}],"type":"li"},{"children":[{"text":"Shared Slack channel"}],"type":"li"},{"children":[{"text":"Development Assistance"}],"type":"li"}]}],"links":[],"actions":[],"buttons":[],"adjectives":[],"form":"636270638500b86c17b16b40","livestream":{}},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"Built for Enterprise"}],"type":"label"}],"layout":"twoThirdsOneThird","columnOne":[{"children":[{"text":"Where other headless CMS fall short on extensibility and ownability, Payload delivers. "}],"type":"large-body"},{"children":[{"text":""}],"type":"large-body"},{"children":[{"text":"With us on your side, your engineering team’s efficiency will skyrocket, and our ROI will be immediate."}],"type":"large-body"}],"columnTwo":[{"children":[{"text":"Through a robust Support SLA and a shared Slack channel, your team will get access directly to the Payload engineers who work on the product. No one knows it better, and we can help save you time and effort."}]}]},"id":"636413c502eff70ff444ba09","blockType":"content"},{"cardGridFields":{"richText":[{"children":[{"text":"Enterprise-only access to the best that Payload provides."}],"type":"h3"}],"links":[],"cards":[{"title":"Enterprise plugins like SSO","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"6364168102eff70ff444ba0b"},{"title":"Support SLA","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"636416ab02eff70ff444ba0c"},{"title":"Customer Success Manager","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"636416b702eff70ff444ba0d"},{"title":"Shared Slack Channel","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"636416ca02eff70ff444ba0e"},{"title":"Influence over product roadmap","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"636416de02eff70ff444ba0f"},{"title":"Quarterly Business Reviews","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"636416eb02eff70ff444ba10"},{"title":"Dedicated development help","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"636416f702eff70ff444ba11"},{"title":"Custom plugin development","description":"","enableLink":false,"link":{"type":"custom","url":""},"id":"6364170c02eff70ff444ba12"}]},"id":"6364159d02eff70ff444ba0a","blockType":"cardGrid"},{"formFields":{"container":true,"richText":[{"children":[{"text":"For enterprise"}],"type":"label"},{"type":"h2","children":[{"text":"Interested in learning more?"}]},{"children":[{"text":"Enterprises throughout the Fortune 500 leverage Payload for critical content infrastructure."}]},{"children":[{"text":"Let us design a plan and budget deliberately meant to solve your needs."}]}],"form":"636270638500b86c17b16b40"},"id":"6362714772aafdfbb2f5c17f","blockType":"form"}],"slug":"for-enterprise","_status":"published","createdAt":"2022-11-02T13:31:56.633Z","updatedAt":"2023-02-15T18:45:25.777Z","meta":{"title":"Power your enterprise with Payload CMS | Payload CMS","description":"Power your enterprise with Payload CMS. Get access to enterprise plugins like SSO, and get development assistance or dedicated development support."},"breadcrumbs":[{"doc":"6362714c8500b86c17b16b78","url":"/for-enterprise","label":"For Enterprise","id":"63ed28453ba1e00982bee025"}],"fullTitle":"For Enterprise"},"relationTo":"pages"},"url":"/docs/getting-started/what-is-payload","label":"Let us help you get started","appearance":"default"},"id":"63700eb43c86ee16de8cec60"}],"actions":[],"buttons":[],"media":{"id":"63700ced17e4faa33e76424d","alt":"My290 Web App","filename":"web-apps-290-hero.png","mimeType":"image/png","filesize":348364,"width":1920,"height":1756,"createdAt":"2022-11-12T21:15:25.014Z","updatedAt":"2022-11-13T16:01:09.189Z","url":"/media/web-apps-290-hero.png"},"adjectives":[]},"layout":[{"contentGridFields":{"forceDarkBackground":true,"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"No field limits or API Quotas"}],"type":"label"},{"children":[{"text":"Payload provides out-of-the-box features to dramatically accelerate your engineering efficiency."}],"type":"h3"}],"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/configuration/overview","children":[{"text":"Code Driven"}]},{"text":""}]},{"children":[{"text":"Payload's is entirely driven from a code-based configuration, all fully typed in TypeScript. No fumbling around with a GUI. All code is stored in your version control - exactly how it should be."}]}],"id":"636e952625472c6bcce664c8"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/rest-api/overview","children":[{"text":"Instant APIs"}]},{"text":""}]},{"type":"p","children":[{"text":"Get instant and fully-featured REST, GraphQL, and server-side Node APIs based upon the shape of your data. Extend them easily with hooks, access control, and more."}]}],"id":"636e958625472c6bcce664c9"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/hooks/overview","children":[{"text":"Customize with hooks"}]},{"text":""}]},{"type":"p","children":[{"text":"Payload's hooks enable an unprecedented amount of control over your data and logic flow. Inject your custom business logic wherever you need."}]}],"id":"636e959525472c6bcce664ca"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/access-control/overview","children":[{"text":"Access Control"}]},{"text":""}]},{"type":"p","children":[{"text":"Deep access-control written purely with code for maximum flexibility. Want to integrate with another auth provider? No problem, drop in your code."}]}],"id":"636e95a625472c6bcce664cb"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"type":"h5","children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/admin/overview","children":[{"text":"Admin Panel"}]},{"text":""}]},{"type":"p","children":[{"text":"Admin UI back-office that is automatically generated based upon your data configuration. Easily swap in custom React components and add additional views."}]}],"id":"636e95b825472c6bcce664cc"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"custom","url":"/docs/authentication/overview","children":[{"text":"Authentication"}]},{"text":""}],"type":"h5"},{"type":"p","children":[{"text":"Make use of highly secure and customizable user auth out of the box, including function-based access control."}]}],"id":"636e95cf25472c6bcce664cd"}]},"id":"636e952525472c6bcce664c7","blockName":"Out of the box features","blockType":"contentGrid"},{"stickyHighlightsFields":{"highlights":[{"richText":[{"children":[{"text":"Retain full control"}],"type":"label"},{"children":[{"text":"Keep full control over your Express app."}],"type":"h2"},{"type":"p","children":[{"text":"Nothing is imposed on the structure of your app. Just initialize Payload and pass it your Express app. Maintain your own functionality outside of Payload."}]}],"link":{"type":"reference"},"type":"code","code":"const payload = require('payload');\nconst express = require('express');\nconst app = express();\n\n// Just pass your app into Payload and everything\n// will be scoped to Payload routers.\n\npayload.init({\n  secret: 'XXXXXXXXXXXXXXXXXXXXXXXXX',\n  mongoURL: 'mongodb://localhost/payload',\n  express: app,\n});\n\n// Your other custom routes here\n\napp.listen(process.env.PORT, () => {\n  console.log(\\`Application listening on \\${3000}...\\`);\n});","id":"6370112082730c09f943e056"},{"richText":[{"children":[{"text":"Extend via Hooks"}],"type":"label"},{"children":[{"text":"Implement custom business logic with Hooks."},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/hooks/overview","children":[{"text":""}]},{"text":""}],"type":"h2"},{"type":"p","children":[{"text":"Both collection and field-level hooks enable an unprecedented amount of control over your data and logic flow. Customize output, sanitize incoming data, or easily integrate with third-party platforms."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/hooks/overview","label":"Learn about Hooks"},"type":"code","code":"const Customers = {\n  // ...\n  hooks: {\n    beforeChange: [\n      // Before the Customer is created or updated,\n      // sync it to Hubspot\n      syncCustomerToHubspot,\n    ],\n    afterChange: [\n      // Send the new Customer a welcome email\n      // after it's successfully created\n      sendWelcomeEmail,\n    ],\n    afterRead: [\n      // Dynamically append user's active subscriptions\n      // straight from Stripe\n      addStripeSubscriptions,\n    ],\n  },\n};","id":"6370118282730c09f943e057"},{"richText":[{"children":[{"text":"Powerful Access Control"}],"type":"label"},{"children":[{"text":"Secure your app with function-based access control."},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/hooks/overview","children":[{"text":""}]},{"text":""},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/access-control/overview","children":[{"text":""}]},{"text":""}],"type":"h2"},{"type":"p","children":[{"text":"Access control functions give you control based on either a document or field level. Build out your own RBAC or any access control pattern you need."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/access-control/overview","label":"Read about access control"},"type":"code","code":"const Orders = {\n  // ...\n  access: {\n    create: () => true, // Everyone can create\n    read: ({ req: { user } }) => {\n      if (user) {\n        return { // Users can only read their own\n          owner: { equals: user.id, },\n        };\n      }\n\n      return false; // Not logged in? Can't read any\n    },\n    update: ({ req: { user } }) => {\n      // Only Admins can update Orders\n      if (user.roles.includes('admin')) return true;\n      return false;\n    },\n    delete: () => false, // No one can delete\n  },\n};","id":"637011ba82730c09f943e058"},{"richText":[{"children":[{"text":"Auto-generated admin panel"}],"type":"label"},{"children":[{"text":"Don't build an admin panel to manage your app from scratch."},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/admin/overview","children":[{"text":""}]},{"text":""}],"type":"h2"},{"type":"p","children":[{"text":"An Admin UI back-office is automatically generated based upon your data configuration. Fully-extensible, easily modify an existing component or swap in your own custom React components."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/admin/overview","label":"Learn about the Admin UI"},"type":"media","media":{"id":"63701e1817e4faa33e765d2c","alt":"Web app admin panel created with Payload","filename":"290-admin.png","mimeType":"image/png","filesize":76550,"width":1280,"height":1245,"createdAt":"2022-11-12T22:28:40.299Z","updatedAt":"2022-11-13T15:57:51.401Z","url":"/media/290-admin.png"},"id":"637011ee82730c09f943e059"}]},"id":"6370111f82730c09f943e055","blockName":"Sticky features","blockType":"stickyHighlights"},{"caseStudyCardFields":{"cards":[{"richText":[{"children":[{"text":"Ecommerce Web App Case Study"}],"type":"label"},{"children":[{"text":"My290"}],"type":"h3"}],"caseStudy":{"id":"6362c4025b4dcb5b5c7f3aeb","updatedAt":"2022-11-14T00:51:59.639Z","createdAt":"2022-11-01T15:42:11.111Z","title":"My290","introContent":[{"children":[{"text":"Product configuration and ecommerce, all powered by Payload."}],"type":"h1"}],"featuredImage":{"id":"636da1023a28cc9d8e1198ff","alt":"My290 Case Study Featured Image","filename":"my290-case-study-featured-image.jpg","mimeType":"image/jpeg","filesize":163996,"width":1920,"height":1080,"createdAt":"2022-11-11T01:10:26.849Z","updatedAt":"2022-11-11T01:10:26.849Z","url":"/media/my290-case-study-featured-image.jpg"},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"2/90 Signs has built an extremely powerful realtime sign system designer, all powered by Payload."}],"type":"h3"}],"layout":"twoColumns","columnOne":[{"children":[{"text":"The CMS backend for 2/90 leverages Stripe to facilitate transactions for one-off products or fully custom sign orders, which are all editable and managed through the Payload CMS backend."}]}],"columnTwo":[{"children":[{"text":"This functionality provides 2/90 with the ability to send orders from the sign building software straight to production without missing a beat."}]}]},"id":"63618ad31011a841528d5421","blockName":"Intro","blockType":"content"},{"sliderFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"All sign specs are stored in Payload on a project- by-project basis, which allows for easy reorders, updates, and edits."}],"type":"h3"}],"sliderType":"imageSlider","imageSlides":[{"image":{"id":"636da3033a28cc9d8e11a552","alt":"My290 Sign Editing","filename":"my290-sign-edit.jpg","mimeType":"image/jpeg","filesize":222087,"width":1920,"height":1080,"createdAt":"2022-11-11T01:18:59.276Z","updatedAt":"2022-11-11T01:18:59.276Z","url":"/media/my290-sign-edit.jpg"},"id":"636da3acec21a24ff78243de"},{"image":{"id":"636da3903a28cc9d8e11a595","alt":"My290 Sign Editing Backer","filename":"my290-sign-edit-backer.jpg","mimeType":"image/jpeg","filesize":203759,"width":1920,"height":1080,"createdAt":"2022-11-11T01:21:20.286Z","updatedAt":"2022-11-11T01:21:20.286Z","url":"/media/my290-sign-edit-backer.jpg"},"id":"636da3ceec21a24ff78243df"},{"image":{"id":"636da48a3a28cc9d8e11ac54","alt":"My290 Sign Editing Identification Sign","filename":"my290-identification-sign.jpg","mimeType":"image/jpeg","filesize":116588,"width":1920,"height":1080,"createdAt":"2022-11-11T01:25:30.479Z","updatedAt":"2022-11-11T01:25:30.479Z","url":"/media/my290-identification-sign.jpg"},"id":"636da3d2ec21a24ff78243e0"}],"quoteSlides":[]},"id":"63613dd5246cb1b8ea11ba1b","blockName":"Image Slider","blockType":"slider"},{"contentFields":{"layout":"twoColumns","columnOne":[{"children":[{"text":"The customization options on the frontend are endless, and every detail needs to be one hundred percent accurate, which meant 2/90 needed to use a backend that was up to the task. "}]}],"columnTwo":[{"children":[{"text":"Design specs are highly configurable and inherit from a base system spec. 2/90 needed to design a highly intricate schema, and Payload supported everything needed."}]}]},"id":"636e8b8cf46b481ca469fa07","blockName":"Slider Content","blockType":"content"},{"mediaContentFields":{"alignment":"mediaContent","container":true,"richText":[{"children":[{"text":"Access Control"}],"type":"label"},{"type":"label","children":[{"text":""}]},{"children":[{"text":"Organization-based access control"}],"type":"h3"},{"children":[{"text":"Users are tied to Organizations which allows 2/90 to restrict what products they can order, whose orders they can see, which customers are eligible for paying via invoice, and much more."}]}],"link":{"type":"reference"},"media":{"id":"636e8c5bb554c827004b0183","alt":"My290 Access Control","filename":"my290-access-control-1.png","mimeType":"image/png","filesize":83524,"width":1247,"height":1077,"createdAt":"2022-11-11T17:54:35.853Z","updatedAt":"2022-11-11T17:59:17.563Z","url":"/media/my290-access-control-1.png"}},"id":"636e8bd5f46b481ca469fa08","blockName":"Access Control","blockType":"mediaContent"},{"linkGridFields":{"links":[{"link":{"type":"custom","url":"/docs/access-control/overview","label":"Learn about Payload’s Access Control"},"id":"636e8f04f46b481ca469fa0c"}]},"id":"636e8f01f46b481ca469fa0b","blockType":"linkGrid"},{"reusableContentBlockFields":{"reusableContent":{"id":"636da0413a28cc9d8e118fec","updatedAt":"2022-11-12T21:48:48.943Z","createdAt":"2022-11-10T18:53:43.244Z","title":"For Apps Form Block","layout":[{"formFields":{"container":true,"richText":[{"children":[{"text":"For Apps"}],"type":"label"},{"type":"h2","children":[{"text":"Let us "},{"text":"guarantee your success.","underline":true}]},{"children":[{"text":"Enterprises throughout the Fortune 500 leverage Payload for critical content infrastructure."}]},{"children":[{"text":"Let us design a plan and budget deliberately meant to solve your needs."}]}],"form":"636270638500b86c17b16b40"},"id":"636d4873dc9db42badb94487","blockType":"form"}]}},"id":"636e8c68f46b481ca469fa09","blockType":"reusableContentBlock"}],"slug":"my290","link":{"type":"custom","url":"https://hopenetwork.org/"},"_status":"published","meta":{"title":"My290 | Case Study | Web app powered by Payload","description":"Payload delivered 2/90 Signs an extremely extensible CMS backend to power a custom sign building web app.","image":{"id":"636da1023a28cc9d8e1198ff","alt":"My290 Case Study Featured Image","filename":"my290-case-study-featured-image.jpg","mimeType":"image/jpeg","filesize":163996,"width":1920,"height":1080,"createdAt":"2022-11-11T01:10:26.849Z","updatedAt":"2022-11-11T01:10:26.849Z","url":"/media/my290-case-study-featured-image.jpg"}},"url":"https://my.290signs.com/"},"id":"6371151597eb0cce1599e9f5"}]},"id":"6371151497eb0cce1599e9f4","blockType":"caseStudyCards"},{"reusableContentBlockFields":{"reusableContent":{"id":"636e91a2b554c827004b14f0","title":"Payload Cloud Call To Action","layout":[{"ctaFields":{"richText":[{"children":[{"text":"Payload is free and open-source."}],"type":"h3"},{"children":[{"text":"You can host it yourself, or let us handle hosting for you on "},{"type":"link","linkType":"custom","url":"https://payloadcms.com/cloud-pricing","children":[{"text":"Payload Cloud"}]},{"text":". "}]}],"feature":"cpa","links":[{"link":{"type":"reference","reference":{"value":"636c1a8b74e94056f1fada16","relationTo":"pages"},"url":"","label":"Get Started on Payload Cloud"},"id":"636e91898a932ba2443ec9d8"}]},"id":"636e917f8a932ba2443ec9d7","blockType":"cta"}],"createdAt":"2022-11-11T18:17:06.529Z","updatedAt":"2023-04-03T15:58:45.626Z"}},"id":"636e9a9525472c6bcce664d3","blockName":"CTA","blockType":"reusableContentBlock"}],"slug":"web-apps","breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2ebf"},{"doc":"636e95deb554c827004b2a10","url":"/use-cases/web-apps","label":"Web Apps","id":"6477bf239b27bf3a5e5a2ec0"}],"_status":"published","createdAt":"2022-11-11T18:35:10.814Z","updatedAt":"2023-05-31T21:41:55.244Z","meta":{"title":"Web Apps | Use Cases | Payload CMS","description":"Web apps often require advanced logic. Payload is the headless CMS that's suited perfectly to power the backend of any web app."},"parent":{"id":"6363e44b5b4dcb5b5c7f6098","title":"Use Cases","hero":{"type":"default","livestream":{"guests":[]},"richText":[{"children":[{"text":"A CMS for websites, native apps, & more."}],"type":"h1"}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"adjectives":[]},"layout":[{"contentGridFields":{"forceDarkBackground":true,"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636d40d899cdd1791a20ddc8","relationTo":"pages"},"children":[{"text":"Websites"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Payload powers content for websites both large and small in an extremely fast, manageable and scalable manner."}]}],"id":"6363e3c1f04070411015b35b"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","url":"","doc":{"value":"636e95deb554c827004b2a10","relationTo":"pages"},"children":[{"text":"Web apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"636889e3795126c43286acab"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":"Native apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":""}]},{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"63689618795126c43286acac"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"646e6d4134461489d764c929","relationTo":"pages"},"children":[{"text":"Ecommerce"}]},{"text":""}],"type":"h4"},{"children":[{"text":"If you need more customization than off-the-shelf ecommerce platforms can provide, Payload is for you."}]}],"id":"6368964e795126c43286acad"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Subscription"}],"type":"h4"},{"children":[{"text":"Pair Payload with Stripe or a similar payments engine to create your own full subscriptions app."}]}],"id":"6368965f795126c43286acae"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Omnichannel"}],"type":"h4"},{"children":[{"text":"Author content in one place, but use it anywhere. Truly decouple your content from your presentation."}]}],"id":"63689673795126c43286acaf"}]},"id":"6363e3c0f04070411015b35a","blockType":"contentGrid"}],"slug":"use-cases","_status":"published","createdAt":"2022-11-03T15:54:51.928Z","updatedAt":"2023-05-31T21:41:55.021Z","meta":{"title":"Payload Use Cases | A CMS for websites, native apps, & more.","description":"Payload CMS can be used to power just about anything. Be it a website, native app, or as an application framework for something else entirely.","image":null},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2eba"}],"fullTitle":"Use Cases"}},"relationTo":"pages"},"children":[{"text":"Web apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}]},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":{"id":"636e9e15b554c827004b50f6","title":"Native Apps","fullTitle":"Use Cases > Native Apps","hero":{"type":"contentMedia","livestream":{},"richText":[{"children":[{"text":"A headless CMS "},{"text":"to power native apps","underline":true},{"text":", from auth to uploads."}],"type":"h1"},{"children":[{"text":"Payload is the perfect native app headless CMS. Instantly get all the tools you need to power your native app backend—including APIs, authentication, content management, media storage, and more."}],"type":"large-body"}],"links":[],"actions":[],"buttons":[],"media":{"id":"636d679c923145e515d75c96","alt":"Payload authentication used in Quikplow native app","filename":"quik-auth-1.png","mimeType":"image/png","filesize":86721,"width":1080,"height":1080,"createdAt":"2022-11-10T21:05:32.554Z","updatedAt":"2022-11-10T21:06:27.479Z","url":"/media/quik-auth-1.png"},"adjectives":[]},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"type":"label","children":[{"text":"Save time and budget"}]},{"type":"h3","children":[{"text":"Backends and admin panels are hard, and you've built them many times before."}]}],"layout":"twoColumns","columnOne":[{"type":"p","children":[{"text":"Almost any native app needs to have a powerful back-office to manage users, orders, media, and more. If you've ever built a native app like this, you know how tiring it gets to have to build a web-based admin UI in addition to the native app itself. With Payload, you can focus only on what matters—your app."}]}],"columnTwo":[{"type":"p","children":[{"text":"Let Payload automatically deliver you with a full API—including REST, GraphQL and Local Node APIs. You'll supercharge your app development and be able to focus on what matters."}]}]},"id":"636e9d5825472c6bcce664d5","blockName":"Intro","blockType":"content"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"type":"label","children":[{"text":"AUTO-GENERATED ADMIN PANEL"}]},{"type":"h3","children":[{"text":"Don’t build an admin panel to manage your app from scratch."},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/admin/overview","children":[{"text":""}]},{"text":""}]},{"type":"p","children":[{"text":"Let Payload do it for you. Its UI was built to power any type of app—from simple to complex, and the best part is that it's fully extensible."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/admin/overview","label":"Learn about the Admin UI"},"media":{"id":"63711bdb807b4c03e7444c50","alt":"Native app admin panel powered by payload","filename":"native-apps-ui-min.png","mimeType":"image/png","filesize":167374,"width":1920,"height":1681,"createdAt":"2022-11-13T16:31:23.601Z","updatedAt":"2022-11-13T16:31:23.601Z","url":"/media/native-apps-ui-min.png"}},"id":"636e9de125472c6bcce664d7","blockName":"Don't build your own admin UI","blockType":"mediaContent"},{"codeFeatureFields":{"heading":"Implement your own business logic.","richText":[{"children":[{"text":"Payload's auto-generated CRUD APIs can be extended in any way that your app needs with Hooks. If you need more than CRUD, no worries—it's your Node server. Add whatever your app needs right alongside of Payload in Express or GraphQL."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/hooks/overview","label":"See the power of Hooks","appearance":"default"},"language":"none","code":"const Users = {\n  // ...\n  hooks: {\n    beforeChange: [\n      // Before the User is created or updated,\n      // sync it to Hubspot\n      syncCustomerToHubspot,\n    ],\n    afterChange: [\n      // Send the new User a welcome email\n      // after it's successfully created\n      sendWelcomeEmail,\n    ],\n    afterRead: [\n      // Dynamically append user's active subscriptions\n      // straight from Stripe\n      addStripeSubscriptions,\n    ],\n  },\n};"},"id":"6370200f82730c09f943e05b","blockName":"Hooks","blockType":"codeFeature"},{"caseStudyCardFields":{"cards":[{"richText":[{"children":[{"text":"Native App Case Study"}],"type":"label"},{"children":[{"text":"Quikplow"}],"type":"h3"}],"caseStudy":{"id":"6362c4225b4dcb5b5c7f3bcd","updatedAt":"2022-11-14T00:51:26.274Z","createdAt":"2022-11-01T15:42:11.111Z","title":"Quikplow","introContent":[{"children":[{"text":"Native app auth, location-based search, ecommerce, and more "},{"text":"all powered by Payload","underline":true},{"text":". "}],"type":"h1"}],"featuredImage":{"id":"636d4e27969bcf4617bd6182","alt":"Quikplow Featured Image Case Study","filename":"quikplow-case-study-feature.jpg","mimeType":"image/jpeg","filesize":433234,"width":1920,"height":1080,"createdAt":"2022-11-10T19:16:55.569Z","updatedAt":"2022-11-10T20:06:26.390Z","url":"/media/quikplow-case-study-feature.jpg"},"layout":[{"contentFields":{"useLeadingHeader":false,"leadingHeader":[{"children":[{"text":""}]}],"layout":"oneColumn","columnOne":[{"children":[{"text":"Quikplow "},{"text":"saved dev time and budget","underline":true},{"text":" by building their backend on Payload."}],"type":"h2"},{"children":[{"text":"The app is similar to an \"Uber for snow plows\". If it snows, and you don't want to take care of it yourself, you can download the app and request a snow plow to come take care of it for you. Then, the app will match you to a Service Provider, by proximity, who will come out and plow your driveway. "}]}],"columnTwo":[{"children":[{"text":""}]}]},"id":"63618ad31011a841528d5421","blockName":"Intro Content","blockType":"content"},{"mediaContentFields":{"alignment":"contentMedia","container":true,"richText":[{"children":[{"text":"Engineers got to skip auth and CRUD completely"}],"type":"h3"},{"children":[{"text":"The entire app, front to back, was built in less than 4 months thanks to Payload. Out of the box, Payload delivered a full, secure CRUD API, including authentication—which kept the Quikplow team moving and not bogged down by writing boring CRUD and auth endpoints, yet again."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/authentication/overview","label":"Learn how to use Payload auth"},"media":{"id":"636d679c923145e515d75c96","alt":"Payload authentication used in Quikplow native app","filename":"quik-auth-1.png","mimeType":"image/png","filesize":86721,"width":1080,"height":1080,"createdAt":"2022-11-10T21:05:32.554Z","updatedAt":"2022-11-10T21:06:27.479Z","url":"/media/quik-auth-1.png"}},"id":"63712c0653d84b5430d01212","blockName":"Skip CRUD","blockType":"mediaContent"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"children":[{"text":"React Admin Panel"}],"type":"label"},{"children":[{"text":"Instant Admin Back-Office"}],"type":"h3"},{"children":[{"text":"Thanks to Payload's auto-generated admin UI, the Quikplow team has a fully featured admin panel that they can use to handle customer support queries, service provider onboarding, payouts using Stripe Connect, and much more."}]},{"children":[{"text":"If Quikplow was built with a typical app framework, they would have had to roll their own app management UI, and that would have added on months to the dev timeline."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/admin/overview","label":"Learn about Payload's Admin UI"},"media":{"id":"63711bdb807b4c03e7444c50","alt":"Native app admin panel powered by payload","filename":"native-apps-ui-min.png","mimeType":"image/png","filesize":167374,"width":1920,"height":1681,"createdAt":"2022-11-13T16:31:23.601Z","updatedAt":"2022-11-13T16:31:23.601Z","url":"/media/native-apps-ui-min.png"}},"id":"637155b5ce00d6b1fe5900a8","blockName":"Admin UI","blockType":"mediaContent"},{"stickyHighlightsFields":{"highlights":[{"richText":[{"children":[{"text":"Access Control"}],"type":"label"},{"children":[{"text":"Security guaranteed by Payload."},{"type":"link","newTab":false,"url":"http://localhost:3000/docs/access-control/overview","children":[{"text":""}]},{"text":""}],"type":"h3"},{"type":"p","children":[{"text":"The app features robust access control, ensuring that different users can only access information that pertains to them, and nothing else. It's all incredibly dynamic and handled seamlessly by Payload."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/access-control/overview","label":"Learn about Access Control"},"type":"code","code":"const Requests: CollectionConfig = {\n  slug: 'requests',\n  access: {\n    read: ({ req: { user }, id }) => { // highlight-line\n      // Customers can only read their own requests // highlight-line\n      if (isCustomer(user)) { // highlight-line\n        return { customer: { equals: user.id } } // highlight-line\n      } // highlight-line\n // highlight-line\n      // Providers can only read their own requests // highlight-line\n      if (isProvider(user)) { // highlight-line\n        return { provider: { equals: user.id } } // highlight-line\n      } // highlight-line\n // highlight-line\n      // Admins can read all // highlight-line\n      if (isAdmin(user)) return true; // highlight-line\n // highlight-line\n      // None of the above? Can't read any // highlight-line\n      return false; // highlight-line\n    }, // highlight-line\n    // All other access control here\n  },\n  fields: [\n    // fields here\n  ]\n}","id":"63715929ce00d6b1fe5900ac"},{"richText":[{"children":[{"text":"Hooks"}],"type":"label"},{"children":[{"text":"Business logic integrated seamlessly with Hooks."},{"type":"link","newTab":false,"url":"http://localhost:3000/docs/hooks/overview","children":[{"text":""}]},{"text":""}],"type":"h3"},{"type":"p","children":[{"text":"Stripe Connect was integrated into Payload seamlessly to process payments from customer to service provider, while sending a small percentage back to Quikplow itself. "}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/hooks/overview","label":"Learn about Hooks"},"type":"code","code":"const Requests: CollectionConfig = {\n  slug: 'requests',\n  hooks: { // highlight-line\n    beforeChange: [ // highlight-line\n      generateActivityLog, // highlight-line\n      ensureProviderIsValid, // highlight-line\n      createStripePaymentIntent, // highlight-line\n      setRequestStatus, // highlight-line\n    ], // highlight-line\n    beforeValidate: [ // highlight-line\n      ensureProviderHasRequiredEquipment, // highlight-line \n    ], // highlight-line\n    afterChange: [ // highlight-line\n      notifyNearbyProviders, // highlight-line\n    ], // highlight-line\n  }, // highlight-line\n  fields: [\n    // fields here\n  ]\n}","id":"6371595fce00d6b1fe5900ad"}]},"id":"63715923ce00d6b1fe5900ab","blockName":"Access Control + Hooks","blockType":"stickyHighlights"},{"reusableContentBlockFields":{"reusableContent":{"id":"636da0413a28cc9d8e118fec","updatedAt":"2022-11-12T21:48:48.943Z","createdAt":"2022-11-10T18:53:43.244Z","title":"For Apps Form Block","layout":[{"formFields":{"container":true,"richText":[{"children":[{"text":"For Apps"}],"type":"label"},{"type":"h2","children":[{"text":"Let us "},{"text":"guarantee your success.","underline":true}]},{"children":[{"text":"Enterprises throughout the Fortune 500 leverage Payload for critical content infrastructure."}]},{"children":[{"text":"Let us design a plan and budget deliberately meant to solve your needs."}]}],"form":"636270638500b86c17b16b40"},"id":"636d4873dc9db42badb94487","blockType":"form"}]}},"id":"636d4ea2dc9db42badb94489","blockType":"reusableContentBlock"}],"slug":"quikplow","link":{"type":"custom","url":"https://hopenetwork.org/"},"_status":"published","meta":{"title":"Quikplow | Case Study | Native app powered by Payload CMS","description":"Payload can be used for much more than supplying content to brochure websites. Quikplow built an on-demand plow service app powered by Payload.","image":{"id":"636d4e27969bcf4617bd6182","alt":"Quikplow Featured Image Case Study","filename":"quikplow-case-study-feature.jpg","mimeType":"image/jpeg","filesize":433234,"width":1920,"height":1080,"createdAt":"2022-11-10T19:16:55.569Z","updatedAt":"2022-11-10T20:06:26.390Z","url":"/media/quikplow-case-study-feature.jpg"}},"url":"https://miquikplow.com/"},"id":"63710dd5d7707f379bab0c42"}]},"id":"63710dd4d7707f379bab0c41","blockName":"Quikplow Case Study","blockType":"caseStudyCards"},{"reusableContentBlockFields":{"reusableContent":{"id":"636e91a2b554c827004b14f0","title":"Payload Cloud Call To Action","layout":[{"ctaFields":{"richText":[{"children":[{"text":"Payload is free and open-source."}],"type":"h3"},{"children":[{"text":"You can host it yourself, or let us handle hosting for you on "},{"type":"link","linkType":"custom","url":"https://payloadcms.com/cloud-pricing","children":[{"text":"Payload Cloud"}]},{"text":". "}]}],"feature":"cpa","links":[{"link":{"type":"reference","reference":{"value":"636c1a8b74e94056f1fada16","relationTo":"pages"},"url":"","label":"Get Started on Payload Cloud"},"id":"636e91898a932ba2443ec9d8"}]},"id":"636e917f8a932ba2443ec9d7","blockType":"cta"}],"createdAt":"2022-11-11T18:17:06.529Z","updatedAt":"2023-04-03T15:58:45.626Z"}},"id":"63701f0982730c09f943e05a","blockName":"CTA","blockType":"reusableContentBlock"}],"slug":"native-apps","breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2ebd"},{"doc":"636e9e15b554c827004b50f6","url":"/use-cases/native-apps","label":"Native Apps","id":"6477bf239b27bf3a5e5a2ebe"}],"_status":"published","createdAt":"2022-11-11T19:10:13.683Z","updatedAt":"2023-05-31T21:41:55.208Z","meta":{"title":"Native Apps | Use Cases | Payload CMS","description":"Payload is the perfect headless CMS to power the backend for your entire native app, from authentication to uploads."},"parent":{"id":"6363e44b5b4dcb5b5c7f6098","title":"Use Cases","hero":{"type":"default","livestream":{"guests":[]},"richText":[{"children":[{"text":"A CMS for websites, native apps, & more."}],"type":"h1"}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"adjectives":[]},"layout":[{"contentGridFields":{"forceDarkBackground":true,"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636d40d899cdd1791a20ddc8","relationTo":"pages"},"children":[{"text":"Websites"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Payload powers content for websites both large and small in an extremely fast, manageable and scalable manner."}]}],"id":"6363e3c1f04070411015b35b"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","url":"","doc":{"value":"636e95deb554c827004b2a10","relationTo":"pages"},"children":[{"text":"Web apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"636889e3795126c43286acab"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":"Native apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":""}]},{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"63689618795126c43286acac"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"646e6d4134461489d764c929","relationTo":"pages"},"children":[{"text":"Ecommerce"}]},{"text":""}],"type":"h4"},{"children":[{"text":"If you need more customization than off-the-shelf ecommerce platforms can provide, Payload is for you."}]}],"id":"6368964e795126c43286acad"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Subscription"}],"type":"h4"},{"children":[{"text":"Pair Payload with Stripe or a similar payments engine to create your own full subscriptions app."}]}],"id":"6368965f795126c43286acae"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Omnichannel"}],"type":"h4"},{"children":[{"text":"Author content in one place, but use it anywhere. Truly decouple your content from your presentation."}]}],"id":"63689673795126c43286acaf"}]},"id":"6363e3c0f04070411015b35a","blockType":"contentGrid"}],"slug":"use-cases","_status":"published","createdAt":"2022-11-03T15:54:51.928Z","updatedAt":"2023-05-31T21:41:55.021Z","meta":{"title":"Payload Use Cases | A CMS for websites, native apps, & more.","description":"Payload CMS can be used to power just about anything. Be it a website, native app, or as an application framework for something else entirely.","image":null},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2eba"}],"fullTitle":"Use Cases"}},"relationTo":"pages"},"children":[{"text":"Native apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":{"id":"636e9e15b554c827004b50f6","title":"Native Apps","fullTitle":"Use Cases > Native Apps","hero":{"type":"contentMedia","livestream":{},"richText":[{"children":[{"text":"A headless CMS "},{"text":"to power native apps","underline":true},{"text":", from auth to uploads."}],"type":"h1"},{"children":[{"text":"Payload is the perfect native app headless CMS. Instantly get all the tools you need to power your native app backend—including APIs, authentication, content management, media storage, and more."}],"type":"large-body"}],"links":[],"actions":[],"buttons":[],"media":{"id":"636d679c923145e515d75c96","alt":"Payload authentication used in Quikplow native app","filename":"quik-auth-1.png","mimeType":"image/png","filesize":86721,"width":1080,"height":1080,"createdAt":"2022-11-10T21:05:32.554Z","updatedAt":"2022-11-10T21:06:27.479Z","url":"/media/quik-auth-1.png"},"adjectives":[]},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"type":"label","children":[{"text":"Save time and budget"}]},{"type":"h3","children":[{"text":"Backends and admin panels are hard, and you've built them many times before."}]}],"layout":"twoColumns","columnOne":[{"type":"p","children":[{"text":"Almost any native app needs to have a powerful back-office to manage users, orders, media, and more. If you've ever built a native app like this, you know how tiring it gets to have to build a web-based admin UI in addition to the native app itself. With Payload, you can focus only on what matters—your app."}]}],"columnTwo":[{"type":"p","children":[{"text":"Let Payload automatically deliver you with a full API—including REST, GraphQL and Local Node APIs. You'll supercharge your app development and be able to focus on what matters."}]}]},"id":"636e9d5825472c6bcce664d5","blockName":"Intro","blockType":"content"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"type":"label","children":[{"text":"AUTO-GENERATED ADMIN PANEL"}]},{"type":"h3","children":[{"text":"Don’t build an admin panel to manage your app from scratch."},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/admin/overview","children":[{"text":""}]},{"text":""}]},{"type":"p","children":[{"text":"Let Payload do it for you. Its UI was built to power any type of app—from simple to complex, and the best part is that it's fully extensible."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/admin/overview","label":"Learn about the Admin UI"},"media":{"id":"63711bdb807b4c03e7444c50","alt":"Native app admin panel powered by payload","filename":"native-apps-ui-min.png","mimeType":"image/png","filesize":167374,"width":1920,"height":1681,"createdAt":"2022-11-13T16:31:23.601Z","updatedAt":"2022-11-13T16:31:23.601Z","url":"/media/native-apps-ui-min.png"}},"id":"636e9de125472c6bcce664d7","blockName":"Don't build your own admin UI","blockType":"mediaContent"},{"codeFeatureFields":{"heading":"Implement your own business logic.","richText":[{"children":[{"text":"Payload's auto-generated CRUD APIs can be extended in any way that your app needs with Hooks. If you need more than CRUD, no worries—it's your Node server. Add whatever your app needs right alongside of Payload in Express or GraphQL."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/hooks/overview","label":"See the power of Hooks","appearance":"default"},"language":"none","code":"const Users = {\n  // ...\n  hooks: {\n    beforeChange: [\n      // Before the User is created or updated,\n      // sync it to Hubspot\n      syncCustomerToHubspot,\n    ],\n    afterChange: [\n      // Send the new User a welcome email\n      // after it's successfully created\n      sendWelcomeEmail,\n    ],\n    afterRead: [\n      // Dynamically append user's active subscriptions\n      // straight from Stripe\n      addStripeSubscriptions,\n    ],\n  },\n};"},"id":"6370200f82730c09f943e05b","blockName":"Hooks","blockType":"codeFeature"},{"caseStudyCardFields":{"cards":[{"richText":[{"children":[{"text":"Native App Case Study"}],"type":"label"},{"children":[{"text":"Quikplow"}],"type":"h3"}],"caseStudy":{"id":"6362c4225b4dcb5b5c7f3bcd","updatedAt":"2022-11-14T00:51:26.274Z","createdAt":"2022-11-01T15:42:11.111Z","title":"Quikplow","introContent":[{"children":[{"text":"Native app auth, location-based search, ecommerce, and more "},{"text":"all powered by Payload","underline":true},{"text":". "}],"type":"h1"}],"featuredImage":{"id":"636d4e27969bcf4617bd6182","alt":"Quikplow Featured Image Case Study","filename":"quikplow-case-study-feature.jpg","mimeType":"image/jpeg","filesize":433234,"width":1920,"height":1080,"createdAt":"2022-11-10T19:16:55.569Z","updatedAt":"2022-11-10T20:06:26.390Z","url":"/media/quikplow-case-study-feature.jpg"},"layout":[{"contentFields":{"useLeadingHeader":false,"leadingHeader":[{"children":[{"text":""}]}],"layout":"oneColumn","columnOne":[{"children":[{"text":"Quikplow "},{"text":"saved dev time and budget","underline":true},{"text":" by building their backend on Payload."}],"type":"h2"},{"children":[{"text":"The app is similar to an \"Uber for snow plows\". If it snows, and you don't want to take care of it yourself, you can download the app and request a snow plow to come take care of it for you. Then, the app will match you to a Service Provider, by proximity, who will come out and plow your driveway. "}]}],"columnTwo":[{"children":[{"text":""}]}]},"id":"63618ad31011a841528d5421","blockName":"Intro Content","blockType":"content"},{"mediaContentFields":{"alignment":"contentMedia","container":true,"richText":[{"children":[{"text":"Engineers got to skip auth and CRUD completely"}],"type":"h3"},{"children":[{"text":"The entire app, front to back, was built in less than 4 months thanks to Payload. Out of the box, Payload delivered a full, secure CRUD API, including authentication—which kept the Quikplow team moving and not bogged down by writing boring CRUD and auth endpoints, yet again."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/authentication/overview","label":"Learn how to use Payload auth"},"media":{"id":"636d679c923145e515d75c96","alt":"Payload authentication used in Quikplow native app","filename":"quik-auth-1.png","mimeType":"image/png","filesize":86721,"width":1080,"height":1080,"createdAt":"2022-11-10T21:05:32.554Z","updatedAt":"2022-11-10T21:06:27.479Z","url":"/media/quik-auth-1.png"}},"id":"63712c0653d84b5430d01212","blockName":"Skip CRUD","blockType":"mediaContent"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"children":[{"text":"React Admin Panel"}],"type":"label"},{"children":[{"text":"Instant Admin Back-Office"}],"type":"h3"},{"children":[{"text":"Thanks to Payload's auto-generated admin UI, the Quikplow team has a fully featured admin panel that they can use to handle customer support queries, service provider onboarding, payouts using Stripe Connect, and much more."}]},{"children":[{"text":"If Quikplow was built with a typical app framework, they would have had to roll their own app management UI, and that would have added on months to the dev timeline."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/admin/overview","label":"Learn about Payload's Admin UI"},"media":{"id":"63711bdb807b4c03e7444c50","alt":"Native app admin panel powered by payload","filename":"native-apps-ui-min.png","mimeType":"image/png","filesize":167374,"width":1920,"height":1681,"createdAt":"2022-11-13T16:31:23.601Z","updatedAt":"2022-11-13T16:31:23.601Z","url":"/media/native-apps-ui-min.png"}},"id":"637155b5ce00d6b1fe5900a8","blockName":"Admin UI","blockType":"mediaContent"},{"stickyHighlightsFields":{"highlights":[{"richText":[{"children":[{"text":"Access Control"}],"type":"label"},{"children":[{"text":"Security guaranteed by Payload."},{"type":"link","newTab":false,"url":"http://localhost:3000/docs/access-control/overview","children":[{"text":""}]},{"text":""}],"type":"h3"},{"type":"p","children":[{"text":"The app features robust access control, ensuring that different users can only access information that pertains to them, and nothing else. It's all incredibly dynamic and handled seamlessly by Payload."}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/access-control/overview","label":"Learn about Access Control"},"type":"code","code":"const Requests: CollectionConfig = {\n  slug: 'requests',\n  access: {\n    read: ({ req: { user }, id }) => { // highlight-line\n      // Customers can only read their own requests // highlight-line\n      if (isCustomer(user)) { // highlight-line\n        return { customer: { equals: user.id } } // highlight-line\n      } // highlight-line\n // highlight-line\n      // Providers can only read their own requests // highlight-line\n      if (isProvider(user)) { // highlight-line\n        return { provider: { equals: user.id } } // highlight-line\n      } // highlight-line\n // highlight-line\n      // Admins can read all // highlight-line\n      if (isAdmin(user)) return true; // highlight-line\n // highlight-line\n      // None of the above? Can't read any // highlight-line\n      return false; // highlight-line\n    }, // highlight-line\n    // All other access control here\n  },\n  fields: [\n    // fields here\n  ]\n}","id":"63715929ce00d6b1fe5900ac"},{"richText":[{"children":[{"text":"Hooks"}],"type":"label"},{"children":[{"text":"Business logic integrated seamlessly with Hooks."},{"type":"link","newTab":false,"url":"http://localhost:3000/docs/hooks/overview","children":[{"text":""}]},{"text":""}],"type":"h3"},{"type":"p","children":[{"text":"Stripe Connect was integrated into Payload seamlessly to process payments from customer to service provider, while sending a small percentage back to Quikplow itself. "}]}],"enableLink":true,"link":{"type":"custom","url":"/docs/hooks/overview","label":"Learn about Hooks"},"type":"code","code":"const Requests: CollectionConfig = {\n  slug: 'requests',\n  hooks: { // highlight-line\n    beforeChange: [ // highlight-line\n      generateActivityLog, // highlight-line\n      ensureProviderIsValid, // highlight-line\n      createStripePaymentIntent, // highlight-line\n      setRequestStatus, // highlight-line\n    ], // highlight-line\n    beforeValidate: [ // highlight-line\n      ensureProviderHasRequiredEquipment, // highlight-line \n    ], // highlight-line\n    afterChange: [ // highlight-line\n      notifyNearbyProviders, // highlight-line\n    ], // highlight-line\n  }, // highlight-line\n  fields: [\n    // fields here\n  ]\n}","id":"6371595fce00d6b1fe5900ad"}]},"id":"63715923ce00d6b1fe5900ab","blockName":"Access Control + Hooks","blockType":"stickyHighlights"},{"reusableContentBlockFields":{"reusableContent":{"id":"636da0413a28cc9d8e118fec","updatedAt":"2022-11-12T21:48:48.943Z","createdAt":"2022-11-10T18:53:43.244Z","title":"For Apps Form Block","layout":[{"formFields":{"container":true,"richText":[{"children":[{"text":"For Apps"}],"type":"label"},{"type":"h2","children":[{"text":"Let us "},{"text":"guarantee your success.","underline":true}]},{"children":[{"text":"Enterprises throughout the Fortune 500 leverage Payload for critical content infrastructure."}]},{"children":[{"text":"Let us design a plan and budget deliberately meant to solve your needs."}]}],"form":"636270638500b86c17b16b40"},"id":"636d4873dc9db42badb94487","blockType":"form"}]}},"id":"636d4ea2dc9db42badb94489","blockType":"reusableContentBlock"}],"slug":"quikplow","link":{"type":"custom","url":"https://hopenetwork.org/"},"_status":"published","meta":{"title":"Quikplow | Case Study | Native app powered by Payload CMS","description":"Payload can be used for much more than supplying content to brochure websites. Quikplow built an on-demand plow service app powered by Payload.","image":{"id":"636d4e27969bcf4617bd6182","alt":"Quikplow Featured Image Case Study","filename":"quikplow-case-study-feature.jpg","mimeType":"image/jpeg","filesize":433234,"width":1920,"height":1080,"createdAt":"2022-11-10T19:16:55.569Z","updatedAt":"2022-11-10T20:06:26.390Z","url":"/media/quikplow-case-study-feature.jpg"}},"url":"https://miquikplow.com/"},"id":"63710dd5d7707f379bab0c42"}]},"id":"63710dd4d7707f379bab0c41","blockName":"Quikplow Case Study","blockType":"caseStudyCards"},{"reusableContentBlockFields":{"reusableContent":{"id":"636e91a2b554c827004b14f0","title":"Payload Cloud Call To Action","layout":[{"ctaFields":{"richText":[{"children":[{"text":"Payload is free and open-source."}],"type":"h3"},{"children":[{"text":"You can host it yourself, or let us handle hosting for you on "},{"type":"link","linkType":"custom","url":"https://payloadcms.com/cloud-pricing","children":[{"text":"Payload Cloud"}]},{"text":". "}]}],"feature":"cpa","links":[{"link":{"type":"reference","reference":{"value":"636c1a8b74e94056f1fada16","relationTo":"pages"},"url":"","label":"Get Started on Payload Cloud"},"id":"636e91898a932ba2443ec9d8"}]},"id":"636e917f8a932ba2443ec9d7","blockType":"cta"}],"createdAt":"2022-11-11T18:17:06.529Z","updatedAt":"2023-04-03T15:58:45.626Z"}},"id":"63701f0982730c09f943e05a","blockName":"CTA","blockType":"reusableContentBlock"}],"slug":"native-apps","breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2ebd"},{"doc":"636e9e15b554c827004b50f6","url":"/use-cases/native-apps","label":"Native Apps","id":"6477bf239b27bf3a5e5a2ebe"}],"_status":"published","createdAt":"2022-11-11T19:10:13.683Z","updatedAt":"2023-05-31T21:41:55.208Z","meta":{"title":"Native Apps | Use Cases | Payload CMS","description":"Payload is the perfect headless CMS to power the backend for your entire native app, from authentication to uploads."},"parent":{"id":"6363e44b5b4dcb5b5c7f6098","title":"Use Cases","hero":{"type":"default","livestream":{"guests":[]},"richText":[{"children":[{"text":"A CMS for websites, native apps, & more."}],"type":"h1"}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"adjectives":[]},"layout":[{"contentGridFields":{"forceDarkBackground":true,"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636d40d899cdd1791a20ddc8","relationTo":"pages"},"children":[{"text":"Websites"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Payload powers content for websites both large and small in an extremely fast, manageable and scalable manner."}]}],"id":"6363e3c1f04070411015b35b"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","url":"","doc":{"value":"636e95deb554c827004b2a10","relationTo":"pages"},"children":[{"text":"Web apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"636889e3795126c43286acab"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":"Native apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":""}]},{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"63689618795126c43286acac"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"646e6d4134461489d764c929","relationTo":"pages"},"children":[{"text":"Ecommerce"}]},{"text":""}],"type":"h4"},{"children":[{"text":"If you need more customization than off-the-shelf ecommerce platforms can provide, Payload is for you."}]}],"id":"6368964e795126c43286acad"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Subscription"}],"type":"h4"},{"children":[{"text":"Pair Payload with Stripe or a similar payments engine to create your own full subscriptions app."}]}],"id":"6368965f795126c43286acae"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Omnichannel"}],"type":"h4"},{"children":[{"text":"Author content in one place, but use it anywhere. Truly decouple your content from your presentation."}]}],"id":"63689673795126c43286acaf"}]},"id":"6363e3c0f04070411015b35a","blockType":"contentGrid"}],"slug":"use-cases","_status":"published","createdAt":"2022-11-03T15:54:51.928Z","updatedAt":"2023-05-31T21:41:55.021Z","meta":{"title":"Payload Use Cases | A CMS for websites, native apps, & more.","description":"Payload CMS can be used to power just about anything. Be it a website, native app, or as an application framework for something else entirely.","image":null},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2eba"}],"fullTitle":"Use Cases"}},"relationTo":"pages"},"children":[{"text":""}]},{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}]},{"content":[{"children":[{"text":"04"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":{"id":"646e6d4134461489d764c929","title":"Ecommerce","fullTitle":"Use Cases > Ecommerce","hero":{"type":"contentMedia","livestream":{"guests":[]},"richText":[{"children":[{"text":"Build "},{"text":"ecommerce smarter,","underline":true},{"text":" not harder"}],"type":"h1"},{"children":[{"text":"Payload is the headless CMS that can help you eliminate providers like Shopify from the mix, giving you a seamless and powerful ecommerce solution that maximizes your engineering efficiency."}]}],"links":[{"link":{"type":"custom","url":"https://github.com/payloadcms/template-ecommerce","label":"Try the Ecommerce Starter Kit","appearance":"default"},"id":"6477c3b9b76dc04426fb9136"}],"actions":[],"buttons":[],"media":{"id":"6476245534461489d7665bbd","alt":"Ecommerce Hero","filename":"ecommerce hero.png","mimeType":"image/png","filesize":354974,"width":854,"height":849,"createdAt":"2023-05-30T16:29:09.536Z","updatedAt":"2023-05-30T16:29:09.536Z","url":"/media/ecommerce hero.png"},"adjectives":[]},"layout":[{"contentFields":{"layout":"twoThirdsOneThird","columnOne":[{"children":[{"text":"Integrated with Stripe and ready to sell"}],"type":"h2"}],"columnTwo":[{"children":[{"text":"Powered by Payload and Next.js — our ecommerce starter kit includes everything you need to get going, and it’s completely free and open source."}]}]},"id":"646e7d2248b747b566f89101","blockName":"Stripe callout","blockType":"content"},{"ctaFields":{"richText":[{"children":[{"text":"Pro-tip: Deploy with Payload Cloud."}],"type":"h2"},{"children":[{"text":"Get everything you need to run your app in production."}]}],"feature":"none","links":[{"link":{"type":"custom","reference":{"value":{"id":"6429f73faea011d1b4735131","title":"Payload Cloud","fullTitle":"Payload Cloud","hero":{"type":"default","livestream":{"guests":[]},"richText":[{"children":[{"text":"Deploy your entire stack in one place "},{"text":"with Payload Cloud.","underline":true}],"type":"h1"},{"type":"large-body","children":[{"text":""}]},{"type":"large-body","children":[{"text":"Payload Cloud works for any Node + Mongo app. Whether you're using Remix, Next, SvelteKit, or something else entirely, deploy it on Payload Cloud."}]},{"children":[{"text":"Payload Cloud is in beta. As we make refinements, enjoy cloud free through June 30th."}]}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"adjectives":[]},"layout":[{"pricingFields":{"plans":[{"name":"Standard","hasPrice":true,"price":"$$35","description":"Power small to medium-sized production projects for a low monthly fee.","enableLink":true,"link":{"type":"custom","url":"/new"},"features":[{"icon":"check","feature":"Mongo Atlas serverless DB","id":"6429f573b0f29bf9f5675c5c"},{"icon":"check","feature":"3GB database storage *","id":"642ca7cdb927d395cfbc6421"},{"icon":"check","feature":"30GB S3 file storage **","id":"6429f5abb0f29bf9f5675c5d"},{"icon":"check","feature":"40GB bandwidth /mo ***","id":"642ca54cb927d395cfbc641d"},{"icon":"check","feature":"512MB RAM, 1 vCPU","id":"6429f5bcb0f29bf9f5675c5e"},{"icon":"check","feature":"One custom domain","id":"6429f5cbb0f29bf9f5675c5f"},{"icon":"check","feature":"On-demand backup","id":"6429f861b0f29bf9f5675c6e"},{"icon":"check","feature":"Payload-branded email service","id":"6429f868b0f29bf9f5675c6f"}],"id":"6429f4e4b0f29bf9f5675c5b"},{"name":"Pro","hasPrice":true,"price":"$$199","description":"High-availability and dedicated infrastructure. For larger projects with bigger needs.","enableLink":true,"link":{"type":"custom","url":"/new"},"features":[{"icon":"check","feature":"Dedicated M10 Atlas cluster","id":"6429f60eb0f29bf9f5675c61"},{"icon":"check","feature":"30GB database storage *","id":"642ca7f8b927d395cfbc6422"},{"icon":"check","feature":"150GB file storage **","id":"6429f69db0f29bf9f5675c62"},{"icon":"check","feature":"100GB bandwidth /mo ***","id":"642ca5dfb927d395cfbc641e"},{"icon":"check","feature":"1GB RAM, 1 vCPU, 2 instances","id":"6429f6a8b0f29bf9f5675c63"},{"icon":"check","feature":"High-availability compute","id":"6429f6b3b0f29bf9f5675c64"},{"icon":"check","feature":"Up to 3 custom domains","id":"6429f91cb0f29bf9f5675c70"},{"icon":"check","feature":"Automatic backups","id":"6429f922b0f29bf9f5675c71"},{"icon":"check","feature":"White-labeled email service","id":"642acf34c802f0015b226396"}],"id":"6429f5f0b0f29bf9f5675c60"},{"name":"Enterprise","hasPrice":false,"price":"","title":"Custom Pricing","description":"For large-scale, critical content infrastructure. Support, SSO and more.","enableLink":true,"link":{"type":"reference","reference":{"value":"6362714c8500b86c17b16b78","relationTo":"pages"}},"features":[{"icon":"check","feature":"Any size Atlas database","id":"6429f6e3b0f29bf9f5675c66"},{"icon":"check","feature":"Unlimited database storage","id":"642ca80cb927d395cfbc6423"},{"icon":"check","feature":"Unlimited file storage","id":"6429f6f2b0f29bf9f5675c67"},{"icon":"check","feature":"Unlimited bandwidth","id":"642ca61ab927d395cfbc641f"},{"icon":"check","feature":"RAM and CPU scaled to needs","id":"6429f6fcb0f29bf9f5675c68"},{"icon":"check","feature":"High-availability compute","id":"6429f701b0f29bf9f5675c69"},{"icon":"check","feature":"Unlimited custom domains","id":"6429f709b0f29bf9f5675c6a"},{"icon":"check","feature":"White-labeled email service","id":"6429f718b0f29bf9f5675c6b"},{"icon":"check","feature":"SSO","id":"6429f71db0f29bf9f5675c6c"},{"icon":"check","feature":"Premium plugins","id":"6429f729b0f29bf9f5675c6d"},{"icon":"check","feature":"99.9% uptime SLA","id":"6429f966b0f29bf9f5675c72"}],"id":"6429f6c4b0f29bf9f5675c65"}],"disclaimer":""},"id":"6429f4e2b0f29bf9f5675c5a","blockName":"Pricing","blockType":"pricing"},{"contentGridFields":{"forceDarkBackground":true,"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"Get everything, "},{"text":"so you can ship anything.","underline":true}],"type":"h2"},{"children":[{"text":"Focus on building your app, and let us worry about the rest. Payload Cloud gives you everything you need to deploy a robust production environment."}],"type":"large-body"}],"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":"Email"}],"type":"h5"},{"children":[{"text":"We provide seamless email functionality for your app so you don't have to build it all yourself."}]}],"id":"6429f98cb0f29bf9f5675c74"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":"Predictable Pricing"}],"type":"h5"},{"children":[{"text":"Our pricing model is not based on users, which allows you to scale without worrying about unexpected costs."}]}],"id":"6429f98db0f29bf9f5675c75"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":"File Storage"}],"type":"h5"},{"children":[{"text":"Dedicated S3 bucket gives you scalable file storage behind a CDN."}]}],"id":"6429f98fb0f29bf9f5675c76"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"type":"h5","children":[{"text":"CDN"}]},{"children":[{"text":"Keep your APIs fast with built-in automatic CDN purging."}]}],"id":"6429f991b0f29bf9f5675c77"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Compute"}],"type":"h5"},{"children":[{"text":"More than enough CPU to power even the most demanding workloads."}]}],"id":"6429f992b0f29bf9f5675c78"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Database"}],"type":"h5"},{"children":[{"text":"Built on MongoDB Atlas for reliability and scalability"}]}],"id":"6429f993b0f29bf9f5675c79"},{"content":[{"children":[{"text":"07"}],"type":"label"},{"children":[{"text":"Realtime Logs"}],"type":"h5"},{"children":[{"text":"Errors happen — we give you realtime logs to help you diagnose and resolve issues faster."}]}],"id":"6429f994b0f29bf9f5675c7a"},{"content":[{"type":"label","children":[{"text":"08"}]},{"type":"h5","children":[{"text":"Zero downtime deploys"}]},{"children":[{"text":"With our intelligent deployment process you can push and deploy updates to your app with zero downtime."}]}],"id":"6429f996b0f29bf9f5675c7b"}]},"id":"6429f983b0f29bf9f5675c73","blockName":"Value Props","blockType":"contentGrid"},{"contentGridFields":{"forceDarkBackground":true,"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"Frequently Asked Questions"}],"type":"h3"}],"cells":[{"content":[{"type":"upload","value":{"id":"63e2ca3a9076942118bc1281"},"relationTo":"media","children":[{"text":" "}]},{"children":[{"text":"Are you planning to support PostgreSQL?"}],"type":"h5"},{"children":[{"text":"Yes, database support outside of MongoDB Atlas "},{"type":"link","linkType":"custom","url":"https://github.com/payloadcms/payload/discussions/287","newTab":true,"children":[{"text":"is already on our roadmap"}]},{"text":"."}]}],"id":"6429fa11b0f29bf9f5675c7d"},{"content":[{"type":"upload","value":{"id":"63e2ca3a9076942118bc1281"},"relationTo":"media","children":[{"text":" "}]},{"children":[{"text":"Will there be a free tier?"}],"type":"h5"},{"children":[{"text":"Yes. Eventually. There's a lot going on behind the scenes to make Payload Cloud a reality, and as we expand so will our tiers. Payload is open-source, so in the meantime, you can freely self-host."}]}],"id":"6429fa12b0f29bf9f5675c7e"},{"content":[{"type":"upload","value":{"id":"63e2ca3a9076942118bc1281"},"relationTo":"media","children":[{"text":" "}]},{"children":[{"text":"What about overages?"}],"type":"h5"},{"children":[{"text":"* $0.50 per GB of database storage, ** $0.20 per GB of bandwidth /mo,  and *** $0.02 per GB of file storage overages are charged for Standard and Pro plans."}]}],"id":"6429fa13b0f29bf9f5675c7f"}]},"id":"6429f9feb0f29bf9f5675c7c","blockName":"FAQs","blockType":"contentGrid"},{"contentFields":{"layout":"twoThirdsOneThird","columnOne":[{"children":[{"text":"Get all the plumbing and guaranteed uptime from trusted names without having to manage it all yourself."}],"type":"h3"}],"columnTwo":[{"children":[{"text":"Cloud is built on the DigitalOcean App Platform, using AWS S3 for storage, Mongo Atlas for Database(s), Cloudflare for CDN, and  GitHub to connect your repo(s)."}]}]},"id":"6429fa52b0f29bf9f5675c80","blockName":"Trusted Names","blockType":"content"},{"ctaFields":{"richText":[{"children":[{"text":"Deploy in Minutes"}],"type":"label"},{"children":[{"text":"Get Started with Payload Cloud"}],"type":"h3"},{"children":[{"text":"Create a cloud account, connect your GitHub account and deploy in minutes."}]}],"feature":"none","links":[{"link":{"type":"custom","url":"/new","label":"Get started with Payload Cloud"},"id":"6429fa71b0f29bf9f5675c82"}]},"id":"6429fa6bb0f29bf9f5675c81","blockType":"cta"}],"slug":"cloud-pricing","meta":{"title":"Payload Cloud | Deploy your project in minutes | Payload CMS","description":"Payload Cloud works for any Node + Mongo app. Whether you're using Remix, Next, SvelteKit, or something else entirely, deploy it on Payload Cloud.","image":"6429f04caea011d1b4734c0a"},"breadcrumbs":[{"doc":"6429f73faea011d1b4735131","url":"/cloud-pricing","label":"Payload Cloud","id":"645a96e13a84f613075dbc7f"}],"_status":"published","createdAt":"2023-04-02T21:44:31.795Z","updatedAt":"2023-05-09T18:54:25.974Z"},"relationTo":"pages"},"url":"https://payloadcms.com/new/clone/e-commerce","label":"Learn more"},"id":"647624b47b018a0d91aa0b89"}]},"id":"6476247a7b018a0d91aa0b88","blockName":"Cloud CTA","blockType":"cta"},{"mediaContentFields":{"alignment":"contentMedia","container":true,"richText":[{"children":[{"text":"Keep it simple."}],"type":"h3"},{"children":[{"text":"Avoid the chaos of multiple platforms. Whether you’re an admin logging in to manage content or products, or an engineer that needs to build a new feature, everything happens within Payload."}]}],"link":{"type":"reference"},"media":{"id":"647627b434461489d7665ceb","alt":"Code and Admin UI example","filename":"typescript-and-admin-ui.png","mimeType":"image/png","filesize":307522,"width":1077,"height":778,"createdAt":"2023-05-30T16:43:32.255Z","updatedAt":"2023-05-30T16:43:32.255Z","url":"/media/typescript-and-admin-ui.png"}},"id":"646e7d5d48b747b566f89102","blockName":"Keep it simple","blockType":"mediaContent"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"children":[{"text":"User Authentication"}],"type":"h3"},{"children":[{"text":"Payload provides for powerful and customizable Authentication out of the box, allowing you to provide customer accounts securely and responsibly."}]}],"enableLink":true,"link":{"type":"reference","reference":{"value":{"id":"6367e39d4536413078216812","title":"Handling authentication in NextJS on Payload CMS","image":"6367e3284536413078216801","excerpt":[{"type":"h4","children":[{"text":"Understanding and building authentication can be a burden at best, and a security risk at worst. Let's get through it together!"}]}],"content":[{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"Payload gives the most complete and flexible way to manage user collections that support all the different authentication needs of your sites. It does so using secure HTTP-only cookies and includes support of boilerplate workflows for password recovery and lockout. You can even use Payload to manage multiple auth collections or build in robust role based access controls."}]},{"type":"p","children":[{"text":"By the end of this article you will have a full understanding of how to implement authentication of users on your frontend NextJS website that can be managed from the admin UI of Payload CMS."}]},{"type":"h3","children":[{"text":"Overview"}]},{"type":"p","children":[{"text":"There are two code repositories created for this article that will be used as reference."}]},{"type":"ol","children":[{"type":"li","children":[{"text":""},{"type":"link","newTab":false,"url":"https://github.com/payloadcms/next-auth-frontend","children":[{"text":"payloadcms/next-auth-frontend"}]},{"text":"—the React app built in NextJS. It is a starter website that includes login and logout routes and forms for login, forgot password and reset password. It also demonstrates how the frontend will call the backend for the authenticated user."}]},{"type":"li","children":[{"text":""},{"type":"link","newTab":false,"url":"https://github.com/payloadcms/next-auth-cms","children":[{"text":"payloadcms/next-auth-cms"}]},{"text":"—the Payload CMS app setup to handle the database, storing user credentials, and the APIs for handling the REST or GraphQL requests that our auth example is built on."}]}]},{"type":"p","children":[{"text":"You can follow the getting started sections of each repo provided. Setup should only take a few minutes for each. The seeding functions are called from the "},{"text":"onInit","code":true},{"text":" function found in the "},{"text":"payload.config.ts","code":true},{"text":" of our "},{"text":"next-auth-cms","code":true},{"text":" app. By starting the server you should already have both an admin user and a customer, as defined by each role and also a home page."}]},{"type":"h3","children":[{"text":"User Auth"}]},{"type":"p","children":[{"text":"Since the user has already been created in the "},{"text":"onInit","code":true},{"text":" function, we should be able to start both frontend and backend services, open the browser to the locally running site to see the landing page."}]},{"type":"p","children":[{"text":"We haven't logged in yet and the UI reflects that."}]}]},"id":"6367e347b5382746f4cbc564","blockType":"blogContent"},{"mediaBlockFields":{"position":"default","media":"6367e37d453641307821680a"},"id":"6367e361b5382746f4cbc565","blockType":"mediaBlock"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"If we were to look at the browser inspection tools showing network traffic and refresh the page, we'd see a call being made to backend that identifies the user state. The route is a GET request to "},{"text":"/api/users/me","code":true},{"text":" on the backend which at this point simply returned "},{"text":"user: null","code":true},{"text":"."}]},{"type":"p","children":[{"text":"That call has been defined as a "},{"text":"useEffect","code":true},{"text":" built into the Auth Provider component of "},{"text":"auth-next-frontend","code":true},{"text":" under "},{"text":"/components/Auth/index.ts","code":true},{"text":". It is helpful to understand that the user in this auth context at any given time may be one of three states: "},{"text":"undefined","code":true},{"text":", before the query has finished, "},{"text":"null","code":true},{"text":" as a guest, or the successful user object being returned."}]}]},"id":"6367e386b5382746f4cbc566","blockType":"blogContent"},{"codeFields":{"language":"js","code":"useEffect(() => {\n  const fetchMe = async () => {\n    const result = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users/me`, {\n      // Make sure to include cookies with fetch\n      credentials: 'include',\n    })\n      .then((req) => req.json());\n    setUser(result.user || null);\n  };\n  fetchMe();\n}, []);"},"id":"6367e397b5382746f4cbc567","blockType":"code"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"Getting the correct user back from the API request is possible because of the http cookie included in the fetch request which Payload APIs are automatically built and ready to handle for us."}]},{"type":"h3","children":[{"text":"Login"}]},{"type":"p","children":[{"text":"Now that we have enjoyed lurking as a guest, let's go over login."}]},{"type":"p","children":[{"text":"From the screenshot we have a basic form that does the work of sending the entered credentials to the auth provider by calling the "},{"text":"login","code":true},{"text":" from "},{"text":"useAuth","code":true},{"text":"."}]}]},"id":"6367e3b9b5382746f4cbc568","blockType":"blogContent"},{"mediaBlockFields":{"position":"default","media":"6367e3db453641307821684c"},"id":"6367e3c2b5382746f4cbc569","blockType":"mediaBlock"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"The login form can be found in the "},{"text":"/pages/login/index.ts","code":true},{"text":" of "},{"text":"auth-next-frontend","code":true},{"text":" and handles basic error messages but is otherwise left as simple as possible."}]},{"type":"h3","children":[{"text":"Account management and access control"}]},{"type":"p","children":[{"text":"Assuming we were successful in entering the user credentials we should be at the "},{"text":"/account","code":true},{"text":" page. This form is used to send updates on the user collection of the logged in user. There isn't any API work to be done since Payload already takes care of that for us and can be done with GraphQL or REST as we've done here."}]},{"type":"p","children":[{"text":"Now we are able to make further calls to the API endpoints from our authenticated frontend. The API will read the user in a stateless way and execute the access control for the user needed for that request."}]}]},"id":"6367e3fcb5382746f4cbc56a","blockType":"blogContent"},{"mediaBlockFields":{"position":"default","media":"6367e4494536413078216861"},"id":"6367e435b5382746f4cbc56b","blockType":"mediaBlock"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"Checking into the backend code now, the user collection in "},{"text":"next-auth-cms","code":true},{"text":" has "},{"text":"access","code":true},{"text":" defined so that Bob or an Admin role are the only ones able to read or update the user."}]},{"type":"h3","children":[{"text":"Logout"}]},{"type":"p","children":[{"text":"The logout functionality is very similar to login except that we set the user in the frontend state to "},{"text":"null","code":true},{"text":" on completion. The backend API will no longer accept requests from the authentication cookie that was originally returned from logging in."}]},{"type":"h3","children":[{"text":"Create Account"}]},{"type":"p","children":[{"text":"Now that we are no longer authenticated as bob. We can create a new account. Here is the code that handles submitting the "},{"text":"create-account","code":true},{"text":" form."}]}]},"id":"6367e455b5382746f4cbc56c","blockType":"blogContent"},{"codeFields":{"language":"js","code":"const onSubmit = useCallback(async (data: FormData) => {\n  const response = await fetch(`${process.env.NEXT_PUBLIC_CMS_URL}/api/users`, {\n    method: 'POST',\n    body: JSON.stringify(data),\n    headers: {\n      'Content-Type': 'application/json',\n    },\n  })\n\n  if (response.ok) {\n    // Automatically log the user in\n    await login({\n      email: data.email,\n      password: data.password\n    });\n\n    // Set success message for user\n    setSuccess(true);\n\n    // Clear any existing errors\n    setError('')\n  } else {\n    setError('There was a problem creating your account. Please try again later.');\n  }\n}, []);"},"id":"6367e463b5382746f4cbc56d","blockType":"code"},{"blogContentFields":{"richText":[{"type":"p","children":[{"text":"At a high level, we are sending form data to the POST endpoint "},{"text":"/api/users","code":true},{"text":" followed by a login with the same credentials."}]},{"type":"p","children":[{"text":"This is possible because of our access control on users. You may have noticed that the access for "},{"text":"create","code":true},{"text":" is set to "},{"text":"return true","code":true},{"text":". That allows a guest user to create a new customer account. Had that not been set, Payload would use the default access control, which allows requests for any logged in user. That wouldn't work for anonymous users of course."}]},{"type":"p","children":[{"text":"You might be asking, "},{"text":"What is stopping a user from creating an account with the role of ","italic":true},{"text":"admin","code":true,"italic":true},{"text":"?","italic":true}]},{"type":"p","children":[{"text":"Within the "},{"text":"roles","code":true},{"text":" field you can see an additional "},{"text":"access","code":true},{"text":" included so that only an admin is able to assign this particular field."}]},{"type":"p","children":[{"text":"Another way you could handle this is by creating a separate collection for admins or customers outside of roles which would further separate security concerns, that is up to you."}]},{"type":"h3","children":[{"text":"Password recovery"}]},{"type":"p","children":[{"text":"The frontend also has pages built for users to recover a lost password. These forms are built to call the API routes built-in to Payload for the workflow needed to enter the email address, receive the email with a secure link, and complete the reset password."}]},{"type":"p","children":[{"text":"Payload makes these easily configurable along with account lockouts and other security features. You can read the "},{"type":"link","newTab":false,"url":"https://payloadcms.com/docs/authentication/config","children":[{"text":"Authentication"}]},{"text":" documentation for details."}]},{"type":"h3","children":[{"text":"Security"}]},{"type":"p","children":[{"text":"By separating our backend and frontend we also need to have Cross Origin Resource Sharing (CORS) properly configured. Without this, we would be prevented from making frontend calls to the API from a different web address. Payload has a simple configuration for both CORS and you can see it is already configured in the "},{"text":"payload.config.ts","code":true},{"text":" file in "},{"text":"next-auth-cms","code":true},{"text":" using environment variables defined in "},{"text":".env","code":true},{"text":". You don't need to configure CORS if your requests are made from the same domain."}]},{"type":"p","children":[{"text":"Using http-only cookies is a principal detail in how modern REST architecture works. It is an essential tool for building secure and scalable applications. Hopefully this guide helped you understand and implement it for your next big idea."}]},{"type":"h3","children":[{"text":"Wrapping up"}]},{"type":"p","children":[{"text":"That's it! We have fully locked down our app and given access to only the right people."}]},{"type":"p","children":[{"text":"The two template repos built for this blog post are meant to be starting points that anyone can build on or reference. To use them in production be sure to remove the "},{"text":"onInit","code":true},{"text":" seeding functions."}]},{"type":"p","children":[{"text":"Find us on twitter "},{"type":"link","newTab":false,"url":"https://twitter.com/payloadcms","children":[{"text":"@payloadcms"}]},{"text":" if you liked this article or join our growing "},{"type":"link","newTab":false,"url":"https://discord.com/invite/r6sCXqVk3v","children":[{"text":"Discord"}]},{"text":" community."}]}]},"id":"6367e478b5382746f4cbc56e","blockType":"blogContent"}],"slug":"nextjs-payload-cms-auth","author":"636e948eb554c827004b21ff","_status":"published","createdAt":"2022-11-06T16:41:01.790Z","updatedAt":"2022-11-15T13:40:16.304Z","meta":{"title":"Handling authentication in NextJS on Payload CMS | Blog | Payload CMS","description":"React user authentication guide in next.js with Payload CMS managed users","image":"63715fdfc155959a32eb3315"},"publishedOn":"2022-08-23T18:00:00.000Z"},"relationTo":"posts"},"label":"Learn about Auth"},"media":{"id":"646e7dfb34461489d764ccbb","alt":"User authentication","filename":"User page and cart.png","mimeType":"image/png","filesize":158380,"width":959,"height":781,"createdAt":"2023-05-24T21:13:31.854Z","updatedAt":"2023-05-30T16:46:28.834Z","url":"/media/User page and cart.png"}},"id":"646e7d8e48b747b566f89103","blockName":"User Auth","blockType":"mediaContent"},{"mediaContentFields":{"alignment":"contentMedia","container":true,"richText":[{"children":[{"text":"Stripe Integration"}],"type":"h3"},{"children":[{"text":"With Payload, you own both your APIs and your database. Write hooks to sync product meta automatically, and open your own endpoints to leverage Stripe webhooks. Goodbye platform spaghetti, hello simplicity."}]}],"link":{"type":"reference"},"media":{"id":"646e7f0034461489d764cd5c","alt":"Stripe sync","filename":"stripe sync.png","mimeType":"image/png","filesize":175637,"width":875,"height":828,"createdAt":"2023-05-24T21:17:52.568Z","updatedAt":"2023-05-24T21:17:52.568Z","url":"/media/stripe sync.png"}},"id":"646e7ed548b747b566f89104","blockName":"Stripe Integration","blockType":"mediaContent"},{"mediaContentFields":{"alignment":"mediaContent","richText":[{"children":[{"text":"Unify your content"}],"type":"h3"},{"children":[{"text":"Content should happen in one place. Marketing copy and product details live side-by-side, eliminating burdensome workflows and disparate systems, accelerating the content lifecycle."}]}],"link":{"type":"reference"},"media":{"id":"646e806e34461489d764cd8d","alt":"Unify Content","filename":"ecommerce-unifycontent.png","mimeType":"image/png","filesize":35411,"width":994,"height":671,"createdAt":"2023-05-24T21:23:58.089Z","updatedAt":"2023-05-31T21:33:29.894Z","url":"/media/ecommerce-unifycontent.png"}},"id":"646e7f8348b747b566f89105","blockName":"Unify your Content","blockType":"mediaContent"},{"caseStudyCardFields":{"cards":[{"richText":[{"children":[{"text":"Ecommerce Web App"}],"type":"label"},{"children":[{"text":"290 Sign Systems"}],"type":"h3"}],"caseStudy":{"id":"6362c4025b4dcb5b5c7f3aeb","updatedAt":"2022-11-14T00:51:59.639Z","createdAt":"2022-11-01T15:42:11.111Z","title":"My290","introContent":[{"children":[{"text":"Product configuration and ecommerce, all powered by Payload."}],"type":"h1"}],"featuredImage":{"id":"636da1023a28cc9d8e1198ff","alt":"My290 Case Study Featured Image","filename":"my290-case-study-featured-image.jpg","mimeType":"image/jpeg","filesize":163996,"width":1920,"height":1080,"createdAt":"2022-11-11T01:10:26.849Z","updatedAt":"2022-11-11T01:10:26.849Z","url":"/media/my290-case-study-featured-image.jpg"},"layout":[{"contentFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"2/90 Signs has built an extremely powerful realtime sign system designer, all powered by Payload."}],"type":"h3"}],"layout":"twoColumns","columnOne":[{"children":[{"text":"The CMS backend for 2/90 leverages Stripe to facilitate transactions for one-off products or fully custom sign orders, which are all editable and managed through the Payload CMS backend."}]}],"columnTwo":[{"children":[{"text":"This functionality provides 2/90 with the ability to send orders from the sign building software straight to production without missing a beat."}]}]},"id":"63618ad31011a841528d5421","blockName":"Intro","blockType":"content"},{"sliderFields":{"useLeadingHeader":true,"leadingHeader":[{"children":[{"text":"All sign specs are stored in Payload on a project- by-project basis, which allows for easy reorders, updates, and edits."}],"type":"h3"}],"sliderType":"imageSlider","imageSlides":[{"image":{"id":"636da3033a28cc9d8e11a552","alt":"My290 Sign Editing","filename":"my290-sign-edit.jpg","mimeType":"image/jpeg","filesize":222087,"width":1920,"height":1080,"createdAt":"2022-11-11T01:18:59.276Z","updatedAt":"2022-11-11T01:18:59.276Z","url":"/media/my290-sign-edit.jpg"},"id":"636da3acec21a24ff78243de"},{"image":{"id":"636da3903a28cc9d8e11a595","alt":"My290 Sign Editing Backer","filename":"my290-sign-edit-backer.jpg","mimeType":"image/jpeg","filesize":203759,"width":1920,"height":1080,"createdAt":"2022-11-11T01:21:20.286Z","updatedAt":"2022-11-11T01:21:20.286Z","url":"/media/my290-sign-edit-backer.jpg"},"id":"636da3ceec21a24ff78243df"},{"image":{"id":"636da48a3a28cc9d8e11ac54","alt":"My290 Sign Editing Identification Sign","filename":"my290-identification-sign.jpg","mimeType":"image/jpeg","filesize":116588,"width":1920,"height":1080,"createdAt":"2022-11-11T01:25:30.479Z","updatedAt":"2022-11-11T01:25:30.479Z","url":"/media/my290-identification-sign.jpg"},"id":"636da3d2ec21a24ff78243e0"}],"quoteSlides":[]},"id":"63613dd5246cb1b8ea11ba1b","blockName":"Image Slider","blockType":"slider"},{"contentFields":{"layout":"twoColumns","columnOne":[{"children":[{"text":"The customization options on the frontend are endless, and every detail needs to be one hundred percent accurate, which meant 2/90 needed to use a backend that was up to the task. "}]}],"columnTwo":[{"children":[{"text":"Design specs are highly configurable and inherit from a base system spec. 2/90 needed to design a highly intricate schema, and Payload supported everything needed."}]}]},"id":"636e8b8cf46b481ca469fa07","blockName":"Slider Content","blockType":"content"},{"mediaContentFields":{"alignment":"mediaContent","container":true,"richText":[{"children":[{"text":"Access Control"}],"type":"label"},{"type":"label","children":[{"text":""}]},{"children":[{"text":"Organization-based access control"}],"type":"h3"},{"children":[{"text":"Users are tied to Organizations which allows 2/90 to restrict what products they can order, whose orders they can see, which customers are eligible for paying via invoice, and much more."}]}],"link":{"type":"reference"},"media":{"id":"636e8c5bb554c827004b0183","alt":"My290 Access Control","filename":"my290-access-control-1.png","mimeType":"image/png","filesize":83524,"width":1247,"height":1077,"createdAt":"2022-11-11T17:54:35.853Z","updatedAt":"2022-11-11T17:59:17.563Z","url":"/media/my290-access-control-1.png"}},"id":"636e8bd5f46b481ca469fa08","blockName":"Access Control","blockType":"mediaContent"},{"linkGridFields":{"links":[{"link":{"type":"custom","url":"/docs/access-control/overview","label":"Learn about Payload’s Access Control"},"id":"636e8f04f46b481ca469fa0c"}]},"id":"636e8f01f46b481ca469fa0b","blockType":"linkGrid"},{"reusableContentBlockFields":{"reusableContent":{"id":"636da0413a28cc9d8e118fec","updatedAt":"2022-11-12T21:48:48.943Z","createdAt":"2022-11-10T18:53:43.244Z","title":"For Apps Form Block","layout":[{"formFields":{"container":true,"richText":[{"children":[{"text":"For Apps"}],"type":"label"},{"type":"h2","children":[{"text":"Let us "},{"text":"guarantee your success.","underline":true}]},{"children":[{"text":"Enterprises throughout the Fortune 500 leverage Payload for critical content infrastructure."}]},{"children":[{"text":"Let us design a plan and budget deliberately meant to solve your needs."}]}],"form":"636270638500b86c17b16b40"},"id":"636d4873dc9db42badb94487","blockType":"form"}]}},"id":"636e8c68f46b481ca469fa09","blockType":"reusableContentBlock"}],"slug":"my290","link":{"type":"custom","url":"https://hopenetwork.org/"},"_status":"published","meta":{"title":"My290 | Case Study | Web app powered by Payload","description":"Payload delivered 2/90 Signs an extremely extensible CMS backend to power a custom sign building web app.","image":{"id":"636da1023a28cc9d8e1198ff","alt":"My290 Case Study Featured Image","filename":"my290-case-study-featured-image.jpg","mimeType":"image/jpeg","filesize":163996,"width":1920,"height":1080,"createdAt":"2022-11-11T01:10:26.849Z","updatedAt":"2022-11-11T01:10:26.849Z","url":"/media/my290-case-study-featured-image.jpg"}},"url":"https://my.290signs.com/"},"id":"646e80c948b747b566f89107"}]},"id":"646e80aa48b747b566f89106","blockName":"290 Case Study","blockType":"caseStudyCards"},{"contentFields":{"layout":"twoThirdsOneThird","columnOne":[{"children":[{"text":"Community Help & Support"}],"type":"h2"}],"columnTwo":[{"children":[{"text":"A great development experience goes beyond writing code. To help you find what you need faster, browse our Community Help section, which indexes every question, answer, and comment across the Payload Discord and Github. Of course, you’re more than welcome to join those communities and create your own post as well. "}]}]},"id":"646e81ab48b747b566f89108","blockName":"Great development callout","blockType":"content"},{"linkGridFields":{"links":[{"link":{"type":"custom","url":"/community-help","label":"Community Help"},"id":"646e81d848b747b566f8910a"},{"link":{"type":"custom","url":"https://discord.gg/FSn5QRdsbC","label":"Discord Server"},"id":"646e821848b747b566f8910b"},{"link":{"type":"custom","url":"https://github.com/payloadcms/payload/discussions","label":"GitHub Discussions"},"id":"646e822c48b747b566f8910c"}]},"id":"646e81d548b747b566f89109","blockType":"linkGrid"}],"slug":"ecommerce","meta":{"title":"Use Payload to power your ecommerce business","description":"Avoid the chaos of multiple platforms. From the management of content and products to the building of new features, everything happens within Payload."},"parent":{"id":"6363e44b5b4dcb5b5c7f6098","title":"Use Cases","hero":{"type":"default","livestream":{"guests":[]},"richText":[{"children":[{"text":"A CMS for websites, native apps, & more."}],"type":"h1"}],"sidebarContent":[{"children":[{"text":""}]}],"links":[],"actions":[],"buttons":[],"adjectives":[]},"layout":[{"contentGridFields":{"forceDarkBackground":true,"cells":[{"content":[{"children":[{"text":"01"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636d40d899cdd1791a20ddc8","relationTo":"pages"},"children":[{"text":"Websites"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Payload powers content for websites both large and small in an extremely fast, manageable and scalable manner."}]}],"id":"6363e3c1f04070411015b35b"},{"content":[{"children":[{"text":"02"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","url":"","doc":{"value":"636e95deb554c827004b2a10","relationTo":"pages"},"children":[{"text":"Web apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"636889e3795126c43286acab"},{"content":[{"children":[{"text":"03"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":"Native apps"}]},{"text":""}],"type":"h4"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"636e9e15b554c827004b50f6","relationTo":"pages"},"children":[{"text":""}]},{"text":"Build complex web apps using Payload as your backend. Implement any type of business logic you need with Hooks."}]}],"id":"63689618795126c43286acac"},{"content":[{"children":[{"text":"04"}],"type":"label"},{"children":[{"text":""},{"type":"link","linkType":"internal","doc":{"value":"646e6d4134461489d764c929","relationTo":"pages"},"children":[{"text":"Ecommerce"}]},{"text":""}],"type":"h4"},{"children":[{"text":"If you need more customization than off-the-shelf ecommerce platforms can provide, Payload is for you."}]}],"id":"6368964e795126c43286acad"},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Subscription"}],"type":"h4"},{"children":[{"text":"Pair Payload with Stripe or a similar payments engine to create your own full subscriptions app."}]}],"id":"6368965f795126c43286acae"},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Omnichannel"}],"type":"h4"},{"children":[{"text":"Author content in one place, but use it anywhere. Truly decouple your content from your presentation."}]}],"id":"63689673795126c43286acaf"}]},"id":"6363e3c0f04070411015b35a","blockType":"contentGrid"}],"slug":"use-cases","_status":"published","createdAt":"2022-11-03T15:54:51.928Z","updatedAt":"2023-05-31T21:41:55.021Z","meta":{"title":"Payload Use Cases | A CMS for websites, native apps, & more.","description":"Payload CMS can be used to power just about anything. Be it a website, native app, or as an application framework for something else entirely.","image":null},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6477bf239b27bf3a5e5a2eba"}],"fullTitle":"Use Cases"},"breadcrumbs":[{"doc":"6363e44b5b4dcb5b5c7f6098","url":"/use-cases","label":"Use Cases","id":"6478d0ed9b27bf3a5e5a2ecb"},{"doc":"646e6d4134461489d764c929","url":"/use-cases/ecommerce","label":"Ecommerce","id":"6478d0ed9b27bf3a5e5a2ecc"}],"_status":"published","createdAt":"2023-05-24T20:02:09.319Z","updatedAt":"2023-06-01T17:10:05.800Z"},"relationTo":"pages"},"children":[{"text":"Ecommerce"}]},{"text":""}],"type":"h4"},{"children":[{"text":"If you need more customization than off-the-shelf ecommerce platforms can provide, Payload is for you."}]}]},{"content":[{"children":[{"text":"05"}],"type":"label"},{"children":[{"text":"Subscription"}],"type":"h4"},{"children":[{"text":"Pair Payload with Stripe or a similar payments engine to create your own full subscriptions app."}]}]},{"content":[{"children":[{"text":"06"}],"type":"label"},{"children":[{"text":"Omnichannel"}],"type":"h4"},{"children":[{"text":"Author content in one place, but use it anywhere. Truly decouple your content from your presentation."}]}]}]}}]}]]
2:[[["$","meta",null,{"charSet":"utf-8"}],["$","title",null,{"children":"Payload Use Cases | A CMS for websites, native apps, & more."}],["$","meta",null,{"name":"description","content":"Payload CMS can be used to power just about anything. Be it a website, native app, or as an application framework for something else entirely."}],null,null,null,null,null,null,null,null,["$","meta",null,{"name":"viewport","content":"width=device-width, initial-scale=1"}],null,null,null,null,null,null,null,null,null,null,[]],[null,null,null,null],null,null,[null,null,null,null,null],null,[null,["$","meta",null,{"property":"og:title","content":"Payload CMS"}],["$","meta",null,{"property":"og:description","content":"Payload is a headless CMS and application framework built with TypeScript, Node.js, React and MongoDB"}],["$","meta",null,{"property":"og:url","content":"https://payloadcms.com/use-cases"}],["$","meta",null,{"property":"og:site_name","content":"Payload CMS"}],null,null,null,[[["$","meta",null,{"property":"og:image","content":"https://payloadcms.com/images/og-image.jpg"}]]],null,null,null,null,null,null,["$","meta",null,{"property":"og:type","content":"website"}]],[["$","meta",null,{"name":"twitter:card","content":"summary_large_image"}],null,null,["$","meta",null,{"name":"twitter:creator","content":"@payloadcms"}],null,null,null,null,null,null],null,[null,[],[["$","link",null,{"rel":"apple-touch-icon","href":"/apple-icon.png?1be71cc371876318","type":"image/png","sizes":"180x180"}]],null]]