Cloudflare Worker and Supabase learning start point.
Cloudflare my liked cloud service, I use it in many my project, for example:
- Cloudflare feature overview.
- Transfer domain to Cloudflare CDN and than to Cloudflare ZeroTrust VPN.
- How to protect your business from DDOS attack by Cloudflare WAF
And currently I decide to learning deeper Cloudflare Worker.
![](CloudflareWorker1_1.png)
![](CloudflareWorker2_1.png)
![](CloudflareWorker3_1.png)
![](CloudflareWorker4_1.png)
![](CloudflareWorker5_1.png)
![](CloudflareWorker6_1.png)
![](CloudflareWorker7_1.png)
![](CloudflareWorker8_1.png)
![](CloudflareWorker9_1.png)
![](CloudflareWorker10_1.png)
Also I'm admiring Supabase. Comparing Firebase vs Supabase,
![](SupabaseYoutube-1_1.png)
I found interesting courses about this workers.
![](Cloudflare-1_1.png)
- Introduction to Cloudflare WorkersKristian Freeman
- Build a Serverless API with Cloudflare WorkersKristian Freeman
- Cache Supabase data at the Edge with Cloudflare Workers and KV StorageJon Meyers
- Build Data-Driven Applications on the Edge with Workers and Workers KVKristian Freeman
So, this is my learning conspectus about Cloudflare and Supabase.
1. Introduction to Cloudflare Workers
1. Create a Cloudflare Workers Account
![](CloudflareWorkerWrangler1_1.png)
![](CloudflareWorkerWrangler2_1.png)
![](CloudflareWorkerWrangler3_1.png)
![](CloudflareWorkerWrangler4_1.png)
![](CloudflareWorkerWrangler5_1.png)
![](CloudflareWorkerWrangler6_1.png)
![](CloudflareWorkerWrangler7_1.png)
2. Install and Configure the Cloudflare Workers CLI Wrangler
![](CloudflareWorkerWrangler8_1.png)
![](CloudflareWorkerWrangler9_1.png)
![](CloudflareWorkerWrangler10_1.png)
![](CloudflareWorkerWrangler11_1.png)
![](CloudflareWorkerWrangler12_1.png)
![](CloudflareWorkerWrangler13_1.png)
![](CloudflareWorkerWrangler14_1.png)
Check login
![](CloudflareWorkerWrangler15_1.png)
![](CloudflareWorkerWrangler16_1.png)
3. Generate New Cloudflare Workers Projects with Wrangler's generate Command
![](CloudflareWorkerWrangler17_1.png)
Documentation and TS project template for Cloudflare Worker.
![](CloudflareWorkerWrangler18_1.png)
![](CloudflareWorkerWrangler19_1.png)
![](CloudflareWorkerWrangler20_1.png)
Wrangler.toml apears. This file contains all Cloudflare tuning.
![](CloudflareWorkerWrangler21_1.png)
![](CloudflareWorkerWrangler23_1.png)
4. Write Your First Cloudflare Workers Serverless Function, HandleRequest is Async function and need to return Promise.
![](CloudflareWorkerWrangler24_1.png)
![](CloudflareWorkerWrangler25_1.png)
Look to all opportunity of Response function, Request function is more interesting, it can be two types - simple fitch and schedule for timeout !
![](CloudflareWorkerWrangler28_1.png)
Wrangler Preview
![](CloudflareWorkerWrangler29_1.png)
![](CloudflareWorkerWrangler30_1.png)
5. Preview and Publish Your Cloudflare Workers Project
![](CloudflareWorkerWrangler31_1.png)
Grab data from Cloudflare site and insert it to TOML file.
![](CloudflareWorkerWrangler32_1.png)
![](CloudflareWorkerWrangler33_1.png)
Wrangler dev - start developer server and check result locally.
![](CloudflareWorkerWrangler34_1.png)
![](CloudflareWorkerWrangler35_1.png)
![](CloudflareWorkerWrangler36_1.png)
![](CloudflareWorkerWrangler37_1.png)
![](CloudflareWorkerWrangler38_1.png)
Wrangler publish - publish custom page to Cloudflare
![](CloudflareWorkerWrangler39_1.png)
![](CloudflareWorkerWrangler40_1.png)
![](CloudflareWorkerWrangler41_1.png)
6. Render HTML Pages with Cloudflare Workers
Create new function with HTML-template and export that function from Template.js
![](CloudflareWorkerWrangler42_1.png)
![](CloudflareWorkerWrangler43_1.png)
![](CloudflareWorkerWrangler44_1.png)
![](CloudflareWorkerWrangler45_1.png)
Import Template.js to Index.js
![](CloudflareWorkerWrangler46_1.png)
Export function Template.js as ServerWorker Response. Change response.content.type from Javascript to Webpack
![](CloudflareWorkerWrangler47_1.png)
![](CloudflareWorkerWrangler48_1.png)
Publish and check result.
![](CloudflareWorkerWrangler49_1.png)
![](CloudflareWorkerWrangler50_1.png)
Change Response.type and receive finally workable page on custom domain.
![](CloudflareWorkerWrangler51_1.png)
![](CloudflareWorkerWrangler52_1.png)
![](CloudflareWorkerWrangler53_1.png)
7. Render Cloudflare Region Data for a Request Using request.cf
Look to full documentation of ServiceWorker Request.
![](CloudflareWorkerWrangler54_1.png)
Request.CF contains all additional Cloudflare information, for example country.
![](CloudflareWorkerWrangler55_1.png)
Pass this function as parameters to Html Template function.
![](CloudflareWorkerWrangler56_1.png)
![](CloudflareWorkerWrangler57_1.png)
Install country code and import it to Template.js
![](CloudflareWorkerWrangler58_1.png)
![](CloudflareWorkerWrangler59_1.png)
Show Country code and flag
![](CloudflareWorkerWrangler60_1.png)
![](CloudflareWorkerWrangler61_1.png)
![](CloudflareWorkerWrangler62_1.png)
Add CSS style from Unpkg.com
![](CloudflareWorkerWrangler63_1.png)
![](CloudflareWorkerWrangler64_1.png)
Check full result with Image
![](CloudflareWorkerWrangler65_1.png)
![](CloudflareWorkerWrangler66_1.png)
8. Use Location Personalization Features in Cloudflare Workers
![](CloudflareWorkerWrangler67_1.png)
![](CloudflareWorkerWrangler68_1.png)
![](CloudflareWorkerWrangler69_1.png)
![](CloudflareWorkerWrangler70_1.png)
9. Deploy to a Custom Domain with Cloudflare Wrangler Environments
Add custom domatin to Cloudflare
![](CloudflareWorkerWrangler71_1.png)
![](CloudflareWorkerWrangler72_1.png)
Add DomainID (ZoneID) to Wrangler.TOML
![](CloudflareWorkerWrangler73_1.png)
![](CloudflareWorkerWrangler74_1.png)
Set concrete page from Domain on Wrangler.TOML
![](CloudflareWorkerWrangler75_1.png)
![](CloudflareWorkerWrangler76_1.png)
![](CloudflareWorkerWrangler77_1.png)
![](CloudflareWorkerWrangler78_1.png)
![](CloudflareWorkerWrangler79_1.png)
![](CloudflareWorkerWrangler80_1.png)
Manipulate DNS record on Cloudlare
![](CloudflareWorkerWrangler81_1.png)
![](CloudflareWorkerWrangler82_1.png)
![](CloudflareWorkerWrangler83_1.png)
Create production configuration
![](CloudflareWorkerWrangler84_1.png)
Wrangler publish with production environment variable
![](CloudflareWorkerWrangler85_1.png)
![](CloudflareWorkerWrangler86_1.png)
2. Build a Serverless API with Cloudflare Workers (CORS details)
![](CloudflareWorkerWranglerCors1_1.png)
2. Set up a New Cloudflare Workers Project with wrangler
Install Wrangler, Wrangler generate - create new project and Wrangler Login to create default.TOML to current Linux user
![](CloudflareWorkerWranglerCors2_1.png)
![](CloudflareWorkerWranglerCors3_1.png)
![](CloudflareWorkerWranglerCors4_1.png)
![](CloudflareWorkerWranglerCors5_1.png)
![](CloudflareWorkerWranglerCors6_1.png)
![](CloudflareWorkerWranglerCors7_1.png)
![](CloudflareWorkerWranglerCors8_1.png)
![](CloudflareWorkerWranglerCors9_1.png)
Wrangler Whoami - check defaul user context
![](CloudflareWorkerWranglerCors10_1.png)
![](CloudflareWorkerWranglerCors11_1.png)
Set Wrangler.TOML, Wrangler Publish to custom domain and check result.
![](CloudflareWorkerWranglerCors12_1.png)
![](CloudflareWorkerWranglerCors13_1.png)
![](CloudflareWorkerWranglerCors14_1.png)
3. Process Incoming Request Data Using the Request Class in Workers
Two type of request - Request.Fitch and Request.Schedule
![](CloudflareWorkerWranglerCors15_1.png)
HandleRequest is Async function and need to return Promise. We need to Await something in Async function, we will Await request and return Awaited result, exactly Promise.
![](CloudflareWorkerWranglerCors16_1.png)
Firstly we simple return to result input parameters, but Stringfy object to string.
![](CloudflareWorkerWranglerCors17_1.png)
Wrangler publish - we publish to custom domain and than Wrangler dev - to start server locally
![](CloudflareWorkerWranglerCors18_1.png)
We swith to another BASH and we can see result without Browser with CURL
![](CloudflareWorkerWranglerCors19_1.png)
We will use destructive assignment to unpackage Request.JSON to JS Object named Query.
![](CloudflareWorkerWranglerCors20_1.png)
Wrangler automatically tracking changing and redirect request to custom domain to local server.
![](CloudflareWorkerWranglerCors21_1.png)
In this case we can return Query as simple text
![](CloudflareWorkerWranglerCors22_1.png)
4. Make API Requests in a Workers Function Using the Fetch API
As example of secure JWT token and wirking with API we will use Unsplash.com
![](CloudflareWorkerWranglerCors23_1.png)
![](CloudflareWorkerWranglerCors24_1.png)
![](CloudflareWorkerWranglerCors25_1.png)
![](CloudflareWorkerWranglerCors26_1.png)
Set Unsplash.com ClientID to code and create Fetch to Api.Unsplash.com with ClientID from Unsplash.Com.
![](CloudflareWorkerWranglerCors27_1.png)
StringFy API result to string and return it as Json result for Cloudflare worker
![](CloudflareWorkerWranglerCors28_1.png)
Start Wrangler dev server on one BASH and look result with CURL on another BASH.
![](CloudflareWorkerWranglerCors29_1.png)
![](CloudflareWorkerWranglerCors30_1.png)
Awesome result, but unformated
![](CloudflareWorkerWranglerCors31_1.png)
Install JQ and look to formatted JSON-result.
![](CloudflareWorkerWranglerCors42_1.png)
![](CloudflareWorkerWranglerCors32_1.png)
![](CloudflareWorkerWranglerCors33_1.png)
Check API log on Unsplash.com
![](CloudflareWorkerWranglerCors34_1.png)
5. Use Workers Secrets to Securely Store API Credentials
![](CloudflareWorkerWranglerCors35_1.png)
![](CloudflareWorkerWranglerCors36_1.png)
![](CloudflareWorkerWranglerCors37_1.png)
![](CloudflareWorkerWranglerCors38_1.png)
![](CloudflareWorkerWranglerCors40_1.png)
6. Transform and Return JSON Data From an API in Cloudflare Workers
Create array Images with JS function MAP, based on API result.
![](CloudflareWorkerWranglerCors41_1.png)
![](CloudflareWorkerWranglerCors43_1.png)
7. Add CORS Headers to a Third Party API Response in a Workers API
Request from Custom domain blocked to Api.Unsplash.Com by Browser
![](CloudflareWorkerWranglerCors44_1.png)
More about CORS
![](CloudflareWorkerWranglerCors45_1.png)
![](CloudflareWorkerWranglerCors46_1.png)
![](CloudflareWorkerWranglerCors51_1.png)
OPTIONS request used to check CORS policy
![](CloudflareWorkerWranglerCors47_1.png)
![](CloudflareWorkerWranglerCors48_1.png)
We need return from OPTION Request three headers to allow browser require 3-rd party API.
- "Access-Control-Allow-Headers": "*"
- "Access-Control-Allow-Methods": "POST"
- "Access-Control-Allow-Origin": "*"
![](CloudflareWorkerWranglerCors49_1.png)
![](CloudflareWorkerWranglerCors50_1.png)
![](CloudflareWorkerWranglerCors52_1.png)
And finally we can see result on Browser
![](CloudflareWorkerWranglerCors53_1.png)
![](CloudflareWorkerWranglerCors54_1.png)
8. Render Data from a Workers API Response in a React Application
![](CloudflareWorkerWranglerCors55_1.png)
More ...
3. Cache Supabase data at the Edge with Cloudflare Workers and KV Storage
1. Create a Cloudflare Worker with the Wrangler CLI (see more on lecture 1-2)
![](CloudflareWorkerWranglerSupabaseKvStorage1_1.png)
2. Create a Supabase project (Supabase is Web interface for PostgreSQL)
![](CloudflareWorkerWranglerSupabaseKvStorage2_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage3_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage4_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage5_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage6_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage7_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage8_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage9_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage10_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage11_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage12_1.png)
3. Query Supabase from Cloudflare Worker
Install Supabase JS Library - npm i @supabase/supabase-js
![](CloudflareWorkerWranglerSupabaseKvStorage13_1.png)
Add supabase support to module Index.js (look to Interesting VS Code plugin - it show size of imported JS library)
![](CloudflareWorkerWranglerSupabaseKvStorage14_1.png)
Create SupabaseClient (URL and AnonKey is parameters), take its from Supabase panel
![](CloudflareWorkerWranglerSupabaseKvStorage15_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage16_1.png)
Npx wrangler secret put SUPABASE_URL - (create secret and upload secret to Cloudflare)
![](CloudflareWorkerWranglerSupabaseKvStorage17_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage18_1.png)
Repeate operation with Supabase Anon key - upload key to Cloadflare Secrets store.
![](CloudflareWorkerWranglerSupabaseKvStorage19_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage20_1.png)
npx wrangler dev - start local server with uploaded secrets to Cloadflare
![](CloudflareWorkerWranglerSupabaseKvStorage21_1.png)
Inject Cloudflare Secrets to Cloadflare Fitch eventhandler and pass secrets to Supabase client
![](CloudflareWorkerWranglerSupabaseKvStorage22_1.png)
Create first simplest query to Supabase data and unpack client response as destructive assignment to object Data.
![](CloudflareWorkerWranglerSupabaseKvStorage23_1.png)
StringFY Data as Json and reeturn it as JSON result on EventHandler
![](CloudflareWorkerWranglerSupabaseKvStorage24_1.png)
Look result on Browser, modify data on Supabase and check modification result
![](CloudflareWorkerWranglerSupabaseKvStorage25_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage26_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage27_1.png)
4. Proxy Supabase requests with Cloudflare Workers and Itty Router
Look request log of browser request to local development server
![](CloudflareWorkerWranglerSupabaseKvStorage28_1.png)
npm i itty-router itti-router-extras - (start building multipage application)
![](CloudflareWorkerWranglerSupabaseKvStorage29_1.png)
Import itti-router to index.js
![](CloudflareWorkerWranglerSupabaseKvStorage30_1.png)
Export Router event handler with fitch key from module Index.js
![](CloudflareWorkerWranglerSupabaseKvStorage31_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage32_1.png)
Take SupabaseID
![](CloudflareWorkerWranglerSupabaseKvStorage33_1.png)
Create router Entry point (Router looks as Express)
![](CloudflareWorkerWranglerSupabaseKvStorage34_1.png)
Create promise function with Request to cloudflare url entry point and return the same ID whar we receive
![](CloudflareWorkerWranglerSupabaseKvStorage35_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage36_1.png)
Request DataEntity on Supabase related to thad ID (use Supabase Client and two Cloudflare secrets)
![](CloudflareWorkerWranglerSupabaseKvStorage37_1.png)
Import Json from itti-router-extras and return result as Json
![](CloudflareWorkerWranglerSupabaseKvStorage38_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage39_1.png)
Add entry point to wrong request (without correct ID) and check 404 response code
![](CloudflareWorkerWranglerSupabaseKvStorage40_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage41_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage42_1.png)
5. Bind a KV store to Cloudflare Worker
npx wrangler kv:namespace create "Articles" - create KV-storage (look as Local storage) on Cloudflare KV
![](CloudflareWorkerWranglerSupabaseKvStorage43_1.png)
Add this storage to Wrangler.TOML
![](CloudflareWorkerWranglerSupabaseKvStorage44_1.png)
Locally KV storage need to create with "--preview"
![](CloudflareWorkerWranglerSupabaseKvStorage45_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage47_1.png)
"npx wrangler dev" - finally local server started with KV storage
![](CloudflareWorkerWranglerSupabaseKvStorage48_1.png)
6. Read and write KV Storage cache from Cloudflare Worker
Inject KV storage as Request parameter and create entry point to look KV storage
![](CloudflareWorkerWranglerSupabaseKvStorage49_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage50_1.png)
Put array with test data to KV storage and retrieve result on browser
![](CloudflareWorkerWranglerSupabaseKvStorage51_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage52_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage53_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage54_1.png)
So, we have workable Read-KV and and Write-KV methods
![](CloudflareWorkerWranglerSupabaseKvStorage55_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage56_1.png)
Create new module util/cache.js and create readFrom and WriteFrom, pass KV storage as parameter to that functions
![](CloudflareWorkerWranglerSupabaseKvStorage57_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage58_1.png)
Import that function on index.js and call its
![](CloudflareWorkerWranglerSupabaseKvStorage59_1.png)
![](CloudflareWorkerWranglerSupabaseKvStorage60_1.png)
Publish code to Cloudflare server
![](CloudflareWorkerWranglerSupabaseKvStorage61_1.png)
7. Cache Supabase response at the Edge with KV storage
8. Cache-busting with Cloudflare KV stores and Supabase
9. Revalidate stale data by ID
10. Automatically revalidate KV Store cache on change with Database Webhooks in Supabase
11. Use waitUntil to perform work after Cloudflare Worker returns response
4. Build a Realtime Chat App with Remix and Supabase, sourceCode - https://github.com/dijonmusters/chatter
1. Create Supabase Project with a table and example data
![](SupabaseVercelRemixChat31_1.png)
![](SupabaseVercelRemixChat32_1.png)
![](SupabaseVercelRemixChat33_1.png)
![](SupabaseVercelRemixChat34_1.png)
2. Setting Up a Remix Project
- Remix App Srver
- Express Server
- Architect (AWS Lambda)
- Fly.io
- Netlify
- Vercel
- Cloudflare pages
![](SupabaseVercelRemixChat35_1.png)
Typescript or Javascript
![](SupabaseVercelRemixChat36_1.png)
Code .
![](SupabaseVercelRemixChat37_1.png)
npm run dev - remix dev (start remix local sever)
![](SupabaseVercelRemixChat39_1.png)
Change default JS pages for Worker - TSX page for React
![](SupabaseVercelRemixChat38_1.png)
![](SupabaseVercelRemixChat40_1.png)
![](SupabaseVercelRemixChat41_1.png)
![](SupabaseVercelRemixChat42_1.png)
![](SupabaseVercelRemixChat43_1.png)
3. Query Supabase Data with Remix Loaders
npm i @supabase/supabase-js (install JS Supabase support)
![](SupabaseVercelRemixChat44_1.png)
![](SupabaseVercelRemixChat45_1.png)
Change .GitIgnore to avoid moving secret environment variables to Github
![](SupabaseVercelRemixChat46_1.png)
Create two environment variable on file .ENV
- SUPABASE_URL=
- SUPABASE_ANON_KEY=
And grab it from Supabase panel
![](SupabaseVercelRemixChat47_1.png)
![](SupabaseVercelRemixChat48_1.png)
![](SupabaseVercelRemixChat11_1.png)
Create new file utils/supabase.ts and export to JS Supabase client two secret environment variables with access to Supabase
![](SupabaseVercelRemixChat49_1.png)
![](SupabaseVercelRemixChat51_1.png)
Import to Index.tsx Supabase clent with access and create promise function Loader with first Query to Supabase - unpack result to Data object
![](SupabaseVercelRemixChat52_1.png)
Import function useLoaderData from @remix-run/react, this function really require data from Promise
![](SupabaseVercelRemixChat53_1.png)
Start Remix development server and try to export query result as StringFY result
![](SupabaseVercelRemixChat54_1.png)
![](SupabaseVercelRemixChat55_1.png)
Result on page is empty, however database has meaningful rows
![](SupabaseVercelRemixChat56_1.png)
![](SupabaseVercelRemixChat57_1.png)
We have no access to data, we need to create new access policy (from scratch) and set access policy for Select=true
![](SupabaseVercelRemixChat58_1.png)
![](SupabaseVercelRemixChat59_1.png)
![](SupabaseVercelRemixChat60_1.png)
![](SupabaseVercelRemixChat61_1.png)
This is equivalent PostgreSQL policy command
![](SupabaseVercelRemixChat62_1.png)
And check final result - access policy working, client with connection string working, data reading and reading result writing to Browser
![](SupabaseVercelRemixChat63_1.png)
![](SupabaseVercelRemixChat1_1.png)
4. Generate TypeScript Type Definitions with the Supabase CLI
Check QuesryBulder syntax and install supabase/tap/supabase
![](SupabaseVercelRemixChat2_1.png)
![](SupabaseVercelRemixChat3_1.png)
![](SupabaseVercelRemixChat4_1.png)
Login to supabase, generate access token on Supabase site and pass access token to local dvelopment server.
![](SupabaseVercelRemixChat5_1.png)
![](SupabaseVercelRemixChat6_1.png)
![](SupabaseVercelRemixChat7_1.png)
![](SupabaseVercelRemixChat8_1.png)
![](SupabaseVercelRemixChat9_1.png)
Grab supabase Project-ID and generate database schema db_types.ts from our Supabase DB with command - supabase gen types typescript --project-id xxxxxxxxxxxxxx flyb > db_types.ts
![](SupabaseVercelRemixChat10_1.png)
![](SupabaseVercelRemixChat12_1.png)
![](SupabaseVercelRemixChat13_1.png)
![](SupabaseVercelRemixChat14_1.png)
![](SupabaseVercelRemixChat15_1.png)
Import database schema to Supabase client JS module and now SupabaseClient return typed data
![](SupabaseVercelRemixChat16_1.png)
![](SupabaseVercelRemixChat17_1.png)
Pass type Database as output of module
![](SupabaseVercelRemixChat18_1.png)
![](SupabaseVercelRemixChat19_1.png)
But Supabase Client still working with untyped data.
![](SupabaseVercelRemixChat20_1.png)
![](SupabaseVercelRemixChat21_1.png)
To solve that we need to import function LoaderArgs from @remix-run/node and pass this function as type of parameters for Loader function
![](SupabaseVercelRemixChat22_1.png)
![](SupabaseVercelRemixChat23_1.png)
![](SupabaseVercelRemixChat24_1.png)
But result of Loading still Any
![](SupabaseVercelRemixChat25_1.png)
![](SupabaseVercelRemixChat26_1.png)
And finally we need to cast useLoadData with type of Loader
![](SupabaseVercelRemixChat27_1.png)
![](SupabaseVercelRemixChat28_1.png)
Unpack only table messages from all reading result from Supabase
![](SupabaseVercelRemixChat57_1.png)
![](SupabaseVercelRemixChat29_1.png)
![](SupabaseVercelRemixChat30_1.png)
5. Implement Authentication for Supabase with OAuth and Github
List of standard Supabase Oauth providers
![](SupabaseOauthProviders-1_1.png)
![](GithubProvidedAuthTo-1_1.png)
Goto Setting, Developer Setting and create new Oauth application with URL - Localhost:3000
![](SupabaseVercelRemixChat64_1.png)
![](SupabaseVercelRemixChat65_1.png)
![](SupabaseVercelRemixChat66_1.png)
![](SupabaseVercelRemixChat67_1.png)
![](SupabaseVercelRemixChat68_1.png)
![](SupabaseVercelRemixChat69_1.png)
For Ouath we need to set CallbackURL
![](SupabaseVercelRemixChat70_1.png)
Goto Supabase panel, select Github as authentication site, and grab Callback URL from supabase and set up it to Github.
![](SupabaseVercelRemixChat71_1.png)
![](SupabaseVercelRemixChat72_1.png)
![](SupabaseVercelRemixChat73_1.png)
![](SupabaseVercelRemixChat74_1.png)
![](SupabaseVercelRemixChat75_1.png)
Than register application on Github, Grub Gihub AplicationID and set up it on Supabase for Github Provider.
![](SupabaseVercelRemixChat76_1.png)
![](SupabaseVercelRemixChat78_1.png)
![](SupabaseVercelRemixChat79_1.png)
Generate new Client Secret on Github and grab ID of Client secret
![](SupabaseVercelRemixChat80_1.png)
![](SupabaseVercelRemixChat81_1.png)
Setup up ID of Github Client Secret to Supabase, additionally to Github ClientID
![](SupabaseVercelRemixChat82_1.png)
![](SupabaseVercelRemixChat84_1.png)
So, currently we have two way of Authentication for supabase - Email and with Github Oauth provider.
![](SupabaseVercelRemixChat85_1.png)
Create Login.TSX page, this page has only two button Login/Logout with event handler
![](SupabaseVercelRemixChat86_1.png)
![](SupabaseVercelRemixChat87_1.png)
Call on Login Async/Await function supabase.aith.signInWithOAuth with Provider=Github
![](SupabaseVercelRemixChat88_1.png)
![](SupabaseVercelRemixChat89_1.png)
![](SupabaseVercelRemixChat90_1.png)
Also create callback for supabase.aith.SignOut
![](SupabaseVercelRemixChat91_1.png)
Add login component to Index.tsx page
![](SupabaseVercelRemixChat92_1.png)
![](SupabaseVercelRemixChat93_1.png)
![](SupabaseVercelRemixChat94_1.png)
Check login as Login component appears on Index page and Look to trouble - supabase process is absent (process.env.supabase on CreateClient module)
![](SupabaseVercelRemixChat95_1.png)
![](SupabaseVercelRemixChat96_1.png)
Thes mean we can not connected to supabase and we need to update supabase secrets
![](SupabaseVercelRemixChat97_1.png)
![](SupabaseVercelRemixChat98_1.png)
Import functions from Remix-run/React and use it as component on React page
![](SupabaseVercelRemixChat99_1.png)
![](SupabaseVercelRemixChat100_1.png)
![](SupabaseVercelRemixChat102_1.png)
Rebuild Loader, currently it will contains only environment variable for accessing to Supabase
![](SupabaseVercelRemixChat103_1.png)
Pass supabase client as router context
![](SupabaseVercelRemixChat104_1.png)
![](SupabaseVercelRemixChat105_1.png)
![](SupabaseVercelRemixChat106_1.png)
![](SupabaseVercelRemixChat107_1.png)
Import db_types and make Supabase client typed on root.tsx.
![](SupabaseVercelRemixChat108_1.png)
![](SupabaseVercelRemixChat109_1.png)
![](SupabaseVercelRemixChat110_1.png)
![](SupabaseVercelRemixChat111_1.png)
![](SupabaseVercelRemixChat112_1.png)
![](SupabaseVercelRemixChat113_1.png)
![](SupabaseVercelRemixChat114_1.png)
Than make Supabase client typed on Login page
![](SupabaseVercelRemixChat115_1.png)
![](SupabaseVercelRemixChat116_1.png)
And finally check how OAuth working
![](SupabaseVercelRemixChat117_1.png)
![](SupabaseVercelRemixChat119_1.png)
![](SupabaseVercelRemixChat120_1.png)
Working fine and we can see access token on LocalStorage and Login log on Supabse
![](SupabaseVercelRemixChat121_1.png)
![](SupabaseVercelRemixChat122_1.png)
![](SupabaseVercelRemixChat123_1.png)
7. Make Cookies the User Session Single Source of Truth with Supabase Auth Helpers
8. Keep Data in Sync with Mutations Using Active Remix Loader Functions
9. Securely Mutate Supabase Data with Remix Actions
Create rules on supabase - only the same identicated users can insert row and only signed user can read Message rows
![](SupabaseVercelRemixChat124_1.png)
![](SupabaseVercelRemixChat125_1.png)
![](SupabaseVercelRemixChat126_1.png)
![](SupabaseVercelRemixChat127_1.png)
![](SupabaseVercelRemixChat128_1.png)
![](SupabaseVercelRemixChat129_1.png)
![](SupabaseVercelRemixChat130_1.png)
![](SupabaseVercelRemixChat131_1.png)
![](SupabaseVercelRemixChat132_1.png)
10. Subscribe to Database Changes with Supabase Realtime
11. Deploy a Remix Application to Vercel from a GitHub Repository https://github.com/dijonmusters/chatter
commit code to Github
![](SupabaseVercelRemixChat133_1.png)
![](SupabaseVercelRemixChat134_1.png)
![](SupabaseVercelRemixChat135_1.png)
![](SupabaseVercelRemixChat136_1.png)
![](SupabaseVercelRemixChat137_1.png)
![](SupabaseVercelRemixChat138_1.png)
![](SupabaseVercelRemixChat139_1.png)
![](SupabaseVercelRemixChat140_1.png)
Publishing to Vercel
![](SupabaseVercelRemixChat141_1.png)
![](SupabaseVercelRemixChat142_1.png)
![](SupabaseVercelRemixChat143_1.png)
![](SupabaseVercelRemixChat144_1.png)
![](SupabaseVercelRemixChat145_1.png)
And check how application working
![](SupabaseVercelRemixChat146_1.png)
![](SupabaseVercelRemixChat147_1.png)
![](SupabaseVercelRemixChat148_1.png)
![](SupabaseVercelRemixChat149_1.png)
![](SupabaseVercelRemixChat150_1.png)
![](SupabaseVercelRemixChat151_1.png)
Related page:
- (2024) Google Cloud and Cloudflare
- (2023) CloudflareWorker and Supabase
- (2022) JS, Css
- (2022) Typescript, Webpack
- (2022) Angular, RxJs, Firebase, MongoDb
- (2022) Node, NestJs, Electron, Pwa, Telegram
- (2022) React, Redux, GraphQL, NextJs
- (2022) Angular/Typescript, JS books
![](http://forum.vb-net.com/GetTopicCount.png?id=a3fe6ab7-2d8d-4ff0-ab62-60c0c345ce7a)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |