{extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 7385afd2d3d..2dcd089bbc1 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -553,8 +553,10 @@ export const functions = {
url: '/guides/functions/examples/connect-to-postgres',
items: [],
},
+ { name: 'Discord Bot', url: '/guides/functions/examples/discord-bot', items: [] },
{ name: 'GitHub Actions', url: '/guides/functions/examples/github-actions', items: [] },
{ name: 'OG Image', url: '/guides/functions/examples/og-image', items: [] },
+ { name: 'OpenAI', url: '/guides/functions/examples/openai', items: [] },
{ name: 'Storage Caching', url: '/guides/functions/examples/storage-caching', items: [] },
{ name: 'Stripe Webhooks', url: '/guides/functions/examples/stripe-webhooks', items: [] },
{ name: 'Telegram Bot', url: '/guides/functions/examples/telegram-bot', items: [] },
@@ -635,7 +637,7 @@ export const platform = {
url: undefined,
items: [
{ name: 'Access Control', url: '/guides/platform/access-control', items: [] },
- { name: 'Database Usage', url: '/guides/platform/database-usage', items: [] },
+ { name: 'Database Size', url: '/guides/platform/database-size', items: [] },
{ name: 'HTTP Status Codes', url: '/guides/platform/http-status-codes', items: [] },
{ name: 'Logging', url: '/guides/platform/logs', items: [] },
{ name: 'Metrics', url: '/guides/platform/metrics', items: [] },
@@ -821,6 +823,7 @@ export const integrations = {
url: undefined,
items: [
{ name: 'Estuary', url: '/guides/integrations/estuary', items: [] },
+ { name: 'OpenAI', url: '/guides/functions/examples/openai', items: [] },
{ name: 'pgMustard', url: '/guides/integrations/pgmustard', items: [] },
{ name: 'Prisma', url: '/guides/integrations/prisma', items: [] },
{ name: 'Sequin', url: '/guides/integrations/sequin', items: [] },
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 7e52d424832..c55ec3b6f0d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -38,7 +38,7 @@ const NavigationMenuGuideList: React.FC Sign in via magic link with your email below
diff --git a/studio/components/interfaces/Database/Roles/RolesList.tsx b/studio/components/interfaces/Database/Roles/RolesList.tsx
index 956fb1af750..c5059c26e05 100644
--- a/studio/components/interfaces/Database/Roles/RolesList.tsx
+++ b/studio/components/interfaces/Database/Roles/RolesList.tsx
@@ -1,17 +1,18 @@
+import { partition } from 'lodash'
import { FC, useState, useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PostgresRole } from '@supabase/postgres-meta'
import { Button, Input, IconPlus, IconSearch, IconX, Badge } from 'ui'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useStore } from 'hooks'
+import { checkPermissions, useStore } from 'hooks'
import SparkBar from 'components/ui/SparkBar'
import { FormHeader } from 'components/ui/Forms'
import RoleRow from './RoleRow'
-import DeleteRoleModal from './DeleteRoleModal'
import { SUPABASE_ROLES } from './Roles.constants'
-import { partition } from 'lodash'
import CreateRolePanel from './CreateRolePanel'
+import DeleteRoleModal from './DeleteRoleModal'
interface Props {
onSelectRole: (role: any) => void
@@ -26,6 +27,8 @@ const RolesList: FC
+ Supabase APIs are generated from your database, which means that we can use database
+ introspection to generate type-safe API definitions.
+
+ You can generate types from your database either through the{' '}
+
+ Supabase CLI
+
+ , or by downloading the types file via the button on the right and importing it in your
+ application within
+ {selectedLang === 'js' && (
+ }
+ onClick={generateTypes}
+ >
+ Generate and download types
+
+ )}
+
+ Remember to re-generate and download this file as you make changes to your tables.
+
@@ -19,7 +20,7 @@ Supabase Edge Functions allow you to go beyond HTTP and can connect to your Post
```ts index.ts
import * as postgres from 'https://deno.land/x/postgres@v0.14.2/mod.ts'
-import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
+import { serve } from 'https://deno.land/std@0.177.0/http/server.ts'
// Get the connection string from the environment variable "DATABASE_URL"
const databaseUrl = Deno.env.get('DATABASE_URL')!
diff --git a/apps/docs/pages/guides/functions/examples/discord-bot.mdx b/apps/docs/pages/guides/functions/examples/discord-bot.mdx
new file mode 100644
index 00000000000..281a2ac0e3e
--- /dev/null
+++ b/apps/docs/pages/guides/functions/examples/discord-bot.mdx
@@ -0,0 +1,178 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'examples-discord-bot',
+ title: 'Discord Bot',
+ description: 'Building a Slash Command Discord Bot with Edge Functions.',
+ video: 'https://www.youtube.com/v/J24Bvo_m7DM',
+}
+
+
- }
- onClick={() => setIsCreatingRole(true)}
- >
- Add role
-
+
+
+
+
+## Create an application on Discord Developer Portal
+
+1. Go to [https://discord.com/developers/applications](https://discord.com/developers/applications) (login using your discord account if required).
+2. Click on **New Application** button available at left side of your profile picture.
+3. Name your application and click on **Create**.
+4. Go to **Bot** section, click on **Add Bot**, and finally on **Yes, do it!** to confirm.
+
+That's it. A new application is created which will hold our Slash Command. Don't close the tab as we need information from this application page throughout our development.
+
+Before we can write some code, we need to curl a discord endpoint to register a Slash Command in our app.
+
+Fill `DISCORD_BOT_TOKEN` with the token available in the **Bot** section and `CLIENT_ID` with the ID available on the **General Information** section of the page and run the command on your terminal.
+
+```bash
+BOT_TOKEN='replace_me_with_bot_token'
+CLIENT_ID='replace_me_with_client_id'
+curl -X POST \
+-H 'Content-Type: application/json' \
+-H "Authorization: Bot $BOT_TOKEN" \
+-d '{"name":"hello","description":"Greet a person","options":[{"name":"name","description":"The name of the person","type":3,"required":true}]}' \
+"https://discord.com/api/v8/applications/$CLIENT_ID/commands"
+```
+
+This will register a Slash Command named `hello` that accepts a parameter named `name` of type string.
+
+## Code
+
+```ts index.ts
+// Sift is a small routing library that abstracts away details like starting a
+// listener on a port, and provides a simple function (serve) that has an API
+// to invoke a function for a specific path.
+import { json, serve, validateRequest } from 'sift'
+// TweetNaCl is a cryptography library that we use to verify requests
+// from Discord.
+import nacl from 'nacl'
+
+enum DiscordCommandType {
+ Ping = 1,
+ ApplicationCommand = 2,
+}
+
+// For all requests to "/" endpoint, we want to invoke home() handler.
+serve({
+ '/discord-bot': home,
+})
+
+// The main logic of the Discord Slash Command is defined in this function.
+async function home(request: Request) {
+ // validateRequest() ensures that a request is of POST method and
+ // has the following headers.
+ const { error } = await validateRequest(request, {
+ POST: {
+ headers: ['X-Signature-Ed25519', 'X-Signature-Timestamp'],
+ },
+ })
+ if (error) {
+ return json({ error: error.message }, { status: error.status })
+ }
+
+ // verifySignature() verifies if the request is coming from Discord.
+ // When the request's signature is not valid, we return a 401 and this is
+ // important as Discord sends invalid requests to test our verification.
+ const { valid, body } = await verifySignature(request)
+ if (!valid) {
+ return json(
+ { error: 'Invalid request' },
+ {
+ status: 401,
+ }
+ )
+ }
+
+ const { type = 0, data = { options: [] } } = JSON.parse(body)
+ // Discord performs Ping interactions to test our application.
+ // Type 1 in a request implies a Ping interaction.
+ if (type === DiscordCommandType.Ping) {
+ return json({
+ type: 1, // Type 1 in a response is a Pong interaction response type.
+ })
+ }
+
+ // Type 2 in a request is an ApplicationCommand interaction.
+ // It implies that a user has issued a command.
+ if (type === DiscordCommandType.ApplicationCommand) {
+ const { value } = data.options.find(
+ (option: { name: string; value: string }) => option.name === 'name'
+ )
+ return json({
+ // Type 4 responds with the below message retaining the user's
+ // input at the top.
+ type: 4,
+ data: {
+ content: `Hello, ${value}!`,
+ },
+ })
+ }
+
+ // We will return a bad request error as a valid Discord request
+ // shouldn't reach here.
+ return json({ error: 'bad request' }, { status: 400 })
+}
+
+/** Verify whether the request is coming from Discord. */
+async function verifySignature(request: Request): Promise<{ valid: boolean; body: string }> {
+ const PUBLIC_KEY = Deno.env.get('DISCORD_PUBLIC_KEY')!
+ // Discord sends these headers with every request.
+ const signature = request.headers.get('X-Signature-Ed25519')!
+ const timestamp = request.headers.get('X-Signature-Timestamp')!
+ const body = await request.text()
+ const valid = nacl.sign.detached.verify(
+ new TextEncoder().encode(timestamp + body),
+ hexToUint8Array(signature),
+ hexToUint8Array(PUBLIC_KEY)
+ )
+
+ return { valid, body }
+}
+
+/** Converts a hexadecimal string to Uint8Array. */
+function hexToUint8Array(hex: string) {
+ return new Uint8Array(hex.match(/.{1,2}/g)!.map((val) => parseInt(val, 16)))
+}
+```
+
+## Deploy the Slash Command Handler
+
+```bash
+supabase functions deploy discord-bot --no-verify-jwt
+supabase secrets set DISCORD_PUBLIC_KEY=your_public_key
+```
+
+Navigate to your Function details in the Supabase Dashboard to get your Endpoint URL.
+
+### Configure Discord application to use our URL as interactions endpoint URL
+
+1. Go back to your application (Greeter) page on Discord Developer Portal
+2. Fill **INTERACTIONS ENDPOINT URL** field with the URL and click on **Save Changes**.
+
+The application is now ready. Let's proceed to the next section to install it.
+
+## Install the Slash Command on your Discord server
+
+So to use the `hello` Slash Command, we need to install our Greeter application on our Discord server. Here are the steps:
+
+1. Go to **OAuth2** section of the Discord application page on Discord Developer Portal
+2. Select `applications.commands` scope and click on the **Copy** button below.
+3. Now paste and visit the URL on your browser. Select your server and click on **Authorize**.
+
+Open Discord, type `/Promise` and press **Enter**.
+
+## Run locally
+
+```bash
+supabase functions serve discord-bot --no-verify-jwt --env-file ./supabase/.env.local
+ngrok http 54321
+```
+
+export const Page = ({ children }) =>
+
+
+
+Use the [OpenAI completions API](https://platform.openai.com/docs/api-reference/completions) in Supabase Edge Functions.
+
+```ts index.ts
+import 'xhr_polyfill'
+import { serve } from 'std/server'
+import { CreateCompletionRequest } from 'openai'
+
+serve(async (req) => {
+ const { query } = await req.json()
+
+ const completionConfig: CreateCompletionRequest = {
+ model: 'text-davinci-003',
+ prompt: query,
+ max_tokens: 256,
+ temperature: 0,
+ stream: true,
+ }
+
+ return fetch('https://api.openai.com/v1/completions', {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${Deno.env.get('OPENAI_API_KEY')}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(completionConfig),
+ })
+})
+```
+
+## Run locally
+
+```bash
+supabase functions serve --env-file ./supabase/.env.local --no-verify-jwt
+```
+
+Use cURL or Postman to make a POST request to http://localhost:54321/functions/v1/openai.
+
+```bash
+curl -i --location --request POST http://localhost:54321/functions/v1/openai \
+ --header 'Content-Type: application/json' \
+ --data '{"query":"What is Supabase?"}'
+```
+
+## Deploy
+
+```bash
+supabase functions deploy --no-verify-jwt openai
+supabase secrets set --env-file ./supabase/.env.local
+```
+
+## Go deeper
+
+If you're interesting in learning how to use this to build your own ChatGPT, read [the blog post](/blog/chatgpt-supabase-docs) and check out the video:
+
+
+
+
+
+export const Page = ({ children }) => Supabase + Vue 3
-
+
{
const [user, setUser] = useState
}
>
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
index 46458d9a75d..df69111db50 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -60,6 +60,8 @@ const FunctionsList: FC
+ You need additional permissions to add a new role
+
+
- } onClick={() => onAddColumn()}>
- New column
-
+
)}
@@ -103,20 +129,59 @@ const ColumnList: FC
+
+ You need additional permissions to create columns
+
+
+
-
- } onClick={() => onAddTable()}>
- New table
-
+
)}
@@ -183,7 +207,62 @@ const TableList: FC
+
+ You need additional permissions to create tables
+
+
+
+
+ You need additional permissions to add wrappers
+
+
+
+ Generating types
+
+
+ }>
+ Documentation
+
+
+
+
+
+
+
+ )
+}
+
+const localSnippets = {
+ cliLogin: () => ({
+ title: 'Login via the CLI with your Personal Access Token',
+ bash: {
+ code: `
+npx supabase login
+`,
+ },
+ }),
+ generateTypes: (ref: string) => ({
+ title: 'Generate types',
+ bash: {
+ code: `
+npx supabase gen types typescript --project-id "${ref}" --schema public > types/supabase.ts
+`,
+ },
+ }),
+}
diff --git a/studio/components/interfaces/Docs/LangSelector.tsx b/studio/components/interfaces/Docs/LangSelector.tsx
new file mode 100644
index 00000000000..a0e05272874
--- /dev/null
+++ b/studio/components/interfaces/Docs/LangSelector.tsx
@@ -0,0 +1,110 @@
+import { FC } from 'react'
+import { Button, Dropdown, IconKey } from 'ui'
+import { checkPermissions } from 'hooks'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+
+import { showApiKey } from 'components/interfaces/Docs/Docs.types'
+
+const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' }
+
+interface Props {
+ selectedLang: string
+ setSelectedLang: (selectedLang: string) => void
+ showApiKey: showApiKey
+ setShowApiKey: (showApiKey: showApiKey) => void
+ apiKey: string | undefined
+ autoApiService: any
+}
+
+const LangSelector: FCsrc/index.ts.
+
+
+
+
+ )
+}
+
+export default LangSelector
diff --git a/studio/components/interfaces/Docs/ResourceContent.tsx b/studio/components/interfaces/Docs/ResourceContent.tsx
index a37ed884081..21e6a3dc5fb 100644
--- a/studio/components/interfaces/Docs/ResourceContent.tsx
+++ b/studio/components/interfaces/Docs/ResourceContent.tsx
@@ -2,6 +2,7 @@ import Snippets from 'components/to-be-cleaned/Docs/Snippets'
import CodeSnippet from 'components/to-be-cleaned/Docs/CodeSnippet'
import Param from 'components/to-be-cleaned/Docs/Param'
import Description from 'components/to-be-cleaned/Docs/Description'
+import { IconTable } from 'ui'
const ResourceContent = ({
autoApiService,
@@ -29,12 +30,18 @@ const ResourceContent = ({
return (
<>
-
+
+
+ {selectedLang == 'bash' && (
+
+
+
+ )}
+
+
+
- {resourceId}
+
+
+
-
@@ -87,8 +94,8 @@ const ResourceContent = ({
To read rows in
-
))}
-
-
+
{resourceId}, use the select method.
- - Learn more. + + Learn more
@@ -120,8 +127,11 @@ const ResourceContent = ({Supabase provides a wide range of filters.
- - Learn more. + + Learn more
@@ -147,8 +157,8 @@ const ResourceContent = ({insert will also return the replaced values for UPSERT.
- - Learn more. + + Learn more
@@ -183,8 +193,8 @@ const ResourceContent = ({update will also return the replaced values for UPDATE.
- - Learn more. + + Learn more
@@ -207,8 +217,8 @@ const ResourceContent = ({ default, so remember to specify your filters!- - Learn more. + + Learn more
@@ -230,8 +240,8 @@ const ResourceContent = ({ users depending on Row Level Security (RLS) policies.- - Learn more. + + Learn more
@@ -264,21 +274,6 @@ const ResourceContent = ({ - <> -- These docs are a work in progress! See our{' '} - - docs - {' '} - for the additional functionality Supabase has to offer. -
-Function Name
+{selectedFunction?.name}
+Endpoint URL
+{functionUrl}
+ +Created At
++ {selectedFunction?.created_at && + dayjs(selectedFunction.created_at).format('dddd, MMMM D, YYYY h:mm A')} +
+Last Updated At
++ {selectedFunction?.updated_at && + dayjs(selectedFunction.updated_at).format('dddd, MMMM D, YYYY h:mm A')} +
++ Make sure you have made a backup if you want to restore your edge function +
+{item.name}
+{functionUrl}
+ +{dayjs(item.created_at).format('DD MMM, YYYY HH:mm')}
+{dayjs(item.updated_at).fromNow()}
+{item.version}
+Cmd
+ ) : (
+ Ctrl
+ )
+
+ return (
+ + {isPaidTier ? ( + <> + Your disk has reached 95% capacity and has entered{' '} + + read-only mode + + . + + ) : ( + <> + You have exceeded the 500mb Database size limit and your project is now + in{' '} + + read-only mode + + . + + )} +
+ {isPaidTier ? ( + <> ++ For Pro and Enterprise projects,{' '} + + Disk Size expands automatically + {' '} + when it reaches 90% capacity, but can only occur once every six hours. + If the disk size has already expanded and then reaches 95% capacity + within 6 hours, then{' '} + + your disk will enter read-only mode + {' '} + until it can resize again after 6 hours. +
++ If you require help or need your disk changed to read/write mode so you + can delete data,{' '} + + + you can contact the support team + + + . +
+ + ) : ( ++ You can either{' '} + + reduce your disk usage below 500mb + {' '} + or{' '} + + + upgrade your project + + + . +
+ )} + + {!isPaidTier ? ( + + ) : ( + } + className="mt-3" + > + + Database storage management docs + + + )} +Added on {dayjs(key.created).format('MMM D, YYYY')}
- } - onClick={() => setSelectedKeyToRemove(key)} - /> +- This API provides an easy way to integrate with your Postgres database. The API - documentation below is specifically generated for your database. -
-- This is an auto-generating API, so as you make changes to your database, this - documentation will change too. -
-- Please note: if you make changes to a field (column) name or type, the API - interface for those fields will change correspondingly. Therefore, please make sure to - update your API implementation accordingly whenever you make changes to your Supabase - schema from the graphical interface. -
-The API URL for your project.
-Your API consists of both a RESTful interface and a Realtime interface.
-- For interacting with the Realtime streams, we provide client libraries that handle the - websockets. -
-+ This API provides an easy way to integrate with your Postgres database. The API + documentation below is specifically generated for your database. +
++ This is an auto-generating API, so as you make changes to your database, this + documentation will change too. +
++ Note: if you make changes to a field (column) name or type, the API interface for + those fields will change correspondingly. Therefore, please make sure to update your API + implementation accordingly whenever you make changes to your Supabase schema from the + graphical interface. +
+ +Read the reference documentation:
+The API URL for your project.
+Your API consists of both a RESTful interface and a Realtime interface.
++ For interacting with the Realtime streams, we provide client libraries that handle the + websockets. +
+- Supabase APIs are generated from your database, which means that we can use database - introspection to generate type-safe API definitions. -
-
- You can generate types from your database either through the{' '}
- Supabase CLI,
- or by downloading the types file via the button on the right and importing it in your
- application within src/index.ts.
-
{name}
- {format}
- {type}
- + You need additional permissions to update storage settings +
+ ) : ( + + )}{secondaryText}
Failed to retrieve API keys
+
Error connecting to API
{`${error || jsonSchemaError}`}
@@ -113,7 +108,7 @@ const DocView: FC