diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts index 47c2bee3335..5bfb8aa40df 100644 --- a/apps/docs/components/Navigation/Navigation.constants.ts +++ b/apps/docs/components/Navigation/Navigation.constants.ts @@ -226,8 +226,9 @@ export const menuItems: NavMenu = { label: 'Edge Functions', items: [ { name: 'Overview', url: '/guides/functions', items: [] }, + { name: 'Quickstart', url: '/guides/functions/quickstart', items: [] }, { name: 'Auth', url: '/guides/functions/auth', items: [] }, - { name: 'Examples', url: '/guides/functions/examples', items: [] }, + { name: 'Best Practices', url: '/guides/functions/best-practices', items: [] }, { name: 'CI/CD Workflow', url: '/guides/functions/cicd-workflow', items: [] }, ], }, @@ -313,6 +314,7 @@ export const menuItems: NavMenu = { { name: 'Sequin', url: '/guides/integrations/sequin', items: [] }, { name: 'Snaplet', url: '/guides/integrations/snaplet', items: [] }, { name: 'Vercel', url: '/guides/integrations/vercel', items: [] }, + { name: 'Zuplo', url: '/guides/integrations/zuplo', items: [] }, ], }, { diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs index 151a73426e6..6e476e18228 100644 --- a/apps/docs/next.config.mjs +++ b/apps/docs/next.config.mjs @@ -28,7 +28,7 @@ const nextConfig = { async headers() { return [ { - source: '/(.*)', + source: '/:path*', headers: [ { key: 'Strict-Transport-Security', diff --git a/apps/docs/pages/guides/auth.mdx b/apps/docs/pages/guides/auth.mdx index 71986837e96..2d9ae24727d 100644 --- a/apps/docs/pages/guides/auth.mdx +++ b/apps/docs/pages/guides/auth.mdx @@ -71,7 +71,7 @@ For deployments with Netlify, set the `SITE_URL` to your official site URL. Add For deployments with Vercel, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews: - `http://localhost:3000/**` -- `https://**.vercel.app/**` +- `https://*-username.vercel.app/**` Vercel provides an environment variable for the URL of the deployment called `NEXT_PUBLIC_VERCEL_URL`. See the [Vercel docs](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) for more details. You can use this variable to dynamically redirect depending on the environment: diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx index dc9d680ec67..9822760ab50 100644 --- a/apps/docs/pages/guides/functions.mdx +++ b/apps/docs/pages/guides/functions.mdx @@ -1,280 +1,31 @@ import Layout from '~/layouts/DefaultGuideLayout' +import {Button} from 'ui' export const meta = { id: 'functions', title: 'Edge Functions', description: 'Globally distributed TypeScript functions.', sidebar_label: 'Overview', + hide_table_of_contents: true, } -Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks). - -Edge Functions are developed using [Deno](https://deno.com), which offers a few benefits to you as a developer: +Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks). Edge Functions are developed using [Deno](https://deno.com), which offers a few benefits to you as a developer: - It is open source. - It is portable. Supabase Edge Functions run locally, and on any other Deno-compatible platform (including self-hosted infrastructure). - It is TypeScript first and supports WASM. - Edge Functions are globally distributed for low-latency. -## Quickstart + -Learn how to develop Edge Functions in less than 7 minutes: +## Examples -
- +Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository. + +
+
-## Prerequisites - -Follow the steps to prepare your Supabase project on your local machine. - -- Install the Supabase CLI. [Docs](/docs/guides/cli). -- Login to the CLI using the command: `supabase login`. [Docs](/docs/reference/cli/usage#supabase-login). -- Initialize Supabase inside your project using the command: `supabase init`. [Docs](/docs/guides/cli/local-development#getting-started). -- Link to your Remote Project using the command `supabase link --project-ref your-project-ref`. [Docs](/docs/reference/cli/usage#supabase-link). -- Optional: Setup your environment: Follow [this setup guide](https://deno.land/manual/getting_started/setup_your_environment) to integrate the Deno language server with your editor. - -## Getting Started - -Let's build an Edge Function locally, then deploy it to the Supabase Platform. - -### Creating a function - -Let's create a new Edge Function called `hello-world` inside your project: - -```bash -supabase functions new hello-world -``` - -This creates a function stub in your `supabase` folder at `./functions/hello-world/index.ts`. - -### Deploy to production - -```bash -supabase functions deploy hello-world -``` - -This command bundles your Edge Function from `./functions/hello-world/index.ts` and deploys it to the Supabase platform. -The command outputs a URL to the Supabase Dashboard which you can open to find view more details. Let's open the link to find the execution command. - - - -By default, Edge Functions require a valid JWT in the authorization header. This header is automatically set when invoking your function via a Supabase client library. - -If you want to use Edge Functions to handle webhooks (e.g. [Stripe payment webhooks](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks) etc.), you need to pass the `--no-verify-jwt` flag when deploying your function. - - - -### Executing Remote Functions - -You can execute Edge Functions using curl. Copy the curl command from the Dashboard. It should look like this: - -```bash -curl --request POST 'https://.functions.supabase.co/hello-world' \ - --header 'Authorization: Bearer ANON_KEY' \ - --header 'Content-Type: application/json' \ - --data '{ "name":"Functions" }' -``` - -If you receive an error `Invalid JWT`, find the `ANON_KEY` of your project in the Dashboard under `Settings > API`. - -After invoking your Edge Function you should see the response `{ "message":"Hello Functions!" }`. - -## Debugging your Functions - -You can debug your deployed Edge Functions using the "Functions" section of the Dashboard. There are two types debugging tools available: - -- Invocations: shows the Request and Response for each execution. -- Logs: shows any platform events, including deployments and errors. - -![Function invocations.](/docs/img/guides/functions/function-logs.png) - -## Developing locally - -You can run your Edge Function locally using [`supabase functions serve`](/docs/reference/cli/usage#supabase-functions-serve): - -```bash -supabase start # start the supabase stack -supabase functions serve hello-world # start the Function watcher -``` - -The `functions serve` command has hot-reloading capabilities. It will watch for any changes to your files and restart the Deno server. - -### Invoking Functions locally - -While serving your local Function, you can execute it using curl: - -```bash -curl --request POST 'http://localhost:54321/functions/v1/hello-world' \ - --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs' \ - --header 'Content-Type: application/json' \ - --data '{ "name":"Functions" }' -``` - -You should see the response `{ "message":"Hello Functions!" }`. - -
-Implementation details - -- All Edge Functions are `POST` requests. -- The `Authorization` header is required. You can use either the `ANON` key, the `SERVICE_ROLE` key, or a logged-in user's JWT. -- The Function is proxied through the local API (`http://localhost:54321`) - -
-
- -If you execute Function with a different payload the response will change.
-Modify the `--data '{"name":"Functions"}'` line to `--data '{"name":"World"}'` and try invoking the command again! - -## Secrets and Environment Variables - -It's common that you will need to use sensitive information or environment-specific variables inside your Edge Functions. You can access these using Deno's built-in handler - -```js -Deno.env.get(MY_SECRET_NAME) -``` - -### Default secrets - -By default, Edge Functions have access to these secrets: - -- `SUPABASE_URL`: The API gateway for your Supabase project. -- `SUPABASE_ANON_KEY`: The `anon` key for your Supabase API. This is safe to use in a browser when you have [Row Level Security](/docs/guides/auth/row-level-security) enabled. -- `SUPABASE_SERVICE_ROLE_KEY`: The `service_role` key for your Supabase API. This is safe to use in Edge Functions, but it should NEVER be used in a browser. This key will bypass [Row Level Security](/docs/guides/auth/row-level-security). -- `SUPABASE_DB_URL`: The URL for your [PostgreSQL database](/docs/guides/database). You can use this to connect directly to your database. - -### Local secrets - -Let's create a local file for storing our secrets, and inside it we can store a secret `MY_NAME`: - -```jsx -echo "MY_NAME=Yoda" >> ./supabase/.env.local -``` - -This creates a new file `./supabase/.env.local` for storing your local development secrets. - - - -Never check your .env files into Git! - - - -Now let's access this environment variable `MY_NAME` inside our Function. Anywhere in your function, add this line: - -```jsx -console.log(Deno.env.get('MY_NAME')) -``` - -Now we can invoke our function locally, by serving it with our new `.env.local` file: - -```bash -supabase functions serve hello-world --env-file ./supabase/.env.local -``` - -When the function starts you should see the name “Yoda” output to the terminal. - -### Production secrets - -Let's create a `.env` for production. In this case we'll just use the same as our local secrets: - -```bash -cp ./supabase/.env.local ./supabase/.env -``` - -This creates a new file `./supabase/.env` for storing your production secrets. - - - -Never check your `.env` files into Git! - - - -Let's push all the secrets from the `.env` file to our remote project using [`supabase secrets set`](/docs/reference/cli/usage#supabase-secrets-set): - -```bash -supabase secrets set --env-file ./supabase/.env - -# You can also set secrets individually using: -supabase secrets set MY_NAME=Chewbacca -``` - -You don't need to re-deploy after setting your secrets. - -To see all the secrets which you have set remotely, use [`supabase secrets list`](/docs/reference/cli/usage#supabase-secrets-list): - -```bash -supabase secrets list -``` - -## Suggestions - -### Database Functions vs Edge Functions - -For data-intensive operations we recommend using [Database Functions](/docs/guides/database/functions), which are executed within your database -and can be called remotely using the [REST and GraphQL API](/docs/guides/api). - -For use-cases which require low-latency we recommend [Edge Functions](/docs/guides/functions), which are globally-distributed and can be written in TypeScript. - -### Organizing your Edge Functions - -We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (`_`). We recommend this folder structure: - -```bash -└── supabase - ├── functions - │ ├── _shared - │ | ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key - │ │ └── supabaseClient.ts # Supabase client with ANON key - │ ├── function-one # use hyphens to name functions - │ │ └── index.ts - │ └── function-two - │ └── index.ts - ├── migrations - └── config.toml -``` - -### Naming Edge Functions - -We recommend using hyphens to name functions because hyphens are the most URL-friendly of all the naming conventions (snake_case, camelCase, PascalCase). - -### CORS (Cross-Origin Resource Sharing) - -We recommend adding a check to handle [CORS Preflight](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) requests in your edge function to be able to invoke the function from browsers. - -See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/browser-with-cors/index.ts). - -```ts -export const corsHeaders = { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey', -} - -serve(async (req) => { - if (req.method === 'OPTIONS') { - return new Response('ok', { headers: corsHeaders }) - } - ... -}) -``` - -### Using HTTP Methods - -Edge Functions supports `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, and `OPTIONS`. A function can be designed to perform different actions based on a request's HTTP method. See the [example on building a RESTful service](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/restful-tasks) to learn how to handle different HTTP methods in your function. - -## Limitations - -- Deno Deploy limitations - - Deno does not support outgoing connections to ports `25`, `465`, and `587`. - - Cannot write to File System -- Edge Functions - - Local development - only one function at a time - - Serving of HTML content is not supported (`GET` requests that return `text/html` will be rewritten to `text/plain`). - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/functions/best-practices.mdx b/apps/docs/pages/guides/functions/best-practices.mdx new file mode 100644 index 00000000000..b670cd73a05 --- /dev/null +++ b/apps/docs/pages/guides/functions/best-practices.mdx @@ -0,0 +1,64 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-best-practices', + title: 'Edge Functions Best Practices', + description: 'Globally distributed TypeScript functions.', +} + +## Database Functions vs Edge Functions + +For data-intensive operations we recommend using [Database Functions](/docs/guides/database/functions), which are executed within your database +and can be called remotely using the [REST and GraphQL API](/docs/guides/api). + +For use-cases which require low-latency we recommend [Edge Functions](/docs/guides/functions), which are globally-distributed and can be written in TypeScript. + +## Organizing your Edge Functions + +We recommend developing “fat functions”. This means that you should develop few large functions, rather than many small functions. One common pattern when developing Functions is that you need to share code between two or more Functions. To do this, you can store any shared code in a folder prefixed with an underscore (`_`). We recommend this folder structure: + +```bash +└── supabase + ├── functions + │ ├── _shared + │ | ├── supabaseAdmin.ts # Supabase client with SERVICE_ROLE key + │ │ └── supabaseClient.ts # Supabase client with ANON key + │ ├── function-one # use hyphens to name functions + │ │ └── index.ts + │ └── function-two + │ └── index.ts + ├── migrations + └── config.toml +``` + +## Naming Edge Functions + +We recommend using hyphens to name functions because hyphens are the most URL-friendly of all the naming conventions (snake_case, camelCase, PascalCase). + +## CORS (Cross-Origin Resource Sharing) + +We recommend adding a check to handle [CORS Preflight](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) requests in your edge function to be able to invoke the function from browsers. + +See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/browser-with-cors/index.ts). + +```ts +export const corsHeaders = { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey', +} + +serve(async (req) => { + if (req.method === 'OPTIONS') { + return new Response('ok', { headers: corsHeaders }) + } + ... +}) +``` + +## Using HTTP Methods + +Edge Functions supports `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, and `OPTIONS`. A function can be designed to perform different actions based on a request's HTTP method. See the [example on building a RESTful service](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/restful-tasks) to learn how to handle different HTTP methods in your function. + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/quickstart.mdx b/apps/docs/pages/guides/functions/quickstart.mdx new file mode 100644 index 00000000000..963305181a3 --- /dev/null +++ b/apps/docs/pages/guides/functions/quickstart.mdx @@ -0,0 +1,210 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'functions-quickstart', + title: 'Edge Functions Quickstart', + description: 'Globally distributed TypeScript functions.', + sidebar_label: 'Quickstart', +} + +Learn how to build an Edge Function locally and deploy it to the Supabase Platform in less than 7 minutes. + +
+ +
+ +## Prerequisites + +Follow the steps to prepare your Supabase project on your local machine. + +- Install the Supabase CLI. [Docs](/docs/guides/cli). +- Login to the CLI using the command: `supabase login`. [Docs](/docs/reference/cli/usage#supabase-login). +- Initialize Supabase inside your project using the command: `supabase init`. [Docs](/docs/guides/cli/local-development#getting-started). +- Link to your Remote Project using the command `supabase link --project-ref your-project-ref`. [Docs](/docs/reference/cli/usage#supabase-link). +- Optional: Setup your environment: Follow [this setup guide](https://deno.land/manual/getting_started/setup_your_environment) to integrate the Deno language server with your editor. + +## Create a function + +Let's create a new Edge Function called `hello-world` inside your project: + +```bash +supabase functions new hello-world +``` + +This creates a function stub in your `supabase` folder at `./functions/hello-world/index.ts`. + +## Deploy to production + +```bash +supabase functions deploy hello-world +``` + +This command bundles your Edge Function from `./functions/hello-world/index.ts` and deploys it to the Supabase platform. +The command outputs a URL to the Supabase Dashboard which you can open to find view more details. Let's open the link to find the execution command. + + + +By default, Edge Functions require a valid JWT in the authorization header. This header is automatically set when invoking your function via a Supabase client library. + +If you want to use Edge Functions to handle webhooks (e.g. [Stripe payment webhooks](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks) etc.), you need to pass the `--no-verify-jwt` flag when deploying your function. + + + +## Execute remote functions + +You can execute Edge Functions using curl. Copy the curl command from the Dashboard. It should look like this: + +```bash +curl --request POST 'https://.functions.supabase.co/hello-world' \ + --header 'Authorization: Bearer ANON_KEY' \ + --header 'Content-Type: application/json' \ + --data '{ "name":"Functions" }' +``` + +If you receive an error `Invalid JWT`, find the `ANON_KEY` of your project in the Dashboard under `Settings > API`. + +After invoking your Edge Function you should see the response `{ "message":"Hello Functions!" }`. + +## Debug functions + +You can debug your deployed Edge Functions using the "Functions" section of the Dashboard. There are two types debugging tools available: + +- Invocations: shows the Request and Response for each execution. +- Logs: shows any platform events, including deployments and errors. + +![Function invocations.](/docs/img/guides/functions/function-logs.png) + +## Develop locally + +You can run your Edge Function locally using [`supabase functions serve`](/docs/reference/cli/usage#supabase-functions-serve): + +```bash +supabase start # start the supabase stack +supabase functions serve hello-world # start the Function watcher +``` + +The `functions serve` command has hot-reloading capabilities. It will watch for any changes to your files and restart the Deno server. + +### Invoke functions locally + +While serving your local Function, you can execute it using curl: + +```bash +curl --request POST 'http://localhost:54321/functions/v1/hello-world' \ + --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs' \ + --header 'Content-Type: application/json' \ + --data '{ "name":"Functions" }' +``` + +You should see the response `{ "message":"Hello Functions!" }`. + +
+Implementation details + +- All Edge Functions are `POST` requests. +- The `Authorization` header is required. You can use either the `ANON` key, the `SERVICE_ROLE` key, or a logged-in user's JWT. +- The Function is proxied through the local API (`http://localhost:54321`) + +
+
+ +If you execute Function with a different payload the response will change.
+Modify the `--data '{"name":"Functions"}'` line to `--data '{"name":"World"}'` and try invoking the command again! + +## Secrets and Environment Variables + +It's common that you will need to use sensitive information or environment-specific variables inside your Edge Functions. You can access these using Deno's built-in handler + +```js +Deno.env.get(MY_SECRET_NAME) +``` + +### Default secrets + +By default, Edge Functions have access to these secrets: + +- `SUPABASE_URL`: The API gateway for your Supabase project. +- `SUPABASE_ANON_KEY`: The `anon` key for your Supabase API. This is safe to use in a browser when you have [Row Level Security](/docs/guides/auth/row-level-security) enabled. +- `SUPABASE_SERVICE_ROLE_KEY`: The `service_role` key for your Supabase API. This is safe to use in Edge Functions, but it should NEVER be used in a browser. This key will bypass [Row Level Security](/docs/guides/auth/row-level-security). +- `SUPABASE_DB_URL`: The URL for your [PostgreSQL database](/docs/guides/database). You can use this to connect directly to your database. + +### Local secrets + +Let's create a local file for storing our secrets, and inside it we can store a secret `MY_NAME`: + +```jsx +echo "MY_NAME=Yoda" >> ./supabase/.env.local +``` + +This creates a new file `./supabase/.env.local` for storing your local development secrets. + + + +Never check your .env files into Git! + + + +Now let's access this environment variable `MY_NAME` inside our Function. Anywhere in your function, add this line: + +```jsx +console.log(Deno.env.get('MY_NAME')) +``` + +Now we can invoke our function locally, by serving it with our new `.env.local` file: + +```bash +supabase functions serve hello-world --env-file ./supabase/.env.local +``` + +When the function starts you should see the name “Yoda” output to the terminal. + +### Production secrets + +Let's create a `.env` for production. In this case we'll just use the same as our local secrets: + +```bash +cp ./supabase/.env.local ./supabase/.env +``` + +This creates a new file `./supabase/.env` for storing your production secrets. + + + +Never check your `.env` files into Git! + + + +Let's push all the secrets from the `.env` file to our remote project using [`supabase secrets set`](/docs/reference/cli/usage#supabase-secrets-set): + +```bash +supabase secrets set --env-file ./supabase/.env + +# You can also set secrets individually using: +supabase secrets set MY_NAME=Chewbacca +``` + +You don't need to re-deploy after setting your secrets. + +To see all the secrets which you have set remotely, use [`supabase secrets list`](/docs/reference/cli/usage#supabase-secrets-list): + +```bash +supabase secrets list +``` + +## Limitations + +- Deno Deploy limitations + - Deno does not support outgoing connections to ports `25`, `465`, and `587`. + - Cannot write to File System +- Edge Functions + - Local development - only one function at a time + - Serving of HTML content is not supported (`GET` requests that return `text/html` will be rewritten to `text/plain`). + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/hosting/overview.mdx b/apps/docs/pages/guides/hosting/overview.mdx index 27c77f0421a..3d6fa1ff753 100644 --- a/apps/docs/pages/guides/hosting/overview.mdx +++ b/apps/docs/pages/guides/hosting/overview.mdx @@ -39,7 +39,7 @@ Each system has a number of configuration options which can be found in the rele - [Realtime](https://github.com/supabase/realtime#server) - [GoTrue](https://github.com/supabase/gotrue) - [Storage](https://github.com/supabase/storage-api) -- [Kong](https://docs.konghq.com/install/docker/) +- [Kong](https://docs.konghq.com/gateway/latest/install/docker/) ## Managing your database diff --git a/apps/docs/pages/guides/integrations/zuplo.mdx b/apps/docs/pages/guides/integrations/zuplo.mdx new file mode 100644 index 00000000000..c4eb7cc98e4 --- /dev/null +++ b/apps/docs/pages/guides/integrations/zuplo.mdx @@ -0,0 +1,241 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'zuplo', + title: 'Zuplo', + description: 'Building a public API backed by Supabase.', +} + +[Zuplo](https://zuplo.com) is a fully-managed API gateway that offers the easiest way to securely and safely share your API. In this guide we look at how you can combine Zuplo and Supabase to create a public API with rate-limiting, a self-serve developer portal, and API-key authentication. There is an [accompanying video for this article](https://www.youtube.com/watch?v=GJSkbxMnWxE). + +![zuplo layout](/docs/img/guides/integrations/zuplo/arch.png) + +In this example we're going to work with a simple table that allows people to read and write entries to a Supabase table that contains some reviews of skis. Because this is an API for developers, we have to assume that they may be calling it from another backend service and can't login as a user using the standard Supabase method. In this scenario, API keys are often a better choice - see [Wait, you're not using API keys?](https://zuplo.com/blog/2022/05/03/you-should-be-using-api-keys/). + +We'll allow people, with a valid API key, to read data from the ski results table and to create new records. Hopefully it's obvious that there are many ways that you can extend this example to add more behavior like roles based access, with custom policies, custom handlers and more. + +## Setting up Supabase + +If you haven't already, create a new project in Supabase and create a table called ski-reviews with the following columns: + +- id (int8) +- created_at (timestamptz) +- make (varchar) +- model (varchar) +- year (int8) +- rating (int2) +- author (varchar) + +Manually enter a couple of rows of data, so that we have something to read from the DB. + +## The `Get all` reviews route in Zuplo + +Login to Zuplo at [portal.zuplo.com](https://portal.zuplo.com] and create a new project in Zuplo - I went with `supabase-ski-reviews`. + +Select the **File** tab and choose **Routes**. Add your first route with the following settings: + +- method: `GET` +- path: `/reviews` +- summary: `Get all reviews` +- version: `v1` +- CORS: `Anything goes` + +And in the request handler section, paste the `READ ALL ROWS` URL of your Supabase backend (you can get to this in the **API docs** section of Supabase) + +- URL Rewrite: `https://YOUR_SUPABASE_URL.supabase.co/rest/v1/ski-reviews?select=*` +- Forward Search: `unchecked` + +In order to call the Supabase backend I need to add some authentication headers to the outgoing request. + +Expand the **Policies** section of your route. Click **Add policy** on the **Request** pipeline. + +We don't want to forward any headers that the client sends us to Supabase, so find the **Clear Headers Policy** and add that to your inbound pipeline. Note, that we will allow the `content-type` header to flow through, so this should be your policy config. + +```json +{ + "export": "ClearHeadersInboundPolicy", + "module": "$import(@zuplo/runtime)", + "options": { + "exclude": ["content-type"] + } +} +``` + +Next, we need to add the credentials to the outgoing request. We'll need to get the JWT token from supabase - you'll find it in **Settings** > **API** as shown below: + +![secret_role jwt](/docs/img/guides/integrations/zuplo/secret-role.png) + +Once you've got your service_role JWT, click **Add Policy** again on the **Request** pipeline and choose the **Add/Set Headers Policy** and configure it as follows: + +```json +{ + "export": "SetHeadersInboundPolicy", + "module": "$import(@zuplo/runtime)", + "options": { + "headers": [ + { + "name": "apikey", + "value": "$env(SUPABASE_API_KEY)", + "overwrite": true + }, + { + "name": "authorization", + "value": "$env(SUPABASE_AUTHZ_HEADER)", + "overwrite": true + } + ] + } +} +``` + +Save your changes. + +Next, create two secret [environment variables](https://zuplo.com/docs/deployments/environment-variables) as follows: + +- SUPABASE_API_KEY: `"YOUR_SUPABASE_SECRET_ROLE_JWT"` +- SUPABASE_AUTHZ_HEADER: `"Bearer YOUR_SUPABASE_SECRET_ROLE_JWT"` + +Obviously, in both instances replace `YOUR_SUPABASE_SECRET_ROLE_JWT` with your service_role JWT from Supabase. + +You are now ready to invoke your API gateway and see data flow through from your Supabase backend! + +Click on the **open in browser** button shown below and you should see the JSON, flowing from Supabase in your browser 👏. + +![open in browser](/docs/img/guides/integrations/zuplo/open-in-browser.png) + +## Adding authentication + +At this point, that route is wide open to the world so we need to secure it. We'll do this using API keys. You can follow this guide [Add API key Authentication](https://zuplo.com/docs/quickstarts/add-api-key-auth). Be sure to drag the API Key authentication policy to the very top of your **Request** pipeline. Come back here when you're done. + +Welcome back! You've now learned how to secure your API with API-Keys. + +## Adding a Create route + +Next we'll add a route that allows somebody to create a review. Add another route with the following settings + +- method: `POST` +- path: `/reviews` +- summary: `Create a new review` +- version: `v1` +- CORS: `Anything goes` + +And the request handler as follows: + +- URL Rewrite: `https://YOUR_SUPABASE_URL.supabase.co/rest/v1/ski-reviews` +- Forward Search: `unchecked` + +Expand the policies section and add the same policies (note you can reuse policies by picking from the existing policies at the top of the library) + +![existing policies](/docs/img/guides/integrations/zuplo/existing-policies.png) + +- api-key-auth-inbound +- clear-headers-inbound +- set-headers-inbound + +Now your **create** route is secured and will automatically set the right headers before calling Supabase. That was easy. + +You can test this out by using the **API Test Console** to invoke your new endpoint. Go to the **API Test Console** and create a new test called `create-review.json`. + +- Method: `POST` +- Path: `/v1/reviews` +- Headers: + - `content-type`: `application/json` + - `authorization`: `Bearer YOUR_ZUPLO_API_KEY` +- Body: + +```json +{ + "make": "Rossignol", + "model": "Soul HD7", + "rating": 5, + "year": 2019 +} +``` + +![Test console](/docs/img/guides/integrations/zuplo/test-console.png) + +If you invoke your API by clicking `Test` you should see that you get a **201 Created** - congratulations! + +## Add validation to your post + +To make your API more usable and more secure it is good practice to validate incoming requests. In this case we will add a JSON Schema document and use it to validate the incoming body to our POST. + +Create a new schema document called `new-review.json`. + +![new schema](/docs/img/guides/integrations/zuplo/new-schema.png) + +This example fits the ski-reviews table we described above + +```json +{ + "$id": "http://example.com/example.json", + "type": "object", + "default": {}, + "title": "Root Schema", + "required": ["make", "model", "rating", "year"], + "additionalProperties": false, + "properties": { + "make": { + "type": "string", + "default": "", + "title": "The make Schema", + "examples": ["DPS"] + }, + "model": { + "type": "string", + "default": "", + "title": "The model Schema", + "examples": ["Pagoda"] + }, + "rating": { + "type": "integer", + "default": 0, + "title": "The rating Schema", + "examples": [5] + }, + "year": { + "type": "integer", + "default": 0, + "title": "The year Schema", + "examples": [2018] + } + }, + "examples": [ + { + "make": "DPS", + "model": "Pagoda", + "rating": 5, + "year": 2018, + "author": "Josh" + } + ] +} +``` + +Now add a new policy to **request** pipeline for your `Create new review` route. Choose the **JSON Body Validation** policy and configure it to use your newly created JSON schema document: + +```json +{ + "export": "ValidateJsonSchemaInbound", + "module": "$import(@zuplo/runtime)", + "options": { + "validator": "$import(./schemas/new-review.json)" + } +} +``` + +This policy can be dragged to the first position in your pipeline. + +Now to test this is working, go back to your API test console and change the body of your `create-review.json` test to be invalid (add a new property for example). You should find that you get a `400 Bad Request` response. + +![400 Bad Request](/docs/img/guides/integrations/zuplo/400-bad.png) + +Finally, lean back and marvel at your beautiful Developer Portal that took almost zero effort to get this far, wow! Hopefully you already found the link for this when adding API key support :) + +![Developer Portal](/docs/img/guides/integrations/zuplo/dev-portal.png) + +Zuplo can also be used to handle Supabase JWT tokens for any API, learn more at [API Authentication with Supabase JWT Tokens](https://zuplo.com/blog/2022/11/15/api-authentication-with-supabase-jwt) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/platform/logs.mdx b/apps/docs/pages/guides/platform/logs.mdx index 268f78240c8..995683676ed 100644 --- a/apps/docs/pages/guides/platform/logs.mdx +++ b/apps/docs/pages/guides/platform/logs.mdx @@ -40,31 +40,6 @@ To update the screenshots, ensure that at least one log line is selected to disp [Postgres logs](https://app.supabase.com/project/_/logs/postgres-logs) show queries and activity for your [database](../../guides/database). -By default, query logs are disabled for all new Supabase projects, as they can reveal metadata about the contents of your database (e.g. table and column names). If you'd like to enable query logs, you can enable and configure the [pgAudit extension](https://www.pgaudit.org/): - -- [Enable the pgAudit extension for your project](https://app.supabase.com/project/_/database/extensions) -- [Reboot the DB](https://app.supabase.com/project/_/settings/general); a "Fast database reboot" is sufficient, and faster than a full project restart -- Configure `pgaudit.log` to the [appropriate value](https://github.com/pgaudit/pgaudit/blob/master/README.md#pgauditlog) -- You should be able to view query logs in your [log explorer](https://app.supabase.com/project/_/logs/explorer) now - -As an example, if you wanted to enable logs for writes and DDL statements for a single session, you could execute within the session: - -```sql -set pgaudit.log = 'write, ddl'; -``` - -To _permanently_ enable logs for all statements that relate to roles and privileges, you could execute (followed by a db reboot): - -```sql -alter system set pgaudit.log to 'role'; -``` - -To remove a system-wide setting, you can use (followed by a db reboot): - -```sql -alter system reset pgaudit.log -``` - ![Postgres Logs](/docs/img/guides/platform/logs/logs-database.png) @@ -108,6 +83,50 @@ The Logs tab displays logs emitted during function execution. +--- + +## Logging Postgres Queries + +By default, query logs are disabled for new Supabase projects, as they can reveal metadata about the contents of your database (such as table and column names). + +To enable query logs: + +1. [Enable the pgAudit extension](https://app.supabase.com/project/_/database/extensions). +2. [Restart your project](https://app.supabase.com/project/_/settings/general) using the **Fast database reboot** option. +3. Configure `pgaudit.log` (see below). Perform a fast reboot if needed. +4. View your query logs under [Logs > Postgres Logs](https://app.supabase.com/project/_/logs/postgres-logs). + +### Configuring `pgaudit.log` + +The stored value under `pgaudit.log` determines the classes of statements that are logged by [pgAudit extension](https://www.pgaudit.org/). Refer to the pgAudit documentation for the [full list of values](https://github.com/pgaudit/pgaudit/blob/master/README.md#pgauditlog). + +To enable logging for function calls/do blocks, writes, and DDL statements for a single session, execute the following within the session: + +```sql +-- temporary single-session config update +set pgaudit.log = 'function, write, ddl'; +``` + +To _permanently_ set a logging configuration (beyond a single session), execute the following, then perform a fast reboot: + +```sql +-- equivalent permanent config update. +alter role postgres set pgaudit.log to 'function, write, ddl'; +``` + +To reset system-wide settings, execute the following, then perform a fast reboot: + +```sql +-- resets stored config. +alter role postgres reset pgaudit.log +``` + + + +If any permission errors are encountered when executing `alter role postgres ...`, it is likely that your project has yet to receive the patch to the latest version of [supautils](https://github.com/supabase/supautils), which is currently being rolled out. + + + ## Logs Explorer The [Logs Explorer](https://app.supabase.com/project/_/logs-explorer) exposes logs from each part of the Supabase stack as a separate table that can be queried and joined using SQL. diff --git a/apps/docs/pages/guides/realtime.mdx b/apps/docs/pages/guides/realtime.mdx index f2142bc69dd..acf13a0f57b 100644 --- a/apps/docs/pages/guides/realtime.mdx +++ b/apps/docs/pages/guides/realtime.mdx @@ -10,7 +10,7 @@ export const meta = { Supabase provides a globally distributed cluster of [Realtime](https://github.com/supabase/realtime) servers that enable the following functionality: - [Broadcast](#broadcast): Send ephemeral messages from client to clients with low latency. -- [Presence](#presence): Track and synchrononize shared state between clients. +- [Presence](#presence): Track and synchronize shared state between clients. - [Postgres CDC](#postgres-cdc): Listen to Postgres database changes and send them to authorized clients. A [channel](https://hexdocs.pm/phoenix/channels.html) is the basic building block of Realtime and narrows the scope of data flow to subscribed clients. You can think of a channel as a chatroom where participants are able to see who's online and send and receive messages; similar to a Discord or Slack channel. diff --git a/apps/docs/public/img/guides/integrations/zuplo/400-bad.png b/apps/docs/public/img/guides/integrations/zuplo/400-bad.png new file mode 100644 index 00000000000..a1a5ec5d4e1 Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/400-bad.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/arch.png b/apps/docs/public/img/guides/integrations/zuplo/arch.png new file mode 100644 index 00000000000..af425e632a2 Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/arch.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/dev-portal.png b/apps/docs/public/img/guides/integrations/zuplo/dev-portal.png new file mode 100644 index 00000000000..8c4e582be93 Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/dev-portal.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/existing-policies.png b/apps/docs/public/img/guides/integrations/zuplo/existing-policies.png new file mode 100644 index 00000000000..26d38ed4dac Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/existing-policies.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/new-schema.png b/apps/docs/public/img/guides/integrations/zuplo/new-schema.png new file mode 100644 index 00000000000..937857f37dd Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/new-schema.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/open-in-browser.png b/apps/docs/public/img/guides/integrations/zuplo/open-in-browser.png new file mode 100644 index 00000000000..e04e2ca4764 Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/open-in-browser.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/secret-role.png b/apps/docs/public/img/guides/integrations/zuplo/secret-role.png new file mode 100644 index 00000000000..7cd456a947b Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/secret-role.png differ diff --git a/apps/docs/public/img/guides/integrations/zuplo/test-console.png b/apps/docs/public/img/guides/integrations/zuplo/test-console.png new file mode 100644 index 00000000000..f51f187d07e Binary files /dev/null and b/apps/docs/public/img/guides/integrations/zuplo/test-console.png differ diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml index 27044787652..6d2c085106e 100644 --- a/apps/docs/public/sitemap.xml +++ b/apps/docs/public/sitemap.xml @@ -78,6 +78,24 @@ 0.5 + + https://supabase.com/docs/handbook/contributing + weekly + 0.5 + + + + https://supabase.com/docs/handbook/introduction + weekly + 0.5 + + + + https://supabase.com/docs/handbook/supasquad + weekly + 0.5 + + https://supabase.com/docs/guides/api weekly @@ -217,19 +235,31 @@ - https://supabase.com/docs/handbook/contributing + https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts weekly 0.5 - https://supabase.com/docs/handbook/introduction + https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth weekly 0.5 - https://supabase.com/docs/handbook/supasquad + https://supabase.com/docs/learn/auth-deep-dive/auth-gotrue + weekly + 0.5 + + + + https://supabase.com/docs/learn/auth-deep-dive/auth-policies + weekly + 0.5 + + + + https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security weekly 0.5 @@ -252,6 +282,36 @@ 0.5 + + https://supabase.com/docs/guides/functions/auth + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/best-practices + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/cicd-workflow + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/examples + weekly + 0.5 + + + + https://supabase.com/docs/guides/functions/quickstart + weekly + 0.5 + + https://supabase.com/docs/guides/auth/auth-apple weekly @@ -420,42 +480,6 @@ 0.5 - - https://supabase.com/docs/guides/functions/auth - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/cicd-workflow - weekly - 0.5 - - - - https://supabase.com/docs/guides/functions/examples - weekly - 0.5 - - - - https://supabase.com/docs/guides/hosting/docker - weekly - 0.5 - - - - https://supabase.com/docs/guides/hosting/overview - weekly - 0.5 - - - - https://supabase.com/docs/guides/hosting/platform - weekly - 0.5 - - https://supabase.com/docs/guides/database/arrays weekly @@ -541,25 +565,19 @@ - https://supabase.com/docs/guides/migrations/firebase-auth + https://supabase.com/docs/guides/hosting/docker weekly 0.5 - https://supabase.com/docs/guides/migrations/firebase-storage + https://supabase.com/docs/guides/hosting/overview weekly 0.5 - https://supabase.com/docs/guides/migrations/firestore-data - weekly - 0.5 - - - - https://supabase.com/docs/guides/migrations/heroku + https://supabase.com/docs/guides/hosting/platform weekly 0.5 @@ -612,6 +630,12 @@ 0.5 + + https://supabase.com/docs/guides/integrations/estuary + weekly + 0.5 + + https://supabase.com/docs/guides/integrations/fezto weekly @@ -690,6 +714,36 @@ 0.5 + + https://supabase.com/docs/guides/integrations/zuplo + weekly + 0.5 + + + + https://supabase.com/docs/guides/migrations/firebase-auth + weekly + 0.5 + + + + https://supabase.com/docs/guides/migrations/firebase-storage + weekly + 0.5 + + + + https://supabase.com/docs/guides/migrations/firestore-data + weekly + 0.5 + + + + https://supabase.com/docs/guides/migrations/heroku + weekly + 0.5 + + https://supabase.com/docs/guides/platform/compute-add-ons weekly @@ -768,42 +822,18 @@ 0.5 - - https://supabase.com/docs/learn/auth-deep-dive/auth-deep-dive-jwts - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-google-oauth - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-gotrue - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-policies - weekly - 0.5 - - - - https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security - weekly - 0.5 - - https://supabase.com/docs/guides/auth/auth-helpers/auth-ui weekly 0.5 + + https://supabase.com/docs/guides/auth/auth-helpers/nextjs-server-components + weekly + 0.5 + + https://supabase.com/docs/guides/auth/auth-helpers/nextjs weekly @@ -1740,6 +1770,12 @@ 0.5 + + https://supabase.com/docs/reference/dart/storage-from-createsignedurls + weekly + 0.5 + + https://supabase.com/docs/reference/dart/storage-from-download weekly @@ -1932,6 +1968,12 @@ 0.5 + + https://supabase.com/docs/reference/realtime/config + weekly + 0.5 + + https://supabase.com/docs/reference/storage/release-notes weekly diff --git a/apps/www/.env b/apps/www/.env index 3f035873262..af6041f3a2c 100644 --- a/apps/www/.env +++ b/apps/www/.env @@ -9,3 +9,4 @@ NEXT_PUBLIC_DOCS_URL="http://localhost:3005" NEXT_PUBLIC_STUDIO_URL="https://localhost:8082" NEXT_PUBLIC_LAUNCHWEEKSITE_URL="https://localhost:3008" NEXT_PUBLIC_REFERENCE_DOCS_URL="https://localhost:3010" + diff --git a/apps/www/_blog/2020-05-01-supabase-alpha-april-2020.mdx b/apps/www/_blog/2020-05-01-supabase-alpha-april-2020.mdx index 58416752860..4081fb5f644 100644 --- a/apps/www/_blog/2020-05-01-supabase-alpha-april-2020.mdx +++ b/apps/www/_blog/2020-05-01-supabase-alpha-april-2020.mdx @@ -43,12 +43,12 @@ At Supabase, we're building some amazing tools that make Postgres as easy to use #### Simple interface Why are database interfaces so hard to use? The Supabase team has built products for 70-year-olds, so we're confident we can make something easier for developers: -![Supabase table view](https://dev-to-uploads.s3.amazonaws.com/i/b4o39am95zcl5vl54j75.png) +![Supabase table view](/images/blog/2020/b4o39am95zcl5vl54j75.png) #### Connectors Send realtime database changes to other systems, like queues or webhooks (Slack notifications!): -![Supabase connectors](https://dev-to-uploads.s3.amazonaws.com/i/aom5r917s792cc081bbz.png) +![Supabase connectors](/images/blog/2020/aom5r917s792cc081bbz.png) #### And more diff --git a/apps/www/_blog/2020-06-01-supabase-alpha-may-2020.mdx b/apps/www/_blog/2020-06-01-supabase-alpha-may-2020.mdx index 7899965f87d..2d04b6b60b8 100644 --- a/apps/www/_blog/2020-06-01-supabase-alpha-may-2020.mdx +++ b/apps/www/_blog/2020-06-01-supabase-alpha-may-2020.mdx @@ -39,13 +39,13 @@ OK now for the important part - as promised, we will continue to release our upd We've revamped the UI to fit in some more features that we're building. -![Fresh UI](https://dev-to-uploads.s3.amazonaws.com/i/jzzm7u56ns6ega9uyc4j.png) +![Fresh UI](/images/blog/2020/jzzm7u56ns6ega9uyc4j.png) ### Table View This one is still very unstable, but we wanted to ship it anyway. It's a little hidden away so you'll have to hunt for it :). Give us a couple of months and we promise this will be as good as (better than?) Airtable. -![Table view](https://dev-to-uploads.s3.amazonaws.com/i/jalcaoz4lsp2b6wegah5.png) +![Table view](/images/blog/2020/jalcaoz4lsp2b6wegah5.png) #### And more diff --git a/apps/www/_blog/2020-08-02-continuous-postgresql-backup-walg.mdx b/apps/www/_blog/2020-08-02-continuous-postgresql-backup-walg.mdx index c28d321e737..de0b4c6e801 100644 --- a/apps/www/_blog/2020-08-02-continuous-postgresql-backup-walg.mdx +++ b/apps/www/_blog/2020-08-02-continuous-postgresql-backup-walg.mdx @@ -94,7 +94,7 @@ $ sudo -su postgres envdir /etc/wal-g.d/env /usr/local/bin/wal-g backup-push /va At this point, if you were to check the S3 path that you provided, the following two newly created and populated directories would be observed: -![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lai1mxg62kffyd2khmtm.png) +![Alt Text](/images/blog/2020/lai1mxg62kffyd2khmtm.png) From then on, subsequent physical backups would be found in the directory `basebackups_005` and any WAL archives would be sent to the directory `wal_005`. diff --git a/apps/www/_blog/2021-03-11-using-supabase-replit.mdx b/apps/www/_blog/2021-03-11-using-supabase-replit.mdx index d5f678629be..4b609ee47f1 100644 --- a/apps/www/_blog/2021-03-11-using-supabase-replit.mdx +++ b/apps/www/_blog/2021-03-11-using-supabase-replit.mdx @@ -35,11 +35,11 @@ Here's how to start a Supabase + Node.js repl: Sign up for [replit.com](http://replit.com) and hit new repl in the top left -![Untitled-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3dljulzsyqu58i75epn.png) +![Untitled-2](/images/blog/2021-march/u3dljulzsyqu58i75epn.png) Select node.js, give it a name, and click Create repl -![Untitled-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rcfbb12sfabevto571j.png) +![Untitled-1](/images/blog/2021-march/7rcfbb12sfabevto571j.png) Import supabase's createClient method and hit run to install the required libs: @@ -56,11 +56,11 @@ const supabase = createClient( ) ``` -![Untitled-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5aqyjdh74qm83slmli.png) +![Untitled-3](/images/blog/2021-march/5j5aqyjdh74qm83slmli.png) Now that supabase is connected you'll want to add some data to your db, you can grab any SQL dataset on the web, or make your own, but the fasted way to test is to open the SQL tab in the Supabase dashboard and click the Countries sample database and click Run. -![Untitled-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54yykm6h9hqpric87zad.png) +![Untitled-4](/images/blog/2021-march/54yykm6h9hqpric87zad.png) From within your repl you can now query your countries table like: diff --git a/apps/www/_blog/2022-03-29-graphql-now-available.mdx b/apps/www/_blog/2022-03-29-graphql-now-available.mdx index b09dc44372e..ad9b48e6fae 100644 --- a/apps/www/_blog/2022-03-29-graphql-now-available.mdx +++ b/apps/www/_blog/2022-03-29-graphql-now-available.mdx @@ -111,7 +111,7 @@ type Mutation { ): AccountDeleteResponse! ``` -For a complete example with relationships, check out the [reflection docs](https://supabase.github.io/pg_graphql/reflection/). +For a complete example with relationships, check out the [API docs](https://supabase.github.io/pg_graphql/api/). ## Security diff --git a/apps/www/_blog/2022-12-01-transparent-column-encryption-with-postgres.mdx b/apps/www/_blog/2022-12-01-transparent-column-encryption-with-postgres.mdx new file mode 100644 index 00000000000..75c05cf7f08 --- /dev/null +++ b/apps/www/_blog/2022-12-01-transparent-column-encryption-with-postgres.mdx @@ -0,0 +1,263 @@ +--- +title: Transparent Column Encryption with Postgres +description: Using pgsodium's Transparent Column Encryption to encrypt data and provide your users with row-level encryption. +author: michel +image: transparent-column-encryption-with-postgres.jpg +thumb: transparent-column-encryption-with-postgres.jpg +tags: + - postgres +date: '2022-12-01' +toc_depth: 3 +--- + +One of the more common questions we receive at Supabase is “how do I encrypt sensitive data”? + +pgsodium's Transparent Column Encryption (TCE) is one of the safest ways, and can be used to encrypt one or more text columns in any number of tables. Using TCE, you can encrypt data so that it doesn't leak into logs as well as providing your users with row-level encryption. + +To understand how TCE works, let's first do a deep-dive into an important encryption topic: key derivation. + +
+ + This post is a sneak peek of a big feature we are shipping on LW6. To not miss a thing, get your ticket for [Supabase Launch Week 6!](https://supabase.com/launch-week). + +
+ +## How Key Derivation Works + +The current state-of-the-art in encryption libraries is [libsodium](https://doc.libsodium.org/). + +**libsodium** offers a range of APIs for authenticated secret and public key encryption, key derivation, encrypted streaming, [AEAD](https://en.wikipedia.org/wiki/Authenticated_encryption), various forms of hashing, and much more. + +This powerful API is available to PostgreSQL using the [**pgsodium**](https://github.com/michelp/pgsodium) extension. **pgsodium** provides all the functionality of the full **libsodium** API, but previously it required developers to set up database encryption themselves, which remained a challenge even for those familiar with database administration. + +To solve this problem, **pgsodium** now has a full key management API, primarily via the table `pgsodium.key` and the `pgsodium.create_key()` function. This key table contains no raw keys, but instead uses libsodium Key IDs to derive keys that are used internally for encryption. A [key derivation function](https://libsodium.gitbook.io/doc/key_derivation) is used with an internal root key that is unavailable to SQL and not stored in the database, but rather managed by you externally using flexible scripts, or by Supabase automatically as part of our service offering. + +The simplest way to use **pgsodium** to encrypt and decrypt data is to first create a ******Key ID******. Valid Key IDs are stored in pgsodium in a special extension table, and they can be created using the `pgsodium.create_key()` function. This function takes a number of arguments depending on how it's used, but the simplest case is to create a new key with no arguments: + +```sql +select * from pgsodium.create_key(); +-[ RECORD 1 ]---+------------------------------------- +id | eaa20d8c-c77c-4985-9f73-2a5f5d1f1e6d +name | +status | valid +key_type | aead-det +key_id | 2 +key_context | \x7067736f6469756d +created | 2022-11-13 21:19:35.765823+00 +expires | +associated_data | +``` + +This key can now be used with pgsodium encryption functions by its UUID (`eaa20d8c-c77c-4985-9f73-2a5f5d1f1e6d`). For example: + +```sql +select * from pgsodium.crypto_aead_det_encrypt ( + 'this is the message', -- a message to encrypt + 'this is associated data', -- some authenticated associated data + 'eaa20d8c-c77c-4985-9f73-2a5f5d1f1e6d'::uuid -- key ID +); +``` + +This produces the following encrypted “ciphertext” using the `aead-det` algorithm from the libsodium [XChaCha20-SIV](https://github.com/jedisct1/libsodium-xchacha20-siv) encryption function. + +``` +-[ RECORD 1 ]-----------+--------------------------------------------------------------------------------------------------------- +crypto_aead_det_encrypt | \\x099baa820250d7375ed141f8f1936af384bc229f3de1010a6eff6ffdaf3998baffbae75b5cd83d1c469407ff2d3764a428b742 +``` + +Now to decrypt the ciphertext, pass it to the decryption function *with the same Key ID*: + +```sql +select * +from convert_from(pgsodium.crypto_aead_det_decrypt ( + '\\x099baa820250d7375ed141f8f1936af384bc229f3de1010a6eff6ffdaf3998baffbae75b5cd83d1c469407ff2d3764a428b742', + 'this is associated data', + 'eaa20d8c-c77c-4985-9f73-2a5f5d1f1e6d'::uuid +), 'utf8'); +``` + +Which recovers the original “plaintext” message: + +``` +-[ RECORD 1 ]+-------------------- +convert_from | this is the message +``` + +In the above example, there is *no raw key* like shown in the pgcrypto example above, only a Key ID which is used to derive the key used to encrypt the message and authenticate it with the associated data. In fact, it is impossible for a SQL user to derive the key used above, and if the Key ID is stored, then no decrypted information will leak into backups, disk storage, or the database WAL stream. + +## Transparent Column Encryption + +As of **pgsodium** 3.0.0 and up, the extension offers a simple and declarative Transparent Column Encryption feature (TCE). This feature is now shipped with all Supabase projects. TCE allows you to specify encrypted columns within a table and generates a new view that “wraps” that table to decrypt the contents. + +TCE works using two dynamically generated objects for tables that contain encrypted columns: + +- an `INSERT UPDATE` trigger that encrypts data when it is inserted or modified +- a view that is created to wrap the table to decrypt the data when it is accessed + +To “transparently” decrypt the table, access the dynamically generated view *instead of the table*. For every encrypted column in the table, the view will have an additional decrypted column that shows the decrypted result. + +It's worth noting at this point that sometimes there is some confusion about handling encrypted data with TCE. The `T` stands for ***********Transparent*********** which means, you can always see decrypted data through the view, where the decrypted data can't be see is when stored on disk, or in pg_dumps, backups, WAL streams, etc. This is often called ******************Encryption At Rest****************** and is one layer in many that may be used to encrypt and protect your data. + +Often Transparent encryption is understood to be “Transparent Disk Encryption” or “Full Disk Encryption”, this is where a drive is encrypted but reading and writing that drive is decrypted. TCE is similar to this, where data on disk is encrypted, but it is more fine grained, only particular columns are encrypted. The data is also encrypted in the sense that the table stored on disk contains encrypted data, without the view or the key, pg_dumps and backups still contain encrypted data, this is not possible with disk-only encryption. + +For the moment TCE only works for columns of type `text` (or types castable to `text` like `json`). Soon we will also support `bytea` and possibly more as use cases and tests get better. + +TCE uses one of PostgreSQL's lesser-known features: [`SECURITY LABEL`](https://www.postgresql.org/docs/current/sql-security-label.html). A security label can be thought of as a simple label which is attached to an object (a table, column, etc). Each label is scoped to an extension and that extension can provide security features depending on the label. + +Let's see a simple example of using `SECURITY LABEL` to encrypt a column using **pgsodium**. + +
+ +Note: We're using “credit cards” in our examples below, because they are very easy to understand. Please don't store credit cards in your Supabase database - we are not a certified PCI Service Provider. + +
+ +### One Key ID for the Entire Column + +For the simplest case, a column can be encrypted with one Key ID which must be of the type `aead-det` (as created above): + +```sql +CREATE TABLE credit_cards ( + id bigserial primary key, + credit_card_number text +); + +SECURITY LABEL FOR pgsodium + ON COLUMN credit_cards.credit_card_number + IS 'ENCRYPT WITH KEY ID e348034b-3f07-4878-aad6-000511d12826'; +``` + +The advantage of this approach is simplicity - the user creates one key and labels a column with it. The cryptographic algorithm for this approach uses a *nonceless* encryption algorithm called `crypto_aead_det_xchacha20()`. This algorithm is written by the author of libsodium and can be found [here](https://github.com/jedisct1/libsodium-xchacha20-siv). + +Using one key for an entire column means that whoever can decrypt one row can decrypt them all from a database dump. Also changing (rotating) the key means rewriting the whole table. + +### One Key ID per Row + +A more fine grained approach would be storing one Key ID per row: + +```sql +CREATE TABLE credit_cards ( + id bigserial primary key, + credit_card_number text, + key_id uuid not null DEFAULT 'e348034b-3f07-4878-aad6-000511d12826'::uuid +); + +SECURITY LABEL FOR pgsodium + ON COLUMN credit_cards.credit_card_number + IS 'ENCRYPT WITH KEY COLUMN key_id'; +``` + +This approach ensures that a key for one user doesn't necessarily decrypt any others. While rows can share key IDs, they don't necessarily have to (unlike the first example above where one key id was used for the entire column). It also acts as a natural partition that can work in conjunction with Row Level Security to share distinct keys between owners. + +Notice also how there is a `DEFAULT` value for the `key_id`. In a way, this gives you the best of both approaches - encrypting the column when a per-row key ID is not provided. The downside to this approach is that you need to store one key ID per row, which takes up more disk space (but that's cheap!). + +### One Key ID per Row with Nonce Support + +The default cryptographic algorithm for the above approach uses a *nonceless* encryption algorithm called `[crypto_aead_det_xchacha20()](https://github.com/jedisct1/libsodium-xchacha20-siv)`. This algorithm has the advantage that it does not require nonce values, the disadvantage is that duplicate plaintexts will produce duplicate ciphertexts. + +Nonces are some extra cryptographic context that is used in many cryptographic algorithms to produce different ciphertexts, even if the plaintexts are the same. The nonce does not have to be secret, but it *does* have to be unique. **pgsodium** comes with a useful function `pgsodium.crypto_aead_det_noncegen()` that will generate a cryptographically secure nonce for you, and in almost all cases it's best to use that function unless you know specifically what you are doing. In password hashing approaches, this is often similar to how a “salt” value is used to deduplicate password hashes. + +Duplicate ciphertexts cannot be used to “attack the key”, it can only reveal the duplication. However, duplication is still information. In our examples so far, an attacker might be able to use this information to determine that two accounts share the same credit card number. While not technically breaking the encryption, this still leaks information to an attacker. + +```sql +CREATE TABLE credit_cards ( + id bigserial primary key, + credit_card_number text, + key_id uuid not null DEFAULT 'e348034b-3f07-4878-aad6-000511d12826'::uuid, + nonce bytea default pgsodium.crypto_aead_det_noncegen() +); + +SECURITY LABEL FOR pgsodium + ON COLUMN credit_cards.credit_card_number + IS 'ENCRYPT WITH KEY COLUMN key_id NONCE nonce'; +``` + +This is the most secure form of TCE - there is a unique key ID and a unique nonce per row. + +### One Key ID per Row with Associated Data + +The encryption that is used for TCE is one of a family of functions provided by **libsodium** to do Authenticated Encryption with Associated Data or [AEAD Encryption](https://en.wikipedia.org/wiki/Authenticated_encryption). The “associated” data is plaintext (unencrypted) information that is mixed into the authentication signature of the encrypted data, such that when you authenticate the data, you also know that the associated data is authentic. + +AEAD is helpful because often you have metadata associated with a secret, which isn't confidential but must not be forged. + +In our credit card example, we might associate a "`credit_card_number`" with an "`account_id`". But what if a malicious actor wanted to use someone else's credit card on their own account? If someone could forge the `account_id` data column, swapping an `account_id` with their own `account_id`, then you could be tricked into using the wrong credit card. By “associating” the `account_id` with the `credit_card_number`, it cannot be forged without throwing an error. + +Like above, this is done simply by extending the security label with the associated data column: + +```sql +CREATE TABLE credit_cards ( + id bigserial primary key, + credit_card_number text, + account_id integer, + key_id uuid not null DEFAULT 'e348034b-3f07-4878-aad6-000511d12826'::uuid, + nonce bytea default pgsodium.crypto_aead_det_noncegen() +); + +SECURITY LABEL FOR pgsodium + ON COLUMN credit_cards.credit_card_number + IS 'ENCRYPT WITH KEY COLUMN key_id ASSOCIATED (account_id) NONCE nonce'; +``` + +The new label indicates which column is to be associated with the secret, and that's it! Your `account_id` and credit card number are now protected under the same authentication signature as the secret itself. + +## Using an Encrypted Table + +Now that you have TCE setup for a table, it's easy to use by simply inserting data into the table, and querying that data by looking at its generated view. The view is named `decrypted_` and by default is in the same schema as your table: + +```sql +INSERT INTO credit_cards ( + credit_card_number, + account_id +) +VALUES + ('1234-5678-8765-4321', 123); +``` + +Now that you have inserted data, look at the table and notice how the credit card number is encrypted. This is the data that is stored on disk, the encrypted card number, the key id, and the account id, ********************************but the key itself is not stored********************************. This means if someone gets a backup or dump of your database, they cannot decrypt the credit card number, they do not have the key, only the key ID: + +```sql +> select * from credit_cards where account_id = 123; +-[ RECORD 1 ]------+--------------------------------------------------------------------- +id | 1 +credit_card_number | jf8KfImkKTr+j4gzyDZQtLDEFL9eSlFuKjNlNEJvDg+OIKUr2wjF/8NnYcLisb5F9xiN +account_id | 123 +key_id | 7f753c4f-8c68-457a-8801-1798b2e9f44d +nonce | \x300a14aa721184ff7cf0f6bf088da267 +``` + +For you, the developer, you need the unencrypted credit card number for you application. No problem, you can access that data using the dynamically generated decryption view `decrypted_credit_cards`: + +```sql +> select * from decrypted_credit_cards where account_id = 123; +-[ RECORD 1 ]----------------+--------------------------------------------------------------------- +id | 1 +credit_card_number | jf8KfImkKTr+j4gzyDZQtLDEFL9eSlFuKjNlNEJvDg+OIKUr2wjF/8NnYcLisb5F9xiN +decrypted_credit_card_number | 1234-5678-8765-4321 +account_id | 123 +key_id | 7f753c4f-8c68-457a-8801-1798b2e9f44d +nonce | \x300a14aa721184ff7cf0f6bf088da267 +``` + +Notice how there is a new column called `decrypted_credit_card_number`. This column is not stored in database or on disk at all, it is generated “on-the-fly” as you select from the view. Database dumps do not contain this information, only the view itself, and most importantly, *************************************raw decryption keys are never stored*************************************. + +## Future possibilities + +We're always thinking about the future possibilities for features and tools that we can bring to the PostgreSQL community, and we'd love to hear from you about what kind of encryption features you'd like to see. Some things we've considered but not yet explored yet are: + +- Built-in Key Management Server (KMS) with REST API ala AWS or GCP. +- Seamless Integration with external KMS services for key management. +- Signcryption-based Token formats for exchanging AEAD tokens. +- End-to-End encryption for user data using libsodium's `crypto_secretstream()` API. +- Group encryption using [signcryption](https://github.com/jedisct1/libsodium-signcryption) +- Your idea here? + +There's a lot of potential in the world of cryptography with Postgres and pgsodium, and we'd love to hear any ideas you may have as well. Join us in our [Discord #encryption channel](https://discord.com/channels/839993398554656828/1009906326480101417) if you want to chat more about it with us! + +## More Postgres Resources + +- [Postgres Full Text Search vs the rest](https://supabase.com/blog/postgres-full-text-search-vs-the-rest) +- [Postgres WASM by Snaplet and Supabase](https://supabase.com/blog/postgres-wasm) +- [Choosing a Postgres Primary Key](https://supabase.com/blog/choosing-a-postgres-primary-key) +- [Implementing "seen by" functionality with Postgres](https://supabase.com/blog/seen-by-in-postgresql) +- [Partial data dumps using Postgres Row Level Security](https://supabase.com/blog/partial-postgresql-data-dumps-with-rls) +- [Realtime Postgres RLS on Supabase](https://supabase.com/blog/realtime-row-level-security-in-postgresql) diff --git a/apps/www/components/Globe.tsx b/apps/www/components/Globe.tsx new file mode 100644 index 00000000000..388c6a3d65d --- /dev/null +++ b/apps/www/components/Globe.tsx @@ -0,0 +1,72 @@ +import createGlobe from 'cobe' +import { useEffect, useRef } from 'react' +import { useTheme } from './Providers/index' + +const Globe = () => { + const { isDarkMode } = useTheme() + const canvasRef = useRef() + + useEffect(() => { + let rotation: number = 0 + let width: number = 0 + const onResize = () => canvasRef.current && (width = canvasRef.current.offsetWidth) + window.addEventListener('resize', onResize) + onResize() + const cobe = createGlobe(canvasRef.current, { + devicePixelRatio: 2, + width: width * 2, + height: width * 2, + phi: 0, + theta: 0.3, + dark: isDarkMode ? 1 : 0, + diffuse: 3, + scale: 1, + opacity: 0.8, + mapSamples: 20000, + mapBrightness: 4, + baseColor: [255 / 255, 255 / 255, 255 / 255], + markerColor: [62 / 255, 207 / 255, 142 / 255], + glowColor: [255 / 255, 255 / 255, 255 / 255], + markers: [ + { location: [53.4084, 2.9916], size: 0.06 }, + { location: [1.3521, 103.8198], size: 0.06 }, + { location: [-40.9006, 174.886], size: 0.06 }, + { location: [14.0583, 108.2772], size: 0.06 }, + { location: [37.7749, -122.4194], size: 0.06 }, + { location: [41.3874, 2.1686], size: 0.06 }, + { location: [49.2827, -123.1207], size: 0.06 }, + { location: [-36.9848, 143.3906], size: 0.06 }, + { location: [42.3601, -71.0589], size: 0.06 }, + { location: [52.52, 13.405], size: 0.06 }, + { location: [33.749, -84.388], size: 0.06 }, + { location: [35.6762, 139.6503], size: 0.06 }, + { location: [9.19, -75.0152], size: 0.06 }, + { location: [-25.2521, -52.0215], size: 0.06 }, + ], + onRender: (state) => { + state.phi = rotation + rotation += 0.0025 + state.width = width * 2 + state.height = width * 2 + }, + }) + setTimeout(() => (canvasRef.current.style.opacity = '1')) + return () => cobe.destroy() + }, [isDarkMode]) + + return ( + + ) +} + +export default Globe diff --git a/apps/www/components/LaunchWeek/Ticket/TicketContainer.tsx b/apps/www/components/LaunchWeek/Ticket/TicketContainer.tsx index 632c731bfc4..f658037f136 100644 --- a/apps/www/components/LaunchWeek/Ticket/TicketContainer.tsx +++ b/apps/www/components/LaunchWeek/Ticket/TicketContainer.tsx @@ -33,23 +33,17 @@ export default function Conf({ setPageState, }} > - - {pageState === 'registration' && !sharePage ? ( - <> - {/* */} -
- {/* */} - - ) : ( - - )} - + {pageState === 'registration' && !sharePage ? ( + + ) : ( + + )} ) } diff --git a/apps/www/components/LaunchWeek/Ticket/conf-container.module.css b/apps/www/components/LaunchWeek/Ticket/conf-container.module.css index 2a7eac88ac0..3f9f3a79e46 100644 --- a/apps/www/components/LaunchWeek/Ticket/conf-container.module.css +++ b/apps/www/components/LaunchWeek/Ticket/conf-container.module.css @@ -1,4 +1,4 @@ -.container { +/* .container { margin: auto 0; padding: 0 var(--space-4x); } @@ -8,4 +8,4 @@ margin: auto; padding: 0 var(--space-8x); } -} +} */ diff --git a/apps/www/components/LaunchWeek/Ticket/conf-container.tsx b/apps/www/components/LaunchWeek/Ticket/conf-container.tsx index e331c3e882c..227361424b9 100644 --- a/apps/www/components/LaunchWeek/Ticket/conf-container.tsx +++ b/apps/www/components/LaunchWeek/Ticket/conf-container.tsx @@ -1,5 +1,5 @@ import styles from './conf-container.module.css' export default function ConfContainer({ children }: { children: React.ReactNode }) { - return
{children}
+ return children } diff --git a/apps/www/components/LaunchWeek/Ticket/form.module.css b/apps/www/components/LaunchWeek/Ticket/form.module.css index fa1a4736cc3..5b6a078561b 100644 --- a/apps/www/components/LaunchWeek/Ticket/form.module.css +++ b/apps/www/components/LaunchWeek/Ticket/form.module.css @@ -1,31 +1,31 @@ -.form { +/* .form { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 12px; gap: 12px; -} +} */ -.formLeft { +/* .formLeft { align-items: center; } .formCenter { align-items: center; -} +} */ -@media (min-width: 1200px) { +/* @media (min-width: 1200px) { .formLeft { align-items: start; } .formCenter { align-items: center; } -} - +} */ +/* .formInfo { max-width: 520px; -} +} */ .formInfo h3 { font-size: 1.25em; @@ -45,19 +45,17 @@ } */ } -.formInfoLeft { +/* .formInfoLeft { text-align: center; - margin: 0 auto; } .formInfoCenter { text-align: center; margin: 0 auto; -} +} */ @media (min-width: 1200px) { .formInfoLeft { text-align: left; - margin: inherit; } .formInfoCenter { text-align: center; diff --git a/apps/www/components/LaunchWeek/Ticket/form.tsx b/apps/www/components/LaunchWeek/Ticket/form.tsx index 6cbe2532aee..3595be0f946 100644 --- a/apps/www/components/LaunchWeek/Ticket/form.tsx +++ b/apps/www/components/LaunchWeek/Ticket/form.tsx @@ -6,6 +6,7 @@ import LoadingDots from './loading-dots' import styleUtils from './utils.module.css' import styles from './form.module.css' import useEmailQueryParam from '~/components/LaunchWeek/Ticket/hooks/use-email-query-param' +import { IconLoader } from '~/../../packages/ui' // import Captcha, { useCaptcha } from './captcha' type FormState = 'default' | 'loading' | 'error' @@ -30,6 +31,7 @@ export default function Form({ sharePage, align = 'Center' }: Props) { const [errorMsg, setErrorMsg] = useState('') const [errorTryAgain, setErrorTryAgain] = useState(false) const [focused, setFocused] = useState(false) + const [submitting, setSubmitting] = useState(false) const [formState, setFormState] = useState('default') const { setPageState, setUserData, session, userData, supabase } = useConfData() const router = useRouter() @@ -62,6 +64,12 @@ export default function Form({ sharePage, align = 'Center' }: Props) { // Prefetch the twitter share URL to eagerly generate the page fetch(`/launch-week/tickets/${username}`).catch((_) => {}) + // Prefetch ticket og image. + fetch( + `https://obuldanrptloktxcffvn.functions.supabase.co/launchweek-ticket-og?username=${encodeURIComponent( + username ?? '' + )}` + ).catch((_) => {}) setPageState('ticket') }) @@ -71,7 +79,7 @@ export default function Form({ sharePage, align = 'Center' }: Props) { async function register(email: string, token?: string): Promise { const { error } = await supabase!.from('lw6_tickets').insert({ email }) if (error) { - console.log({ error }) + // console.log({ error }) return { id: 'new', ticketNumber: 1234, @@ -153,18 +161,17 @@ export default function Form({ sharePage, align = 'Center' }: Props) { useEmailQueryParam('email', setEmail) return ( - <> +
-

Get a ticket

-

- A few of the lucky attendees will get a limited edition Supabase goodie bag. Make sure you - don’t skip your chance. +

Coming soon

+

+ Register to get your ticket and stay tuned all week for daily announcements

{formState === 'error' ? ( @@ -188,46 +195,49 @@ export default function Form({ sharePage, align = 'Center' }: Props) {
) : ( -
- - -
+ setEmail(e.target.value)} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} + placeholder="Enter email" + aria-label="Your email address" + required + /> + {/* */} )} - +
) } diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx index 1a86e3aed8d..fd7c62842a4 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-actions.tsx @@ -1,13 +1,8 @@ -import { useState, useRef, useEffect } from 'react' -import cn from 'classnames' +import { useEffect, useRef, useState } from 'react' import { SITE_URL, TWEET_TEXT, TWEET_TEXT_GOLDEN } from '~/lib/constants' -// import IconTwitter from '~/components/LaunchWeek/Ticket/icons/icon-twitter' -// import IconLinkedin from '~/components/LaunchWeek/Ticket/icons/icon-linkedin' -// import IconDownload from '~/components/LaunchWeek/Ticket/icons/icon-download' -import LoadingDots from './loading-dots' -import styleUtils from './utils.module.css' -import styles from './ticket-actions.module.css' +import { IconDownload, IconLinkedin, IconTwitter } from 'ui' import useConfData from '~/components/LaunchWeek/Ticket//hooks/use-conf-data' +import LoadingDots from './loading-dots' type Props = { username: string @@ -18,7 +13,7 @@ export default function TicketActions({ username, golden = false }: Props) { const [imgReady, setImgReady] = useState(false) const [loading, setLoading] = useState(false) const downloadLink = useRef() - const permalink = encodeURIComponent(`${SITE_URL}/tickets/${username}`) + const permalink = encodeURIComponent(`${SITE_URL}/tickets/${username}?v=6`) const text = encodeURIComponent(golden ? TWEET_TEXT_GOLDEN : TWEET_TEXT) const { userData } = useConfData() const tweetUrl = `https://twitter.com/intent/tweet?url=${permalink}&via=supabase&text=${text}` @@ -43,48 +38,63 @@ export default function TicketActions({ username, golden = false }: Props) { } }, [downloadUrl]) + const ActionStyle = ({ children }: any) => { + return ( +
+ {children} +
+ ) + } + return ( <> - - {/* Tweet it! */} - - - {/* Share on LinkedIn */} - - { - if (imgReady) return + + +
+ +
+ Tweet it + + + + +
+ +
+ Share on Linkedin + + + + { + if (imgReady) return - e.preventDefault() - downloadLink.current = e.currentTarget - // Wait for the image download to finish - setLoading(true) - }} - download="ticket.png" - > - {loading ? : <>{/* Download */}} - + e.preventDefault() + downloadLink.current = e.currentTarget + // Wait for the image download to finish + setLoading(true) + }} + download="ticket.png" + className="flex items-center gap-2" + > +
+ +
+ Download + {loading ? : <>{/* Download */}} + + ) } diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-copy.module.css b/apps/www/components/LaunchWeek/Ticket/ticket-copy.module.css index f9a49f205fd..65007c67559 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-copy.module.css +++ b/apps/www/components/LaunchWeek/Ticket/ticket-copy.module.css @@ -117,7 +117,7 @@ display: none; } -.fade { +/* .fade { position: absolute; background: linear-gradient(90deg, rgba(37, 39, 41, 0%) 0%, #252729 100%); top: 0; @@ -128,7 +128,7 @@ display: block; border-radius: var(--space-2x); pointer-events: none; -} +} */ .desktop-copy.desktop-copy-disabled { display: none; diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx index 3ec81fbb729..997ada1729f 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-copy.tsx @@ -4,6 +4,7 @@ import { SITE_URL } from '~/lib/constants' import styleUtils from './utils.module.css' // import IconCopy from '~/components/LaunchWeek/Ticket/icons/icon-copy' import styles from './ticket-copy.module.css' +import { IconCopy, IconCheck } from 'ui' type Props = { username: string @@ -14,7 +15,7 @@ export default function TicketCopy({ username }: Props) { const [scrolling, setScrolling] = useState(false) const [copyEnabled, setCopyEnabled] = useState(false) const [copied, setCopied] = useState(false) - const scrollRef = useRef(null) + const scrollRef = useRef(null) const buttonRef = useRef(null) const url = `${SITE_URL}/tickets/${username}` useEffect(() => { @@ -23,20 +24,24 @@ export default function TicketCopy({ username }: Props) { } }, []) - const copiedText = ( - - Copied! - - ) + const copiedText = Copied! + + // background: none; + // outline: none; + // border: none; + // z-index: 2; + // border-radius: var(--space-2x); + // width: 40px; + // display: flex; + // align-items: center; + // justify-content: center; + // margin-right: -10px; const copyButton = ( ) return ( -
-
-
Your ticket URL:
-
- {copiedText} - {copyButton} +
+
+
Your ticket URL:
+
+

{ + if (!scrolling) { + setScrolling(true) + const animationFrame = requestAnimationFrame(() => { + const scrollableWidth = + (scrollRef.current?.scrollWidth || 0) - (scrollRef.current?.clientWidth || 0) + setFadeOpacity( + (scrollableWidth - (scrollRef.current?.scrollLeft || 0)) / + (scrollableWidth || 1) + ) + cancelAnimationFrame(animationFrame) + setScrolling(false) + }) + } + }} + > + {url} +

-
-
- { - if (!scrolling) { - setScrolling(true) - const animationFrame = requestAnimationFrame(() => { - const scrollableWidth = - (scrollRef.current?.scrollWidth || 0) - (scrollRef.current?.clientWidth || 0) - setFadeOpacity( - (scrollableWidth - (scrollRef.current?.scrollLeft || 0)) / (scrollableWidth || 1) - ) - cancelAnimationFrame(animationFrame) - setScrolling(false) - }) - } - }} - > - {url} - - -
- {copiedText} +
+ {copied && copiedText} {copyButton}
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-form.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-form.tsx index 1674bd7c2ba..8ded0d8cdf1 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-form.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-form.tsx @@ -62,41 +62,22 @@ export default function Form({ defaultUsername = '', setTicketGenerationState }: options: { redirectTo: `${SITE_ORIGIN}/launch-week/tickets` }, }) }} + className="flex flex-col items-center xl:block" > -
-
+
+
-

Only public info will be used.

+ {!username &&

Only public info will be used.

}
) diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-info.module.css b/apps/www/components/LaunchWeek/Ticket/ticket-info.module.css index 117922b8074..9611ea8d805 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-info.module.css +++ b/apps/www/components/LaunchWeek/Ticket/ticket-info.module.css @@ -1,6 +1,5 @@ .info { display: flex; - flex-direction: column; gap: 0px; margin-bottom: 64px; padding: 32px; @@ -12,13 +11,19 @@ grid-template-columns: 1fr 2fr; gap: calc(var(--space-4x) * var(--size)); font-size: calc(1em * var(--size)); */ - gap: calc(8px * var(--size)); padding: 0; margin-bottom: calc(32px * var(--size)); margin-left: calc(160px * var(--size)); } } +@media (max-width: 768px) { + .info { + flex-direction: column; + align-items: center; + } +} + .logo { /* margin-bottom: var(--space-6x); */ /* max-width: 96px; */ @@ -34,7 +39,7 @@ .date { /* text-transform: uppercase; */ - font-size: calc(18px * var(--size)); + /* font-size: calc(18px * var(--size)); */ color: var(--lw-secondary-color); } @@ -47,7 +52,7 @@ .date { margin-bottom: 0; line-height: 1.15; - font-size: calc(20px * var(--size)); + /* font-size: calc(20px * var(--size)); */ } } @@ -74,20 +79,9 @@ } */ .url { - margin-bottom: var(--space-12x); - font-size: calc(18px * var(--size)); - color: var(--lw-secondary-color); } .url-golden { color: var(--gold-primary); } - -@media (min-width: 768px) { - .url { - margin-bottom: 0; - font-size: calc(20px * var(--size)); - line-height: 1.15; - } -} diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-info.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-info.tsx index 0bf9bb1f9c8..8437aa6eddd 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-info.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-info.tsx @@ -11,10 +11,20 @@ export default function TicketInfo({ }) { return (
-
+
{DATE}
-
{siteUrlForTicket}
+
+
supabase.com/launch-week
+
) } diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-number.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-number.tsx index f5f80bbacc6..473a8749b03 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-number.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-number.tsx @@ -4,7 +4,7 @@ type Props = { export default function TicketNumber({ number }: Props) { const numDigits = `${number}`.length - const prefix = `000000`.slice(numDigits) + const prefix = `00000000`.slice(numDigits) return ( <> № {prefix} diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-profile.module.css b/apps/www/components/LaunchWeek/Ticket/ticket-profile.module.css index 0eda9d1fd2f..b4e44f9f345 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-profile.module.css +++ b/apps/www/components/LaunchWeek/Ticket/ticket-profile.module.css @@ -7,7 +7,7 @@ width: 60px; height: 60px; border-radius: 50%; - border: 1px solid #333; + border: 1px solid #999; } @media (min-width: 768px) { @@ -34,6 +34,7 @@ line-height: 1.15; letter-spacing: -0.02em; margin: 0; + max-width: 300px; } .name-golden { @@ -72,14 +73,25 @@ .empty-icon { display: block; - background: linear-gradient(135deg, #b4b6b8, #7f8183); + background: linear-gradient(320deg, #121212, #191919); width: 60px; } +.empty-icon--golden { + display: block; + background: linear-gradient(90deg, #fff9eb, #e2ba52); + width: 60px; + border: 1px solid #ecc154ad; +} + @media (min-width: 768px) { .empty-icon { width: calc(80px * var(--size)); } + + .empty-icon--golden { + width: calc(80px * var(--size)); + } } @keyframes loading { diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-profile.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-profile.tsx index 6df6e14961d..6a920bde73d 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-profile.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-profile.tsx @@ -29,21 +29,30 @@ export default function TicketProfile({ {username ? ( {username} ) : ( - {/* */} + + {/* */} + )}

{name || username || 'Your Name'} @@ -54,13 +63,21 @@ export default function TicketProfile({ [styles.show]: ticketGenerationState === 'loading', })} > - + {/* */} + {username ? `@${username}` : <>username} - {username || <>username} + + Supabase disconnected badge

diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css b/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css index 2ee2f212a38..83e5f1d92ac 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css +++ b/apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css @@ -9,49 +9,64 @@ border-radius: 16px; background-color: rgba(0, 0, 0, 1); - -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); /* background: linear-gradient(#fff000, var(--gold-secondary)); */ - border: 1px solid rgba(255, 255, 0, 0.629); + border: 1px solid #1c5f52; animation: blank-svg-shadow 2s ease-in-out infinite alternate; + + background-image: url('/images/launchweek/regular-ticket-background.png'); + background-repeat: no-repeat; + background-size: contain; } .visual--gold { - background-color: gold; /* border: 10px solid; border-image-slice: 1; border-width: 2px; border-radius: 16px; */ - background: linear-gradient(#fff000, var(--gold-secondary)); + background-color: linear-gradient(#fff000, #dea513); + background-color: #dea513; border: 1px solid rgba(255, 255, 0, 0.629); animation: svg-shadow 2s ease-in-out infinite alternate; + background-image: url('/images/launchweek/gold-ticket-background.png'); /* filter: drop-shadow(2.45223px 8.5828px 73.5669px #FFBD14); */ /* border-image-source: linear-gradient(to left, var(--gold-secondary), var(--gold-accent)); */ } +@media (max-width: 768px) { + .visual { + background-size: cover; + + background-image: url('/images/launchweek/2x-regular-ticket-background.jpg'); + } + + .visual--gold { + background-image: url('/images/launchweek/2x-gold-ticket-background.jpg'); + } +} + /* .svg-shadow { } */ @keyframes svg-shadow { from { - filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px var(--gold-primary)) - drop-shadow(0 0 20px var(--gold-accent)); + filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #d99f0c) drop-shadow(0 0 6px #d99f0c); } to { - filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 10px var(--gold-accent)) - drop-shadow(0 0 40px var(--gold-primary)); + filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #d99f0c) drop-shadow(0 0 9px #d99f0c); } } @keyframes blank-svg-shadow { from { - filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #12f28d) drop-shadow(0 0 20px #12f28d); + filter: drop-shadow(0 0 2px #1c5f52) drop-shadow(0 0 4px #1c5f52) drop-shadow(0 0 6px #1c5f52); } to { - filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 10px #12f28d) drop-shadow(0 0 40px #12f28d); + filter: drop-shadow(0 0 3px #1c5f52) drop-shadow(0 0 6px #1c5f52) drop-shadow(0 0 9px #1c5f52); } } @@ -105,22 +120,21 @@ position: absolute; top: 90px; width: 100%; - height: 100%; padding: 46px 29px; } @media (min-width: 768px) { .profile { - top: calc(48px * var(--size)); - padding: calc(44px * var(--size)) calc(160px * var(--size)) calc(44px * var(--size)) - calc(63px * var(--size)); + top: 50%; + transform: translateY(-50%); + padding-left: 65px; } } .info { z-index: 1; position: absolute; - bottom: 0; + bottom: 40px; width: 100%; height: 100%; display: flex; @@ -150,11 +164,11 @@ } .ticket-number { - font-weight: bold; font-size: calc(40px * var(--size)); line-height: 1; width: calc(330px * var(--size)); text-align: center; + background-clip: text; } .ticket-number-golden { diff --git a/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx b/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx index bec9aceced7..55278d18b5a 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket-visual.tsx @@ -25,15 +25,19 @@ export default function TicketVisual({ ticketGenerationState = 'default', golden = false, }: Props) { - // golden = true; + // golden = true const router = useRouter() const basePath = router.basePath + return ( <>
{/* {username ? : } */} @@ -49,7 +53,7 @@ export default function TicketVisual({
- +
{ticketNumber && ( -
+
diff --git a/apps/www/components/LaunchWeek/Ticket/ticket.module.css b/apps/www/components/LaunchWeek/Ticket/ticket.module.css index 4101fabfef0..aebe6c9c713 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket.module.css +++ b/apps/www/components/LaunchWeek/Ticket/ticket.module.css @@ -1,5 +1,4 @@ .hero { - font-size: 30px; line-height: 1.15; letter-spacing: -0.05em; font-weight: 400; @@ -9,7 +8,6 @@ @media (min-width: 768px) { .hero { - font-size: 30px; line-height: 1; /* font-weight: 800; */ /* max-width: 800px; */ @@ -111,7 +109,7 @@ } .ticket-actions { - margin-top: 30px; + margin-top: 70px; display: flex; align-items: center; justify-content: center; @@ -140,7 +138,6 @@ grid-template-columns: 1fr 1fr; } .hero { - font-size: 48px; text-align: left; } .description { @@ -153,9 +150,3 @@ border-radius: calc(16px * var(--size)); width: 100%; } - -@media screen and (min-width: 1280px) { - .ticket-layout { - padding: 0 40px; - } -} diff --git a/apps/www/components/LaunchWeek/Ticket/ticket.tsx b/apps/www/components/LaunchWeek/Ticket/ticket.tsx index 3af3b7eb048..4cc479bd591 100644 --- a/apps/www/components/LaunchWeek/Ticket/ticket.tsx +++ b/apps/www/components/LaunchWeek/Ticket/ticket.tsx @@ -45,53 +45,63 @@ export default function Ticket({ username, name, ticketNumber, sharePage, golden // scrollTo(divRef.current, -30) // } // }, [divRef, sharePage]) + // golden = true return ( -
-
-
-

+
+
+
+

{sharePage ? ( name ? ( - <>{name}’s Ticket +

{name}'s ticket

) : ( - <>{SITE_NAME} +

{SITE_NAME}

) + ) : golden ? ( +

Congratulations!

+ ) : ( +

You have a ticket!

+ )} +

+

+ {sharePage ? ( +

+ Join {name ?? 'us'} on {DATE}. +

) : golden ? ( <> - You won a golden ticket!
Claim it now! + You got a Golden ticket. This means you’re in, and you also won a Supabase goodie + bag. Tweet it to redeem your swag pack! + ) : username ? ( + <>Here is your unique ticket image for bragging on socials! ) : ( <> - You're in.
Make it unique. + This means you're in. Generate a unique ticket image with your GitHub profile, cause + a few of the lucky attendees will get a limited edition Supabase goodie bag. Make + sure you don't skip your chance. )}

-

- {sharePage ? ( - <> - Join {name ?? 'us'} on {DATE}. - - ) : golden ? ( - <>Claim your ticket with GitHub and Tweet it to redeem your swag pack! - ) : ( - <> - Generate a unique ticket image with
- your GitHub profile. - - )} -

{!sharePage ? ( - + <> + + ) : (
)} @@ -113,11 +123,11 @@ export default function Ticket({ username, name, ticketNumber, sharePage, golden {!sharePage && ( <> {username ? ( -
-
+
+
-
+
diff --git a/apps/www/components/Nav/Announcement.tsx b/apps/www/components/Nav/Announcement.tsx index cfd46ac631a..a85d9c524f2 100644 --- a/apps/www/components/Nav/Announcement.tsx +++ b/apps/www/components/Nav/Announcement.tsx @@ -58,27 +58,26 @@ const Announcement = () => { hover:to-green-1100 relative flex cursor-pointer flex-row space-x-3 - overflow-hidden bg-gradient-to-r from-green-900 + overflow-hidden text-white " >
- + {announcement.text} + {announcement.badge && ( -
+
{announcement.badge}
)} - {announcement.text} {announcement.cta} -
{ return ( <> - + {/* */}
@@ -363,6 +376,14 @@ const Nav = () => { Blog + + + Launch Week 6 + +

Products available:

diff --git a/apps/www/data/Announcement.json b/apps/www/data/Announcement.json index 5944138270f..a0ab4c9ff86 100644 --- a/apps/www/data/Announcement.json +++ b/apps/www/data/Announcement.json @@ -1,7 +1,7 @@ { - "show": false, - "text": "Auth UI Launch 🚀", - "cta": "Vote now", - "link": "https://www.producthunt.com/posts/pre-built-auth-ui-for-react", - "badge": "Product Hunt" + "show": true, + "text": "Launch Week 6 begins December 12th", + "cta": "Don't miss a thing, get your free ticket", + "link": "https://supabase.com/launch-week", + "badge": "Get a reminder" } diff --git a/apps/www/data/Footer.json b/apps/www/data/Footer.json index c67c52972bc..c0988c03dfe 100644 --- a/apps/www/data/Footer.json +++ b/apps/www/data/Footer.json @@ -111,7 +111,7 @@ }, { "text": "Careers", - "url": "https://about.supabase.com/careers" + "url": "/careers" }, { "text": "Company", diff --git a/apps/www/data/career.json b/apps/www/data/career.json new file mode 100644 index 00000000000..348acdee2c3 --- /dev/null +++ b/apps/www/data/career.json @@ -0,0 +1,148 @@ +{ + "company": [ + { + "number": "50+", + "text": "team members\n\nin 20+ countries" + }, + { + "number": "15+", + "text": "languages spoken" + }, + { + "number": "$116M", + "text": "in funding" + }, + { + "number": "8500+", + "text": "community members" + }, + { + "number": "1000+", + "text": "memes posted\n\n(and counting)" + } + ], + "humanPowered": [ + { + "icon": "egoless", + "title": "Egoless", + "text": "Willing to do the schlep, the team goals come first." + }, + { + "icon": "curious", + "title": "Polyglot", + "text": "Broad skillets. Growth mindset." + }, + { + "icon": "process", + "title": "Process Driven", + "text": "Engineer yourself out of the job." + }, + { + "icon": "honesty", + "title": "Intellectual Honesty", + "text": "Put our own biases aside." + }, + { + "icon": "flexibility", + "title": "Kaizen mindset", + "text": "Continuously improve all functions." + } + ], + "contributors": [ + "Isaiah-Hamilton", + "Hallidayo", + "mertovich", + "mikqi", + "florian-lefebvre", + "m4salah", + "carlosstenzel", + "M4Tdev", + "MisterJimson", + "aminamos", + "vasudeveloper001", + "erondpowell", + "alfredlua", + "saloni137", + "rubensdemelo", + "zernonia", + "timsonner", + "sureshdsk", + "owlnai" + ], + "benefits": [ + { + "icon": "remote", + "title": "Fully Remote", + "text": "We hire globally. We believe you can do your best work from anywhere. There are no Supabase offices, but we provide a co-working membership that you can use anywhere in the world." + }, + { + "icon": "tech_allowance", + "title": "Hardware Budget", + "text": "Use this budget for anything you need to set up your work environment from tech to office setup." + }, + { + "icon": "healthcare", + "title": "Health Benefits", + "text": "We provide 100% health coverage for employees and 80% for dependants. It's important to us that you & your family have health care covered." + }, + { + "icon": "offsite", + "title": "Annual Off-Sites", + "text": "We believe in the value of in-person time, so we all come together annually for a week. Each year we pick somewhere different in the world. It's a highlight of the year!" + }, + { + "icon": "flexibility", + "title": "Flexible Work", + "text": "Work remotely from anywhere in the world. We work in teams, but we work asynchronously. You know what you need to do and when it needs to be done." + }, + { + "icon": "education", + "title": "Professional Development", + "text": "An annual allowance to spend on professional development and education. Use this for courses, books, conferences, or anything that supports your continuous learning." + } + ], + "positions": [ + { + "title": "Elixir Engineers", + "location": "US time zone", + "employment": "Full-time", + "description": "Elixir is powering more and more backend" + }, + { + "title": "Elixir Engineers", + "location": "US time zone", + "employment": "Full-time", + "description": "Elixir is powering more and more backend" + }, + { + "title": "Elixir Engineers", + "location": "US time zone", + "employment": "Full-time", + "description": "Elixir is powering more and more backend" + }, + { + "title": "Elixir Engineers", + "location": "US time zone", + "employment": "Full-time", + "description": "Elixir is powering more and more backend" + } + ], + "hiring": [ + { + "title": "Recruiter Interview", + "text": "Chat with our recruiter to tell us about your career journey, professional goals and we'll share more about Supabase, the role & our recruitment process." + }, + { + "title": "Technical / Skill-based Interview", + "text": "Meet with the team lead. In this interview we'll aim to learn about your hard skills and problem solving approach." + }, + { + "title": "Another Technical / Skill-based Interview", + "text": "You'll either meet the department lead or peer. This interview will dive deeper into your hard skills and our expectations for this role." + }, + { + "title": "Final Founders Interview", + "text": "Our co-founders meet every candidate as the final step. Learn more about Supabase's values, mission and vision directly from them." + } + ] +} diff --git a/apps/www/lib/constants.ts b/apps/www/lib/constants.ts index f6c16abf7f4..e1ddd15bdd8 100644 --- a/apps/www/lib/constants.ts +++ b/apps/www/lib/constants.ts @@ -3,13 +3,16 @@ export const DESCRIPTION = 'The Open Source Alternative to Firebase.' // Launch Weeek export const SAMPLE_TICKET_NUMBER = 1234 -export const SITE_URL = process.env.NEXT_PUBLIC_VERCEL_URL - ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/launch-week` - : 'http://localhost:3000/launch-week' +export const SITE_URL = + process.env.NEXT_PUBLIC_VERCEL_ENV === 'production' + ? 'https://supabase.com/launch-week' + : process.env.NEXT_PUBLIC_VERCEL_URL + ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/launch-week` + : 'http://localhost:3000/launch-week' export const SITE_ORIGIN = new URL(SITE_URL).origin export const TWITTER_USER_NAME = 'supabase' export const COOKIE = 'supa-launch-week-ticke-user-id' -export const DATE = 'December 12 8:00 PT | 11:00 ET' +export const DATE = 'December 12th, 2022' export const TWEET_TEXT = 'Got my ticket for #SupaLaunchWeek 6!' export const TWEET_TEXT_GOLDEN = `Woop! I got a Golden Ticket for #SupaLaunchWeek 6! SupaSwag on its way!` export const SITE_NAME = 'Supabase' diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js index c370fc9ce29..ef43ecd11af 100644 --- a/apps/www/lib/redirects.js +++ b/apps/www/lib/redirects.js @@ -1560,4 +1560,9 @@ module.exports = [ source: '/forgot-password', destination: 'https://app.supabase.com/forgot-password', }, + { + permanent: true, + source: '/docs/guides/functions/examples', + destination: '/docs/guides/functions', + }, ] diff --git a/apps/www/lib/supabase.ts b/apps/www/lib/supabase.ts index e2572c7016c..29d235578b7 100644 --- a/apps/www/lib/supabase.ts +++ b/apps/www/lib/supabase.ts @@ -3,7 +3,7 @@ import { Database } from './database.types' const SUPABASE_URL = 'https://obuldanrptloktxcffvn.supabase.co' const SUPABASE_ANON_KEY = - 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYzNzY1NjAxNSwiZXhwIjoxOTUzMjMyMDE1fQ.0sfp_Njf7l4g-nOCF5a1TQE11rPqtz8Y10uctIetkBA' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk3MjcwMTIsImV4cCI6MTk4NTMwMzAxMn0.SZLqryz_-stF8dgzeVXmzZWPOqdOrBwqJROlFES8v3I' const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY) diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs index 62833ff5871..599600fb9cd 100644 --- a/apps/www/next.config.mjs +++ b/apps/www/next.config.mjs @@ -43,12 +43,13 @@ const nextConfig = { 'https://s3-us-west-2.amazonaws.com', 's3-us-west-2.amazonaws.com', 'user-images.githubusercontent.com', + 'pbs.twimg.com', ], }, async headers() { return [ { - source: '/(.*)', + source: '/:path*', headers: [ { key: 'Strict-Transport-Security', diff --git a/apps/www/package.json b/apps/www/package.json index b8808779fdf..17051852fdf 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -21,6 +21,7 @@ "@supabase/auth-ui-react": "^0.1.6", "@supabase/supabase-js": "^2.0.0", "classnames": "^2.3.1", + "cobe": "^0.6.2", "common": "*", "config": "*", "date-fns": "2.10.0", diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx index 81548c3f736..afe6bd7a1a1 100644 --- a/apps/www/pages/_app.tsx +++ b/apps/www/pages/_app.tsx @@ -7,6 +7,7 @@ import Meta from '~/components/Favicons' import '../styles/index.css' import { post } from './../lib/fetchWrapper' import { ThemeProvider } from '~/components/Providers' +import Head from 'next/head' export default function MyApp({ Component, pageProps }: AppProps) { const router = useRouter() @@ -36,6 +37,9 @@ export default function MyApp({ Component, pageProps }: AppProps) { return ( <> + + +