"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[1263],{202:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-click-connection-4ffb966fcfca42cc672fd35bf6525681.png"},909:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-11-913db2da63007211703c70758e50878c.png"},964:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-10-184ee756685185a83392294ebf36f599.png"},1879:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-8-72474cf012a5e7787b34843376d000a3.png"},4290:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-5-0081c031a4fdd01df80a662564753950.png"},4405:(e,t,a)=>{a.d(t,{A:()=>o});a(6540);var s=a(9136),n=a(4848);function i(e){let{children:t,fallback:a}=e;return(0,s.A)()?(0,n.jsx)(n.Fragment,{children:t?.()}):a??null}function o(e){let{children:t}=e;return(0,n.jsx)(i,{children:()=>{const e=function(){return"undefined"==typeof window?"":window.location.hostname}();if("function"==typeof t){const a=t(e);return(0,n.jsx)("div",{className:"markdown markdown--section",children:a})}return(0,n.jsx)("code",{children:e})}})}},4663:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>l,frontMatter:()=>r,metadata:()=>s,toc:()=>p});const s=JSON.parse('{"id":"integration-supabase","title":"Supabase Integration","description":"Integrate a full-featured backend into your  application with Supabase.","source":"@site/Integration/005.integration-supabase.md","sourceDirName":".","slug":"/integration-supabase","permalink":"/guides/integration/integration-supabase","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5},"sidebar":"sidebar","previous":{"title":"p5.js Integration","permalink":"/guides/integration/integration-p5js"},"next":{"title":"Stripe Integration","permalink":"/guides/integration/integration-stripe"}}');var n=a(4848),i=a(8453),o=(a(4405),a(5600),a(8175));const r={sidebar_position:5},c="Supabase Integration",d={},p=[{value:"Connecting Supabase to EZsite",id:"connecting-supabase-to-ezsite",level:2},{value:"1. Create a Supabase account",id:"1-create-a-supabase-account",level:3},{value:"2. Create a new project in Supabase",id:"2-create-a-new-project-in-supabase",level:3},{value:"3. Connect Supabase to EZsite",id:"3-connect-supabase-to-ezsite",level:3},{value:"3.1. Open EZsite database configuration",id:"31-open-ezsite-database-configuration",level:4},{value:"3.2. Copy your Supabase project id to EZsite",id:"32-copy-your-supabase-project-id-to-ezsite",level:4},{value:"3.3. Copy your Supabase project API key to EZsite",id:"33-copy-your-supabase-project-api-key-to-ezsite",level:4},{value:"3.4. Copy your Supabase database host to EZsite",id:"34-copy-your-supabase-database-host-to-ezsite",level:4},{value:"3.5. Fill in your Supabase database password in EZsite",id:"35-fill-in-your-supabase-database-password-in-ezsite",level:4},{value:"3.6. Fill in your Supabase storage bucket name in EZsite",id:"36-fill-in-your-supabase-storage-bucket-name-in-ezsite",level:4},{value:"3.7. Save your configuration in EZsite",id:"37-save-your-configuration-in-ezsite",level:4},{value:"4. Authentication URL Configuration in Supabase",id:"4-authentication-url-configuration-in-supabase",level:3},{value:"4.1. Click the "Deploy" button in the upper right corner of EZsite",id:"41-click-the-deploy-button-in-the-upper-right-corner-of-ezsite",level:4},{value:"4.2. Copy the project address in EZsite",id:"42-copy-the-project-address-in-ezsite",level:4},{value:"4.3. Paste the EZsite project address in Supabase and save",id:"43-paste-the-ezsite-project-address-in-supabase-and-save",level:4},{value:"5. Set storage to public access so that EZsite can read data.",id:"5-set-storage-to-public-access-so-that-ezsite-can-read-data",level:3},{value:"5.1. Open Supabase's SQL Editor page.",id:"51-open-supabases-sql-editor-page",level:4},{value:"5.2. Enter the command \u201cALTER TABLE storage.objects DISABLE ROW LEVEL SECURITY;\u201d.",id:"52-enter-the-command-alter-table-storageobjects-disable-row-level-security",level:4},{value:"5.3. Click the \u201cRun\u201d button to execute the command.",id:"53-click-the-run-button-to-execute-the-command",level:4},{value:"Congratulations, you have completed the integration of EZsite and Supabase.",id:"congratulations-you-have-completed-the-integration-of-ezsite-and-supabase",level:3}];function u(e){const t={a:"a",br:"br",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",img:"img",p:"p",strong:"strong",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.header,{children:(0,n.jsx)(t.h1,{id:"supabase-integration",children:"Supabase Integration"})}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsxs)(t.strong,{children:["Integrate a full-featured backend into your ",(0,n.jsx)(o.A,{})," application with Supabase."]})}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(o.A,{}),"\u2019s native Supabase integration lets you manage both your front-end UI and your back-end database through a single, easy-to-use chat interface. In other words, you can design your app\u2019s screens and set up a cloud PostgreSQL database without leaving ",(0,n.jsx)(o.A,{}),". This unified approach makes powerful app development accessible to everyone \u2013 non\u2011technical users can rely on ",(0,n.jsx)(o.A,{}),"\u2019s guidance, while experienced developers can tap into advanced Supabase features as needed."]}),"\n",(0,n.jsx)(t.h2,{id:"connecting-supabase-to-ezsite",children:"Connecting Supabase to EZsite"}),"\n",(0,n.jsx)(t.h3,{id:"1-create-a-supabase-account",children:"1. Create a Supabase account"}),"\n",(0,n.jsxs)(t.p,{children:["Register a new Supabase account ",(0,n.jsx)(t.a,{href:"https://app.supabase.com/sign-up",children:"here"})," or ",(0,n.jsx)(t.a,{href:"https://app.supabase.com/sign-in",children:"sign in"})," if you already have one."]}),"\n",(0,n.jsx)(t.h3,{id:"2-create-a-new-project-in-supabase",children:"2. Create a new project in Supabase"}),"\n",(0,n.jsx)(t.p,{children:"Click on + New Project, complete the necessary fields, and allow a few minutes for setup."}),"\n",(0,n.jsx)(t.h3,{id:"3-connect-supabase-to-ezsite",children:"3. Connect Supabase to EZsite"}),"\n",(0,n.jsx)(t.h4,{id:"31-open-ezsite-database-configuration",children:"3.1. Open EZsite database configuration"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(9115).A+"",width:"1378",height:"953"})}),"\n",(0,n.jsx)(t.h4,{id:"32-copy-your-supabase-project-id-to-ezsite",children:"3.2. Copy your Supabase project id to EZsite"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(5174).A+"",width:"1378",height:"953"})}),"\n",(0,n.jsx)(t.h4,{id:"33-copy-your-supabase-project-api-key-to-ezsite",children:"3.3. Copy your Supabase project API key to EZsite"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(9149).A+"",width:"1378",height:"953"})}),"\n",(0,n.jsx)(t.h4,{id:"34-copy-your-supabase-database-host-to-ezsite",children:"3.4. Copy your Supabase database host to EZsite"}),"\n",(0,n.jsxs)(t.p,{children:["Click ",(0,n.jsx)(t.strong,{children:"Connection"})," in the top sidebar."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{alt:"click supabase connection",src:a(202).A+"",width:"1440",height:"685"})}),"\n",(0,n.jsxs)(t.p,{children:["What we need is the host of the Supabase database starting with aws, which can be found in Connection String - Transaction Pool.\n",(0,n.jsx)(t.img,{src:a(5252).A+"",width:"1378",height:"953"})]}),"\n",(0,n.jsx)(t.h4,{id:"35-fill-in-your-supabase-database-password-in-ezsite",children:"3.5. Fill in your Supabase database password in EZsite"}),"\n",(0,n.jsx)(t.p,{children:"If you forget your password, you can reset it in Supabase"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(5257).A+"",width:"1378",height:"953"})}),"\n",(0,n.jsx)(t.h4,{id:"36-fill-in-your-supabase-storage-bucket-name-in-ezsite",children:"3.6. Fill in your Supabase storage bucket name in EZsite"}),"\n",(0,n.jsx)(t.p,{children:"3.6.1 Open Supabase's Storage settings page."}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.img,{src:a(964).A+"",width:"1394",height:"953"}),"\n3.6.2 Create storage bucket. Enter the storage bucket name (recommended: easysite), and turn on the public bucket switch."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.img,{src:a(909).A+"",width:"1394",height:"953"}),"\n3.6.3 Copy the bucket name to ",(0,n.jsx)(o.A,{}),"."]}),"\n",(0,n.jsx)(t.h4,{id:"37-save-your-configuration-in-ezsite",children:"3.7. Save your configuration in EZsite"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(4290).A+"",width:"1394",height:"953"})}),"\n",(0,n.jsx)(t.h3,{id:"4-authentication-url-configuration-in-supabase",children:"4. Authentication URL Configuration in Supabase"}),"\n",(0,n.jsx)(t.h4,{id:"41-click-the-deploy-button-in-the-upper-right-corner-of-ezsite",children:'4.1. Click the "Deploy" button in the upper right corner of EZsite'}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(7136).A+"",width:"1394",height:"953"})}),"\n",(0,n.jsx)(t.h4,{id:"42-copy-the-project-address-in-ezsite",children:"4.2. Copy the project address in EZsite"}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(1879).A+"",width:"1394",height:"953"})}),"\n",(0,n.jsx)(t.h4,{id:"43-paste-the-ezsite-project-address-in-supabase-and-save",children:"4.3. Paste the EZsite project address in Supabase and save"}),"\n",(0,n.jsxs)(t.p,{children:["4.3.1. Open Supabase authentication configuration page.",(0,n.jsx)(t.br,{}),"\n","4.3.2. In Site url, paste the ",(0,n.jsx)(o.A,{})," project address.",(0,n.jsx)(t.br,{}),"\n",'4.3.3. Click the "save changes" button to save your changes.']}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(9390).A+"",width:"1394",height:"953"})}),"\n",(0,n.jsx)(t.h3,{id:"5-set-storage-to-public-access-so-that-ezsite-can-read-data",children:"5. Set storage to public access so that EZsite can read data."}),"\n",(0,n.jsx)(t.h4,{id:"51-open-supabases-sql-editor-page",children:"5.1. Open Supabase's SQL Editor page."}),"\n",(0,n.jsx)(t.h4,{id:"52-enter-the-command-alter-table-storageobjects-disable-row-level-security",children:"5.2. Enter the command \u201cALTER TABLE storage.objects DISABLE ROW LEVEL SECURITY;\u201d."}),"\n",(0,n.jsx)(t.h4,{id:"53-click-the-run-button-to-execute-the-command",children:"5.3. Click the \u201cRun\u201d button to execute the command."}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:a(9286).A+"",width:"1396",height:"942"})}),"\n",(0,n.jsx)(t.h3,{id:"congratulations-you-have-completed-the-integration-of-ezsite-and-supabase",children:"Congratulations, you have completed the integration of EZsite and Supabase."})]})}function l(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},5174:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-1-d3512bbdbdc3c5c8c188a6abf651a02b.png"},5252:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-3-8a6a8de2a7615908c1ad28319c14075c.png"},5257:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-6-799bef9453eb260d7f4d0a1b0b1362e7.png"},5600:(e,t,a)=>{a(6540),a(4848)},7136:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-7-2fc233f09f517f096a45271dcd776d88.png"},8175:(e,t,a)=>{a.d(t,{A:()=>n});a(6540);var s=a(4848);function n(){return(0,s.jsx)("code",{children:"EZsite"})}},8453:(e,t,a)=>{a.d(t,{R:()=>o,x:()=>r});var s=a(6540);const n={},i=s.createContext(n);function o(e){const t=s.useContext(i);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:o(e.components),s.createElement(i.Provider,{value:t},e.children)}},9115:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-4-6dcd0ba9304b35bab7ab3f850b8deddc.png"},9149:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-2-315f7c4118c807576d1f9da16333e053.png"},9286:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-12-cfb36c3306f9ba43f174fb6023b4859e.png"},9390:(e,t,a)=>{a.d(t,{A:()=>s});const s=a.p+"assets/images/supabase-integration-9-c3a229b2f2493ddbd59ba37764fb64b4.png"}}]);