How to set up Payload with Supabase

Learn how to set up Payload with ‪@Supabase‬ to create a powerful backend for your Next.js app! 👇
If you're deploying Payload, you need a database. With Payload, you can choose MongoDB or Postgres. Supabase provides a Postgres database and multiple S3 storage buckets-along with a generous free plan (500 MB database, 1 GB storage).
⭐ Like what we're up to? Leave us a star ⭐
github.com/pay...
A primer on Payload ...
- The fastest growing CMS in our category.
- Next.js native, so it can seamlessly integrate it into your Next app. You can also one-click deploy on Vercel.
- Fully open-source, offering the flexibility of self-hosting or managed hosting.
- Fully TypeScript, eliminating the need to navigate through a UI - simply configure everything in code.
- Highly extensible, granting you full control over custom hooks, endpoints, and more. It's not just a CMS; you can extend it to become a comprehensive backend for any application you build.
- Use as a standalone app if you're working with other frameworks.
Get started in one line: npx create-payload-app@beta
----------------------------------------
S3 code snippet and environment variables from video:
s3Storage({
collections: {
media: {
prefix: 'media',
}
},
bucket: process.env.S3_BUCKET,
config: {
forcePathStyle: true,
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY_ID,
secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
},
region: process.env.S3_REGION,
endpoint: process.env.S3_ENDPOINT,
},
}),
S3_BUCKET=
S3_ACCESS_KEY_ID=
S3_SECRET_ACCESS_KEY=
S3_REGION=
S3_ENDPOINT=
Big thanks to our friends at 10xMedia.de, a Payload preferred agency, who created this video.

[@RobertParallax]

Thank you! It would be great if you could create a video demonstrating your workflow for managing and switching between production and development databases with Supabase. Additionally, it would be helpful to see how you can clone your production database to a development one, allowing for easy resets of the development environment when needed.

[@SiBtoday]

I just wanted to point out, that this tutorial was just perfectly recorded. Learned a lot, as someone who just got across Payload :) Keep up, that amazing work!

[@TomKendry]

I ran into a lot of trouble attempting to get through the storage portion of this guide as it seems that the methods have changed in the past 11 days since this video was posted. I had to install @payloadcms/plugin-cloud-storage and I followed the guide on the readme for setting up the plugin which is considerably different than the approach outlined here. I also had to be sure to include an "endpoint" field in my s3 adapter config. I was a little shocked to see that this guide and the written counterpart were posted under 2 weeks ago and seem to be completely outdated and confusing for new users.

[@Amitsarker]

Great tutorial! Thanks for sharing your expertise. Keep up the fantastic work!

[@minggux1694]

Awesome, very helpful for a quick project.

[@00titanium00]

Maybe it's possible to adapt fro selfhosted supabase because from docs seem that actually it can be and issue connecting to the supabase bucket ...

[@peterkyle_0125]

This is amazing,I have been looking for a way to do this then came this video.Thanks again for this 😃

[@osamaalnaggar]

Can we use supabase Authentication with Payload? We need users to sign in through Google and Payload currently doesn't offer that

[@payloadcms]

You can determine your own auth strategy (payloadcms.com/docs/authentication/config#strategies). Otherwise, Payload does offer an SSO plugin (available on enterprise plans) that is more robust and includes Google.

[@danielstill5625]

Agreed. It's nice that Payload does auth, but Supabase specialises in auth, so it would be so nice to use Supabase for auth.

[@chongjumai2905]

With the latest beta63. I am not able to create the first user. It always say invalid password with using the online Supabase. But if I changed the connection string to local dev, it works.

[@DarkLide92]

Is it recommended to use supabase cli to do the migrations? Or should we stick with payload doing migrations?

[@madusara.liyanage]

I have a mongodb connected to a payload app and whatever the images I upload to payload (under 'media' collection) gets broken after some time. Now I connected a supabase s3 bucket to the project, it gets uploaded to supabase (and mongodb both) and still the image file gets broken after a while giving a 500 error in the get request. But the image resides properly inside the bucket when checked from supabase side. Do you have any clue why? TIA

[@muperdev]

Another masterpiece I guess!

[@JohnVandivier]

brilliant

[@chrisarrow]

At 12:36 how do you go about disabling payload access control?

[@Nin_Cada]

Release the stable version already!!😐

[@SiBtoday]

Any ETA for this already? :)

[@coherentpanda7115]

They can't release until NextJS 19 is released, as they are reworking Payload to be better compatible with the latest version of React and new NextJS features. Since both React and NextJS are not ready with the latest stable releases, Payload won't be releasing until after.

[@user-hh4xs3gh8b]

is anyone having this issue with conflicting beta packages? Internal error: Error: Mismatching payload dependency versions found: @payloadcms/richtext-lexical@3.0.0-beta.77, @payloadcms/plugin-cloud-storage@3.0.0-beta.29. All payload and @payloadcms/* packages must have the same version. This is an error with your set-up, caused by you, not a bug in payload. Please go to your package.json and ensure all payload and @payloadcms/* packages have the same version. I did create a .npmrc file settings legacy-peer-deps=true but that didnt help unfortunately

[@georgekrax]

Could I use something like Payload + Supabase + Prisma?

[@developer-tq9kj]

what about convex database? can we use convex with payload?

[@developer-tq9kj]

what about convex? can we use convex with payload?

[@varmahacks3150]

Payload 3.0 cms deploy In vercel video Is it possible to deploy the payload in local setup server/ custom server

[@payloadcms]

You can deploy Payload anywhere Next.js can be deployed-which is pretty much anywhere. You can also run Payload anywhere you can run node, including on your local machine.

[@_Wild_Wanderlust_]

Thank you for this tutorial payload, I followed every step till I got to the storage-s3 part. After setting the legacy peer deps to true, I get the following error message. Wonder if you could help. Thank you very much in advance. Error: Mismatching payload dependency versions found: payload@3.0.0-beta.90, @payloadcms/plugin-cloud-storage@3.0.0-beta.29. All payload and @payloadcms/* packages must have the same version. This is an error with your set-up, caused by you, not a bug in payload. Please go to your package.json and ensure all payload and @payloadcms/* packages have the same version. Following are the dependencies: "dependencies": { "@payloadcms/db-postgres": "beta", "@payloadcms/next": "beta", "@payloadcms/plugin-cloud": "beta", "@payloadcms/richtext-lexical": "beta", "@payloadcms/storage-s3": "^3.0.0-beta.29", "cross-env": "^7.0.3", "graphql": "^16.8.1", "next": "15.0.0-canary.104", "payload": "beta", "react": "19.0.0-rc-06d0b89e-20240801", "react-dom": "19.0.0-rc-06d0b89e-20240801", "sharp": "0.32.6" },

[@thezeppo]

You need to install the storage version that matches the payload beta version, so in your case you have "payload@3.0.0-beta.90" so install storage-s3@3.0.0-beta.90 You'll probably have a high vulnerability, if you audit fix it'll change the version so don't do that. I found this out the hard way :) Obviously (hopefully?) when out of beta these won't be issues

[@Michael-Martell]

Can you do an integration with Xata.db?