From 3a1d8ab8e43cd9a73cdbedeb894bf5e2da2f9631 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Wed, 2 Nov 2022 03:14:40 +0700 Subject: [PATCH] Fix all missing images --- apps/temp-docs/docs/architecture.mdx | 2 +- .../temp-docs/docs/guides/auth/auth-apple.mdx | 9 +- .../temp-docs/docs/guides/auth/auth-azure.mdx | 8 +- .../docs/guides/auth/auth-bitbucket.mdx | 9 +- .../docs/guides/auth/auth-captcha.mdx | 8 +- .../docs/guides/auth/auth-discord.mdx | 11 +- .../docs/guides/auth/auth-facebook.mdx | 9 +- .../docs/guides/auth/auth-github.mdx | 9 +- .../docs/guides/auth/auth-gitlab.mdx | 9 +- .../docs/guides/auth/auth-google.mdx | 9 +- .../docs/guides/auth/auth-keycloak.mdx | 12 +- .../docs/guides/auth/auth-linkedin.mdx | 9 +- .../docs/guides/auth/auth-notion.mdx | 15 +- .../temp-docs/docs/guides/auth/auth-slack.mdx | 9 +- .../docs/guides/auth/auth-spotify.mdx | 9 +- .../docs/guides/auth/auth-twitch.mdx | 19 +- .../docs/guides/auth/auth-twitter.mdx | 9 +- .../docs/guides/auth/auth-workos.mdx | 28 +- apps/temp-docs/docs/guides/auth/auth-zoom.mdx | 9 +- .../docs/guides/cli/managing-environments.mdx | 12 +- .../database/connecting-to-postgres.mdx | 33 +- .../docs/guides/hosting/overview.mdx | 2 +- .../docs/guides/integrations/appsmith.mdx | 18 +- .../docs/guides/integrations/auth0.mdx | 41 +- .../docs/guides/integrations/clerk.mdx | 14 +- .../docs/guides/integrations/dashibase.mdx | 22 +- .../docs/guides/integrations/directus.mdx | 6 +- .../docs/guides/integrations/draftbit.mdx | 32 +- .../docs/guides/integrations/pgmustard.mdx | 12 +- .../docs/guides/integrations/plasmic.mdx | 39 +- .../docs/guides/integrations/polyscale.mdx | 4 +- .../docs/guides/integrations/prisma.mdx | 6 +- .../docs/guides/integrations/sequin.mdx | 14 +- .../docs/guides/integrations/snaplet.mdx | 10 +- .../docs/guides/integrations/stytch.mdx | 45 +- .../docs/guides/integrations/supertokens.mdx | 21 +- .../docs/guides/integrations/vercel.mdx | 22 +- apps/temp-docs/docs/guides/with-angular.mdx | 4 +- apps/temp-docs/docs/guides/with-expo.mdx | 59 +-- apps/temp-docs/docs/guides/with-flutter.mdx | 11 +- .../docs/guides/with-ionic-angular.mdx | 9 +- .../docs/guides/with-ionic-react.mdx | 13 +- apps/temp-docs/docs/guides/with-ionic-vue.mdx | 36 +- apps/temp-docs/docs/guides/with-nuxt-3.mdx | 33 +- apps/temp-docs/docs/guides/with-react.mdx | 28 +- apps/temp-docs/docs/guides/with-redwoodjs.mdx | 2 +- apps/temp-docs/docs/guides/with-solidjs.mdx | 16 +- apps/temp-docs/docs/guides/with-svelte.mdx | 23 +- apps/temp-docs/docs/guides/with-sveltekit.mdx | 454 +++++++++--------- apps/temp-docs/docs/guides/with-vue-3.mdx | 29 +- 50 files changed, 504 insertions(+), 768 deletions(-) diff --git a/apps/temp-docs/docs/architecture.mdx b/apps/temp-docs/docs/architecture.mdx index 235460308c4..57510a2789e 100644 --- a/apps/temp-docs/docs/architecture.mdx +++ b/apps/temp-docs/docs/architecture.mdx @@ -16,7 +16,7 @@ while maintaining the scalability required to go beyond it. Each Supabase project consists of several tools: -![Supabase Architecture](/img/supabase-architecture.png) +![Supabase Architecture](/docs/img/supabase-architecture.png) ### PostgreSQL (Database) diff --git a/apps/temp-docs/docs/guides/auth/auth-apple.mdx b/apps/temp-docs/docs/guides/auth/auth-apple.mdx index 524212403b3..5f1030a2529 100644 --- a/apps/temp-docs/docs/guides/auth/auth-apple.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-apple.mdx @@ -25,7 +25,7 @@ Apple OAuth consists of six broad steps: - Go to [developer.apple.com](https://developer.apple.com). - Click on `Account` at the top right to log in. -![Apple Developer Portal.](/img/guides/auth-apple/apple-developer-portal.png) +![Apple Developer Portal.](/docs/img/guides/auth-apple/apple-developer-portal.png) ## Obtain an App ID @@ -69,12 +69,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Configure your Services ID diff --git a/apps/temp-docs/docs/guides/auth/auth-azure.mdx b/apps/temp-docs/docs/guides/auth/auth-azure.mdx index 7b9fd0093bf..bb1d1ed212a 100644 --- a/apps/temp-docs/docs/guides/auth/auth-azure.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-azure.mdx @@ -32,7 +32,7 @@ Azure OAuth consists of four broad steps: - The redirect / callback URI should look like this: `https://.supabase.co/auth/v1/callback` - Click "Register" at the bottom of the form. -![Register an application.](/img/guides/auth-azure/azure-register-app.png) +![Register an application.](/docs/img/guides/auth-azure/azure-register-app.png) ## Obtain a Client ID @@ -40,7 +40,7 @@ This will serve as the `client_id` when you make API calls to authenticate the u - Once your app has been registered, the client id can be found under the [list of app registrations](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) under the column titled "Application (client) ID". -![Obtain the client id](/img/guides/auth-azure/azure-client-id.png) +![Obtain the client id](/docs/img/guides/auth-azure/azure-client-id.png) ## Obtain a Secret ID @@ -52,7 +52,7 @@ This will serve as the `client_secret` when you make API calls to authenticate t - Enter a description and choose your preferred expiry for the secret. - Once the secret is generated, save the `value` (not the secret ID). -![Obtain the client secret](/img/guides/auth-azure/azure-client-secret.png) +![Obtain the client secret](/docs/img/guides/auth-azure/azure-client-secret.png) ## Obtain the Tenant URL @@ -61,7 +61,7 @@ This will allow your users to use your custom Azure login page when logging in. - Select the Directory (Tenant) ID value. - The Azure Tenant URL should look like this: `https://login.microsoftonline.com/` -![Obtain the tenant url](/img/guides/auth-azure/azure-tenant-url.png) +![Obtain the tenant url](/docs/img/guides/auth-azure/azure-tenant-url.png) ## Add login code to your client app diff --git a/apps/temp-docs/docs/guides/auth/auth-bitbucket.mdx b/apps/temp-docs/docs/guides/auth/auth-bitbucket.mdx index d7e279cd3c3..2a3c37af2c9 100644 --- a/apps/temp-docs/docs/guides/auth/auth-bitbucket.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-bitbucket.mdx @@ -22,7 +22,7 @@ Setting up Bitbucket logins for your application consists of 3 parts: - Go to [bitbucket.org](https://bitbucket.org/). - Click on `Login` at the top right to log in. -![Bitbucket Developer Portal.](/img/guides/auth-bitbucket/bitbucket-portal.png) +![Bitbucket Developer Portal.](/docs/img/guides/auth-bitbucket/bitbucket-portal.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Bitbucket OAuth app diff --git a/apps/temp-docs/docs/guides/auth/auth-captcha.mdx b/apps/temp-docs/docs/guides/auth/auth-captcha.mdx index 65837976a17..1e5cc889fe3 100644 --- a/apps/temp-docs/docs/guides/auth/auth-captcha.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-captcha.mdx @@ -17,21 +17,21 @@ Go to the [hCaptcha](https://www.hcaptcha.com/) website and sign up for an accou If you have already signed up and didn't copy this information from the welcome page, you can get the **Secret key** from the settings page. -![site_secret_settings.png](/img/guides/auth-captcha/site_secret_settings.png) +![site_secret_settings.png](/docs/img/guides/auth-captcha/site_secret_settings.png) The **Sitekey** can be found in the **Settings** of the active site you created. -![sites_dashboard.png](/img/guides/auth-captcha/sites_dashboard.png) +![sites_dashboard.png](/docs/img/guides/auth-captcha/sites_dashboard.png) In the Settings page, look for the **Sitekey** section and copy the key. -![sitekey_settings.png](/img/guides/auth-captcha/sitekey_settings.png) +![sitekey_settings.png](/docs/img/guides/auth-captcha/sitekey_settings.png) ### Enable hCaptcha protection for your Supabase project Navigate to the **[Authentication](https://app.supabase.com/project/_/auth/settings)** page in the Supabase Dashboard and find the **Enable hCaptcha protection** toggle under the **Security and Protection** section. -![supabase_auth_general_settings.png](/img/guides/auth-captcha/supabase_auth_general_settings.png) +![supabase_auth_general_settings.png](/docs/img/guides/auth-captcha/supabase_auth_general_settings.png) Enter your hCaptcha **Secret key** and click **Save**. diff --git a/apps/temp-docs/docs/guides/auth/auth-discord.mdx b/apps/temp-docs/docs/guides/auth/auth-discord.mdx index 11193ec9c8a..0707d391610 100644 --- a/apps/temp-docs/docs/guides/auth/auth-discord.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-discord.mdx @@ -22,11 +22,11 @@ Setting up Discord logins for your application consists of 3 parts: - Go to [discord.com](https://discord.com/). - Click on `Login` at the top right to log in. -![Discord Portal.](/img/guides/auth-discord/discord-portal.png) +![Discord Portal.](/docs/img/guides/auth-discord/discord-portal.png) - Once logged in, go to [discord.com/developers](https://discord.com/developers). -![Discord Portal.](/img/guides/auth-discord/discord-developer-portal.png) +![Discord Portal.](/docs/img/guides/auth-discord/discord-developer-portal.png) ## Find your callback URL @@ -41,12 +41,7 @@ In the next step you require a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Discord Application diff --git a/apps/temp-docs/docs/guides/auth/auth-facebook.mdx b/apps/temp-docs/docs/guides/auth/auth-facebook.mdx index 3cb6ac68947..472e1fa21ef 100644 --- a/apps/temp-docs/docs/guides/auth/auth-facebook.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-facebook.mdx @@ -22,7 +22,7 @@ Setting up Facebook logins for your application consists of 3 parts: - Go to [developers.facebook.com](https://developers.facebook.com). - Click on `Log In` at the top right to log in. -![Facebook Developer Portal.](/img/guides/auth-facebook/facebook-portal.png) +![Facebook Developer Portal.](/docs/img/guides/auth-facebook/facebook-portal.png) ## Create a Facebook App @@ -45,12 +45,7 @@ The next step requires a callback URI, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Set up FaceBook Login for your Facebook App diff --git a/apps/temp-docs/docs/guides/auth/auth-github.mdx b/apps/temp-docs/docs/guides/auth/auth-github.mdx index 471d37935b1..493a73123a3 100644 --- a/apps/temp-docs/docs/guides/auth/auth-github.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-github.mdx @@ -22,7 +22,7 @@ Setting up GitHub logins for your application consists of 3 parts: - Go to [github.com](https://github.com). - Click on `Sign In` at the top right to log in. -![GitHub Developer Portal.](/img/guides/auth-github/github-portal.png) +![GitHub Developer Portal.](/docs/img/guides/auth-github/github-portal.png) ## Create a GitHub Oauth App @@ -46,12 +46,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Register a new OAuth application diff --git a/apps/temp-docs/docs/guides/auth/auth-gitlab.mdx b/apps/temp-docs/docs/guides/auth/auth-gitlab.mdx index 9f5bfd29360..7942bfd6cfd 100644 --- a/apps/temp-docs/docs/guides/auth/auth-gitlab.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-gitlab.mdx @@ -22,7 +22,7 @@ Setting up GitLab logins for your application consists of 3 parts: - Go to [gitlab.com](https://gitlab.com). - Click on `Login` at the top right to log in. -![GitLab Developer Portal.](/img/guides/auth-gitlab/gitlab-portal.png) +![GitLab Developer Portal.](/docs/img/guides/auth-gitlab/gitlab-portal.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create your GitLab Application diff --git a/apps/temp-docs/docs/guides/auth/auth-google.mdx b/apps/temp-docs/docs/guides/auth/auth-google.mdx index 051ce6cab03..90777b39a6b 100644 --- a/apps/temp-docs/docs/guides/auth/auth-google.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-google.mdx @@ -22,7 +22,7 @@ Setting up Google logins for your application consists of 3 parts: - Go to [cloud.google.com](https://cloud.google.com). - Click on `Sign in` at the top right to log in. -![Google Developer Portal.](/img/guides/auth-google/google-portal.png) +![Google Developer Portal.](/docs/img/guides/auth-google/google-portal.png) ## Create a Google Cloud Platform Project @@ -60,12 +60,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create your Google credentials diff --git a/apps/temp-docs/docs/guides/auth/auth-keycloak.mdx b/apps/temp-docs/docs/guides/auth/auth-keycloak.mdx index 76e536063c3..51099a0653a 100644 --- a/apps/temp-docs/docs/guides/auth/auth-keycloak.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-keycloak.mdx @@ -34,13 +34,13 @@ Keycloak OAuth consists of five broad steps: - After you've added a new realm, you can retrieve the `issuer` from the "OpenID Endpoint Configuration" endpoint. The `issuer` will be used as the `Keycloak URL`. - You can find this endpoint from the realm settings under the "General Tab" or visit [`http://localhost:8080/realms/my_realm_name/.well-known/openid-configuration`](http://localhost:8080/realms/my_realm_name/.well-known/openid-configuration) -![Add a Keycloak Realm.](/img/guides/auth-keycloak/keycloak-create-realm.png) +![Add a Keycloak Realm.](/docs/img/guides/auth-keycloak/keycloak-create-realm.png) ## Create a Keycloak Client The "Client ID" of the created client will serve as the `client_id` when you make API calls to authenticate the user. -![Add a Keycloak client](/img/guides/auth-keycloak/keycloak-add-client.png) +![Add a Keycloak client](/docs/img/guides/auth-keycloak/keycloak-add-client.png) ## Client Settings @@ -50,15 +50,15 @@ After you've created the client successfully, ensure that you set the following 2. The "Access Type" should be set to "confidential". 3. The "Valid Redirect URIs" should be set to: `https://.supabase.co/auth/v1/callback`. -![Obtain the client id, set the client protocol and access type](/img/guides/auth-keycloak/keycloak-client-id.png) -![Set redirect uri](/img/guides/auth-keycloak/keycloak-redirect-uri.png) +![Obtain the client id, set the client protocol and access type](/docs/img/guides/auth-keycloak/keycloak-client-id.png) +![Set redirect uri](/docs/img/guides/auth-keycloak/keycloak-redirect-uri.png) ## Obtain the Client Secret This will serve as the `client_secret` when you make API calls to authenticate the user. Under the "Credentials" tab, the `Secret` value will be used as the `client secret`. -![Obtain the client secret](/img/guides/auth-keycloak/keycloak-client-secret.png) +![Obtain the client secret](/docs/img/guides/auth-keycloak/keycloak-client-secret.png) ## Add login code to your client app @@ -83,4 +83,4 @@ async function signout() { ## Resources - You can find the keycloak openid endpoint configuration under the realm settings. - ![Keycloak OpenID Endpoint Configuration](/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png) + ![Keycloak OpenID Endpoint Configuration](/docs/img/guides/auth-keycloak/keycloak-openid-endpoint-config.png) diff --git a/apps/temp-docs/docs/guides/auth/auth-linkedin.mdx b/apps/temp-docs/docs/guides/auth/auth-linkedin.mdx index 207d19c0439..ac5feca9617 100644 --- a/apps/temp-docs/docs/guides/auth/auth-linkedin.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-linkedin.mdx @@ -22,7 +22,7 @@ Setting up LinkedIn logins for your application consists of 3 parts: - Go to [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps). - Log in (if necessary.) -![LinkedIn Developer Portal](/img/guides/auth-linkedin/linkedin_developers_page.png) +![LinkedIn Developer Portal](/docs/img/guides/auth-linkedin/linkedin_developers_page.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a LinkedIn OAuth app diff --git a/apps/temp-docs/docs/guides/auth/auth-notion.mdx b/apps/temp-docs/docs/guides/auth/auth-notion.mdx index 31b5d76e778..6f920495943 100644 --- a/apps/temp-docs/docs/guides/auth/auth-notion.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-notion.mdx @@ -22,20 +22,20 @@ Setting up Notion logins for your application consists of 3 parts: - Go to [developers.notion.com](https://developers.notion.com/). - Click "View my integrations" and login. -![notion.so](/img/guides/auth-notion/notion.png) +![notion.so](/docs/img/guides/auth-notion/notion.png) - Once logged in, go to [notion.so/my-integrations](https://notion.so/my-integrations) and create a new integration. - When creating your integration, ensure that you select "Public integration" under "Integration type" and "Read user information including email addresses" under "Capabilities". - You will need to add a redirect uri, see [Add the redirect uri](#add-the-redirect-uri) - Once you've filled in the necessary fields, click "Submit" to finish creating the integration. -![notion.so](/img/guides/auth-notion/notion-developer.png) +![notion.so](/docs/img/guides/auth-notion/notion-developer.png) ## Add the redirect URI - After selecting "Public integration", you should see an option to add "Redirect URIs". -![notion.so](/img/guides/auth-notion/notion-redirect-uri.png) +![notion.so](/docs/img/guides/auth-notion/notion-redirect-uri.png) You can retrieve the redirect uri with the following steps: @@ -48,19 +48,14 @@ You can retrieve the redirect uri with the following steps: Your redirect uri should look like the following: `https://.supabase.co/auth/v1/callback` ## Add your Notion credentials into your Supabase Project - Once you've created your notion integration, you should be able to retrieve the "OAuth client ID" and "OAuth client secret" from the "OAuth Domain and URIs" tab. -![notion.so](/img/guides/auth-notion/notion-creds.png) +![notion.so](/docs/img/guides/auth-notion/notion-creds.png) - Go to your [Supabase Project Dashboard](https://app.supabase.com) - In the left sidebar, click the `Authentication` icon (near the top) diff --git a/apps/temp-docs/docs/guides/auth/auth-slack.mdx b/apps/temp-docs/docs/guides/auth/auth-slack.mdx index c00e377747b..0c8a9f3d228 100644 --- a/apps/temp-docs/docs/guides/auth/auth-slack.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-slack.mdx @@ -22,7 +22,7 @@ Setting up Slack logins for your application consists of 3 parts: - Go to [api.slack.com](https://api.slack.com/apps). - Click on `Your Apps` at the top right to log in. -![Slack Developer Portal.](/img/guides/auth-slack/slack-portal.png) +![Slack Developer Portal.](/docs/img/guides/auth-slack/slack-portal.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Slack OAuth app diff --git a/apps/temp-docs/docs/guides/auth/auth-spotify.mdx b/apps/temp-docs/docs/guides/auth/auth-spotify.mdx index cf282bea973..ed836ebba44 100644 --- a/apps/temp-docs/docs/guides/auth/auth-spotify.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-spotify.mdx @@ -22,7 +22,7 @@ Setting up Spotify logins for your application consists of 3 parts: - Log into [Spotify](https://spotify.com) - Access the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard) -![Spotify Developer Portal.](/img/guides/auth-spotify/spotify-portal.png) +![Spotify Developer Portal.](/docs/img/guides/auth-spotify/spotify-portal.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Spotify OAuth app diff --git a/apps/temp-docs/docs/guides/auth/auth-twitch.mdx b/apps/temp-docs/docs/guides/auth/auth-twitch.mdx index 56a67e6c82c..3be91d87aee 100644 --- a/apps/temp-docs/docs/guides/auth/auth-twitch.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-twitch.mdx @@ -23,11 +23,11 @@ Setting up Twitch logins for your application consists of 3 parts: - Click on `Log in with Twitch` at the top right to log in. - If you have not already enabled 2-Factor Authentication for your Twitch Account, you will need to do that at [Twitch Security Settings](https://www.twitch.tv/settings/security) before you can continue. -![Twitch Developer Page](/img/guides/auth-twitch/twitch-developer-page.png) +![Twitch Developer Page](/docs/img/guides/auth-twitch/twitch-developer-page.png) - Once logged in, go to the [Twitch Developer Console](https://dev.twitch.tv/console). -![Twitch Developer Console](/img/guides/auth-twitch/twitch-console.png) +![Twitch Developer Console](/docs/img/guides/auth-twitch/twitch-console.png) ## Find your callback URL @@ -42,21 +42,16 @@ In the next step you require a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Twitch Application -![Twitch Developer Console](/img/guides/auth-twitch/twitch-console.png) +![Twitch Developer Console](/docs/img/guides/auth-twitch/twitch-console.png) - Click on `+ Register Your Application` at the top right. -![Register Application](/img/guides/auth-twitch/twitch-register-your-application.png) +![Register Application](/docs/img/guides/auth-twitch/twitch-register-your-application.png) - Enter the name of your application. - Type or paste your `OAuth Redirect URL` (the callback URL from the previous step.) @@ -67,13 +62,13 @@ In the next step you require a callback URL, which looks like this: - Click `Manage` at the right of your application entry in the list. -![Twitch Applications List](/img/guides/auth-twitch/twitch-applications-list.png) +![Twitch Applications List](/docs/img/guides/auth-twitch/twitch-applications-list.png) - Copy your Client ID. - Click `New Secret` to create a new Client Secret. - Copy your Client Secret. -![Get Client ID and Secret](/img/guides/auth-twitch/twitch-get-keys.png) +![Get Client ID and Secret](/docs/img/guides/auth-twitch/twitch-get-keys.png) ## Add your Twitch credentials into your Supabase Project diff --git a/apps/temp-docs/docs/guides/auth/auth-twitter.mdx b/apps/temp-docs/docs/guides/auth/auth-twitter.mdx index 88448a12eeb..e385d49cc5e 100644 --- a/apps/temp-docs/docs/guides/auth/auth-twitter.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-twitter.mdx @@ -22,7 +22,7 @@ Setting up Twitter logins for your application consists of 3 parts: - Go to [developer.twitter.com](https://developer.twitter.com). - Click on `Sign in` at the top right to log in. -![Twitter Developer Portal.](/img/guides/auth-twitter/twitter-portal.png) +![Twitter Developer Portal.](/docs/img/guides/auth-twitter/twitter-portal.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Twitter OAuth app diff --git a/apps/temp-docs/docs/guides/auth/auth-workos.mdx b/apps/temp-docs/docs/guides/auth/auth-workos.mdx index 422666106ad..110e707652e 100644 --- a/apps/temp-docs/docs/guides/auth/auth-workos.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-workos.mdx @@ -24,26 +24,26 @@ The procedure consists of five broad steps: ## Create a WorkOS Organization Log in to the dashboard and hop over to the Organizations tab to create and organization -![Create an Organization](/img/guides/auth-workos/workos-create-organization.png) +![Create an Organization](/docs/img/guides/auth-workos/workos-create-organization.png) ## Obtain the Client ID and configure Redirect URI Head over to the Configuration tab and configure the redirect URI.The redirect URI should look like `https://.supabase.co/auth/v1/callback` Note that this is distinct from the redirect URI referred to in the Supabase dashboard -![Fetch Client ID and configure Redirect URI](/img/guides/auth-workos/workos-clientid-redirect-uri.png) +![Fetch Client ID and configure Redirect URI](/docs/img/guides/auth-workos/workos-clientid-redirect-uri.png) ## Obtain the WorkOS Secret Head over to the API Keys page and obtain the secret key. -![WorkOS Secret Key](/img/guides/auth-workos/workos-secret-key.png) +![WorkOS Secret Key](/docs/img/guides/auth-workos/workos-secret-key.png) ## Connect a WorkOS Supported Identity Provider Set up the identity provider by visiting the setup link. -![Visiting the setup link](/img/guides/auth-workos/workos-setup-identity-provider.png) +![Visiting the setup link](/docs/img/guides/auth-workos/workos-setup-identity-provider.png) You can pick between any one of the many identity providers that WorkOS supports. @@ -62,18 +62,16 @@ When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/aut ```js async function signInWithWorkOS() { - const { data, error } = await supabase.auth.signInWithOAuth( - { - provider: 'workos', - options: { - queryParams: { - connection: '', - organization: '', - } - } + const { data, error } = await supabase.auth.signInWithOAuth({ + provider: 'workos', + options: { + queryParams: { + connection: '', + organization: '', + }, }, - ) + }) } ``` diff --git a/apps/temp-docs/docs/guides/auth/auth-zoom.mdx b/apps/temp-docs/docs/guides/auth/auth-zoom.mdx index 98763329bc8..897df230e41 100644 --- a/apps/temp-docs/docs/guides/auth/auth-zoom.mdx +++ b/apps/temp-docs/docs/guides/auth/auth-zoom.mdx @@ -22,7 +22,7 @@ Setting up Zoom logins for your application consists of 3 parts: - Go to [marketplace.zoom.us](https://marketplace.zoom.us/). - Click on `Sign In` at the top right to log in. -![Zoom Developer Portal.](/img/guides/auth-zoom/zoom-portal.png) +![Zoom Developer Portal.](/docs/img/guides/auth-zoom/zoom-portal.png) ## Find your callback URL @@ -37,12 +37,7 @@ The next step requires a callback URL, which looks like this: - Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`. ## Create a Zoom Oauth App diff --git a/apps/temp-docs/docs/guides/cli/managing-environments.mdx b/apps/temp-docs/docs/guides/cli/managing-environments.mdx index a358b1557d3..573317d4f9d 100644 --- a/apps/temp-docs/docs/guides/cli/managing-environments.mdx +++ b/apps/temp-docs/docs/guides/cli/managing-environments.mdx @@ -68,7 +68,7 @@ There are two ways to make schema changes: ### Manual migration - + Create a new migration script by running: @@ -106,7 +106,7 @@ This allows you to pipe in an existing script from another file or stdout: Unlike manual migrations, auto schema diff creates a new migration script from changes **already** applied to your local database. - + Create an `employees` table under the `public` schema using Studio UI, accessible at [localhost:54323](http://localhost:54323/) by default. @@ -163,7 +163,7 @@ Without the `-f` file flag, the output is written to stdout by default. In a production environment, we recommend using a CI/CD pipeline to deploy new migrations with GitHub Actions rather than deploying from your local machine. -![Deploy migration](/img/guides/cli/cicd-github.png) +![Deploy migration](/docs/img/guides/cli/cicd-github.png) This example uses two Supabase projects, one for production and one for staging. @@ -308,7 +308,7 @@ Commit these files to git and push to your `main` branch on GitHub. Update these When configured correctly, your repository will have CI and Release workflows that trigger on new commits pushed to `main` and `develop` branches. -![Correctly configured repo](/img/guides/cli/ci-main.png) +![Correctly configured repo](/docs/img/guides/cli/ci-main.png) ### Open a PR with new migration @@ -331,7 +331,7 @@ Once the test error is resolved, merge this PR and watch the deployment in actio After verifying your staging project has successfully migrated, create another PR from `develop` to `main` and merge it to deploy the migration to the production project. - + The `release` job applies all new migration scripts merged in `supabase/migrations` directory to a linked Supabase project. You can control which project the job links to via `PROJECT_ID` environment variable. @@ -400,7 +400,7 @@ Apart from tables, you also need to reassign owner of other entities using their Sometimes your teammate may merge a new migration file to git main branch, and now you need to rebase your local schema changes on top. - + We can handle this scenario gracefully by renaming your old migration file with a new timestamp. diff --git a/apps/temp-docs/docs/guides/database/connecting-to-postgres.mdx b/apps/temp-docs/docs/guides/database/connecting-to-postgres.mdx index b059d3dbc67..f87a954de6d 100644 --- a/apps/temp-docs/docs/guides/database/connecting-to-postgres.mdx +++ b/apps/temp-docs/docs/guides/database/connecting-to-postgres.mdx @@ -43,12 +43,7 @@ You cannot manage the database schema via the API (for security reasons). To do You can find the API URL and Keys in the [Dashboard](https://app.supabase.com/project/_/settings/api). ## Direct connections @@ -62,12 +57,7 @@ Every Supabase project provides a full Postgres database. You can connect to the 3. Find your Connection Info and Connection String. Direct connections are on port `5432`. ## Connection Pool @@ -81,7 +71,7 @@ A "connection pool" is a system (external to Postgres) which manages connections When a client makes a request, PgBouncer "allocates" an available connection to the client. When the client transaction or session is completed the connection is returned to the pool and is free to be used by another client. -![Connection pooling](/img/guides/database/connection-pool.png) +![Connection pooling](/docs/img/guides/database/connection-pool.png) ### Pool modes @@ -112,12 +102,7 @@ This is the most granular option. Connections are returned to the pool after eve 3. Find your Connection Info and Connection String. Connection pooling is on port `6543`. ## Connecting with SSL @@ -125,7 +110,7 @@ This is the most granular option. Connections are returned to the pool after eve Use this when connecting to your database to prevent snooping and man-in-the-middle attacks. Obtain your connection info and Server root certificate from your application’s dashboard. -![Connection Info and Certificate.](/img/guides/database/connection-info-cert.png) +![Connection Info and Certificate.](/docs/img/guides/database/connection-info-cert.png) Assuming you’ve downloaded your certificate and it’s located at `$HOME/Downloads/prod-ca-2021.cer`, and your Host address is `db.abcdefghijklm.supabase.co` you can connect to the DB with SSL enabled as illustrated below: @@ -138,13 +123,13 @@ psql "sslmode=verify-full sslrootcert=$HOME/Downloads/prod-ca-2021.cer host=db.a 2. With `pgAdmin` a. Register a new Postgres server - ![Register a new postgres server.](/img/guides/database/register-server-pgAdmin.png) + ![Register a new postgres server.](/docs/img/guides/database/register-server-pgAdmin.png) b. Name your server to your liking and add the connection info. - ![Name Postgres Server.](/img/guides/database/name-pg-server.png) - ![Add Connection Info.](/img/guides/database/add-pg-server-conn-info.png) + ![Name Postgres Server.](/docs/img/guides/database/name-pg-server.png) + ![Add Connection Info.](/docs/img/guides/database/add-pg-server-conn-info.png) 3. Navigate to the SSL tab and change the SSL mode to Require. Next navigate to the Root certificate input, it will open up a file-picker modal. Select the certificate you downloaded from your Supabase dashboard and save the server details. PgAdmin should now be able to connect to your Postgres via SSL. - ![Add Connection Info.](/img/guides/database/add-ssl-config.png) + ![Add Connection Info.](/docs/img/guides/database/add-ssl-config.png) diff --git a/apps/temp-docs/docs/guides/hosting/overview.mdx b/apps/temp-docs/docs/guides/hosting/overview.mdx index 6126c65e8ec..368ba3ce8b1 100644 --- a/apps/temp-docs/docs/guides/hosting/overview.mdx +++ b/apps/temp-docs/docs/guides/hosting/overview.mdx @@ -20,7 +20,7 @@ Supabase is a combination of open source tools, each specifically chosen for Ent If the tools and communities already exist, with an MIT, Apache 2, or equivalent open license, we will use and support that tool. If the tool doesn't exist, we build and open source it ourselves. -![Supabase Architecture](/img/supabase-architecture.png) +![Supabase Architecture](/docs/img/supabase-architecture.png) - [Kong](https://github.com/Kong/kong) is a cloud-native API gateway. - [GoTrue](https://github.com/netlify/gotrue) is an SWT based API for managing users and issuing SWT tokens. diff --git a/apps/temp-docs/docs/guides/integrations/appsmith.mdx b/apps/temp-docs/docs/guides/integrations/appsmith.mdx index 47357c345ea..2d28b3e8118 100644 --- a/apps/temp-docs/docs/guides/integrations/appsmith.mdx +++ b/apps/temp-docs/docs/guides/integrations/appsmith.mdx @@ -16,12 +16,12 @@ Let’s get started! - On the [Supabase dashboard](https://app.supabase.com), click `New project` and set the name to **Support Dashboard** -![create-project-supabase-01](/img/guides/integrations/appsmith/create-project-supabase-01.png) +![create-project-supabase-01](/docs/img/guides/integrations/appsmith/create-project-supabase-01.png) - Create a new table by clicking on the Create Table option on the side navigation. - Supabase provides many ways to add data to the tables, from writing queries to creating schemas using UI to simply uploading CSV files. For our support dashboard, we will be creating the **tickets** table by uploading the [CSV file](https://raw.githubusercontent.com/vihar/datasets/master/tickets.csv) on Supabase. -![create-table-supabase-02](/img/guides/integrations/appsmith/create-table-supabase-02.png) +![create-table-supabase-02](/docs/img/guides/integrations/appsmith/create-table-supabase-02.png) The database is now set up. @@ -29,40 +29,40 @@ The database is now set up. - Note down the database connection information under Project Settings in Supabase. -![project-settings-supabase-03](/img/guides/integrations/appsmith/project-settings-supabase-03.png) +![project-settings-supabase-03](/docs/img/guides/integrations/appsmith/project-settings-supabase-03.png) - On Appsmith, create a new application under the dashboard under your preferred organization. - Click on the `+` icon next to Datasources on the left navigation bar under Page1 - Next, click on Create New tab and choose PostgreSQL datasource, you’ll see the following screenshot: -![create-datasource-appsmith-04](/img/guides/integrations/appsmith/create-datasource-appsmith-04.png) +![create-datasource-appsmith-04](/docs/img/guides/integrations/appsmith/create-datasource-appsmith-04.png) - Fill out the form to connect to your Supabase instance. Click **Test** to test connection and then **Save** to save the datasource -![connect-supabase-datasource-05](/img/guides/integrations/appsmith/connect-supabase-datasource-05.png) +![connect-supabase-datasource-05](/docs/img/guides/integrations/appsmith/connect-supabase-datasource-05.png) ## Step 3: Build UI on Appsmith - Click on the + icon next to widgets and drag and drop a Tab widget. We can configure using the property pane by clicking on the cog icon on the top-right corner. - As seen in the below screenshot, we have added four tabs to support the dashboard. -![property-pane-appsmith-06](/img/guides/integrations/appsmith/property-pane-appsmith-06.png) +![property-pane-appsmith-06](/docs/img/guides/integrations/appsmith/property-pane-appsmith-06.png) - Add widgets to the **Home** tab to create the dashboard as shown in the screenshot below. For eg: **Critical Open Issues** is a **Text** widget and below it is an **Input** widget which we will bind later to display the number of open tickets. - Set up the **New** button to open a modal which will have a form to raise a new ticket. -![bind-query-appsmith-07](/img/guides/integrations/appsmith/bind-query-appsmith-07.png) +![bind-query-appsmith-07](/docs/img/guides/integrations/appsmith/bind-query-appsmith-07.png) - In the modal widget, add a few widgets to accept input when creating a new ticket. Please refer to the screenshot below. -![modal-appsmith-08](/img/guides/integrations/appsmith/modal-appsmith-08.png) +![modal-appsmith-08](/docs/img/guides/integrations/appsmith/modal-appsmith-08.png) ## Step 4: Writing Queries in Appsmith and binding data to widgets - Click on the + icon next to Datasources on the navigation bar and click New Query next to the Supabase connection here to create a new query. -![create-query-appsmith-09](/img/guides/integrations/appsmith/create-query-appsmith-09.png) +![create-query-appsmith-09](/docs/img/guides/integrations/appsmith/create-query-appsmith-09.png) - Rename the query to create_new_ticket under the query pane; here we can write SQL that can collect the data from the widgets using mustache templates. diff --git a/apps/temp-docs/docs/guides/integrations/auth0.mdx b/apps/temp-docs/docs/guides/integrations/auth0.mdx index 91e989b40d4..061fe2c33bb 100644 --- a/apps/temp-docs/docs/guides/integrations/auth0.mdx +++ b/apps/temp-docs/docs/guides/integrations/auth0.mdx @@ -24,7 +24,7 @@ You will also need a Supabase account, which can be created by signing in [here] From the Auth0 dashboard, click the menu to the right of the Auth0 logo, and select `Create tenant`. -![Create tenant from Auth0 dashboard](/img/guides/integrations/auth0/IYzHxeW.png) +![Create tenant from Auth0 dashboard](/docs/img/guides/integrations/auth0/IYzHxeW.png) Enter a `Domain` for your tenant - this will need to be unique. @@ -32,7 +32,7 @@ Select a `Region` - this should be geographically close to the majority of your Select `Development` for `Environment Tag` - this should be production when you're ready to go live. -![Auth0 tenant settings](/img/guides/integrations/auth0/iSA3E0J.png) +![Auth0 tenant settings](/docs/img/guides/integrations/auth0/iSA3E0J.png) ## Step 2: Setting up an Auth0 application @@ -40,7 +40,7 @@ From the sidebar menu, select `Applications` > `Applications` and click `Create Give your application a name, select the `Regular Web Applications` option and click `Create`. -![Auth0 application settings](/img/guides/integrations/auth0/ANU4Wez.png) +![Auth0 application settings](/docs/img/guides/integrations/auth0/ANU4Wez.png) Select `Settings` and navigate to the `Application URIs` section, and update the following: @@ -68,7 +68,7 @@ Select the same `Region` you selected for your Auth0 tenant. Click `Create new project`. -![New Supabase project settings](/img/guides/integrations/auth0/qnmJEU7.png) +![New Supabase project settings](/docs/img/guides/integrations/auth0/qnmJEU7.png) ## Step 4: Creating data in Supabase @@ -86,17 +86,17 @@ Create two new columns: Click `Save` to create the new table. -![Todo table](/img/guides/integrations/auth0/33kqP4K.png) +![Todo table](/docs/img/guides/integrations/auth0/33kqP4K.png) From the `Table editor` view, select the `todo` table and click `Insert row`. Fill out the `title` field and click `Save`. -![New row settings](/img/guides/integrations/auth0/mEhHAWC.png) +![New row settings](/docs/img/guides/integrations/auth0/mEhHAWC.png) Click `Insert row` and add a couple of extra todos. -![List of todos](/img/guides/integrations/auth0/dLOvhdq.png) +![List of todos](/docs/img/guides/integrations/auth0/dLOvhdq.png) ## Step 5: Building a Next.js app @@ -121,11 +121,11 @@ SUPABASE_SIGNING_SECRET=get-from-supabase-dashboard > Note: Auth0 values can be found under `Settings > Basic Information` for your application. -![Auth0 settings](/img/guides/integrations/auth0/o07FaoV.png) +![Auth0 settings](/docs/img/guides/integrations/auth0/o07FaoV.png) > Note: Supabase values can be found under `Settings > API` for your project. -![Supabase settings](/img/guides/integrations/auth0/r1GAfLo.png) +![Supabase settings](/docs/img/guides/integrations/auth0/r1GAfLo.png) Restart your Next.js development server to read in the new values from `.env.local`. @@ -203,13 +203,13 @@ export default Index Test this is working by navigating to `http://localhost:3000` which should redirect you to an Auth0 sign in screen. -![Auth0 sign in screen](/img/guides/integrations/auth0/xLRL7S7.png) +![Auth0 sign in screen](/docs/img/guides/integrations/auth0/xLRL7S7.png) Either `Sign up` for a new account, or click `Continue with Google` to sign in. You should now be able to view the landing page. -![Landing page](/img/guides/integrations/auth0/YdBKRy6.png) +![Landing page](/docs/img/guides/integrations/auth0/YdBKRy6.png) ## Step 7: Sign Auth0 token for Supabase @@ -239,10 +239,7 @@ const afterCallback = async (req, res, session) => { exp: Math.floor(Date.now() / 1000) + 60 * 60, } - session.user.accessToken = jwt.sign( - payload, - process.env.SUPABASE_SIGNING_SECRET - ) + session.user.accessToken = jwt.sign(payload, process.env.SUPABASE_SIGNING_SECRET) return session } @@ -390,7 +387,7 @@ export default Index Either way, when we reload our application, we are still getting the empty state for todos. -![Empty todo list](/img/guides/integrations/auth0/XgEMwnN.png) +![Empty todo list](/docs/img/guides/integrations/auth0/XgEMwnN.png) This is because we enabled Row Level Security, which blocks all requests by default. To enable our user to select their `todos` we need to write a policy. @@ -416,11 +413,11 @@ Let's create a policy that checks whether this user is the owner of the todo. Select `Authentication` from the Supabase sidebar menu, click `Policies`, and then `New Policy` on the `todo` table. -![Create new policy](/img/guides/integrations/auth0/M7XyhHe.png) +![Create new policy](/docs/img/guides/integrations/auth0/M7XyhHe.png) From the modal, select `Create a policy from scratch` and add the following. -![Policy settings for SELECT](/img/guides/integrations/auth0/wuWz3am.png) +![Policy settings for SELECT](/docs/img/guides/integrations/auth0/wuWz3am.png) This policy is calling the function we just created to get the currently logged in user's ID `auth.user_id()` and checking whether this matches the `user_id` column for the current `todo`. If it does, then it will allow the user to select it, otherwise it will continue to deny. @@ -432,21 +429,21 @@ The last thing we need to do is update the `user_id` columns for our existing `t Head back to the Supabase dashboard, and select `Table editor` from the sidebar. -![User ID null in Supabase Table Editor](/img/guides/integrations/auth0/dLOvhdq.png) +![User ID null in Supabase Table Editor](/docs/img/guides/integrations/auth0/dLOvhdq.png) Each of our `user_id` columns are set to `NULL`! To get the ID for our Auth0 user, head over to the Auth0 dashboard, select `User Management` from the sidebar, click `Users` and select your test user. -![List of users in Auth0 dashboard](/img/guides/integrations/auth0/GdXS013.png) +![List of users in Auth0 dashboard](/docs/img/guides/integrations/auth0/GdXS013.png) Copy their `user_id`. -![User ID in Auth0 dashboard](/img/guides/integrations/auth0/tbvd0Uj.png) +![User ID in Auth0 dashboard](/docs/img/guides/integrations/auth0/tbvd0Uj.png) Update each row in Supabase. -![User ID set to Auth0 user](/img/guides/integrations/auth0/tPu4Tt8.png) +![User ID set to Auth0 user](/docs/img/guides/integrations/auth0/tPu4Tt8.png) Now when we refresh our application, we should finally see our list of `todos`! diff --git a/apps/temp-docs/docs/guides/integrations/clerk.mdx b/apps/temp-docs/docs/guides/integrations/clerk.mdx index 8e39d8011d5..ee508d789f2 100644 --- a/apps/temp-docs/docs/guides/integrations/clerk.mdx +++ b/apps/temp-docs/docs/guides/integrations/clerk.mdx @@ -20,23 +20,23 @@ After your Clerk application has been created, use the lefthand menu to navigate Click on the button to create a new template based on Supabase. -![Create Supabase JWT template from Clerk dashboard](/img/guides/integrations/clerk/01_supabase-template.png) +![Create Supabase JWT template from Clerk dashboard](/docs/img/guides/integrations/clerk/01_supabase-template.png) This will pre-populate the default claims required by Supabase. You can include additional claims or modify them as necessary. [Shortcodes](https://docs.clerk.dev/popular-guides/jwt-templates#shortcodes) are also available for adding dynamic values. ℹ️ Note the name of the JWT template (which you can change) because this will be needed later. -![JWT template claims](/img/guides/integrations/clerk/02_jwt-claims.png) +![JWT template claims](/docs/img/guides/integrations/clerk/02_jwt-claims.png) ## Step 2: Sign JWT with Supabase secret Supabase requires JWTs be signed with the HS256 signing algorithm and use their signing key. Find the JWT secret key in your Supabase project under **Settings** > **API** in the **Config** section. -![Sign with Supabase secret](/img/guides/integrations/clerk/03_jwt-secret.png) +![Sign with Supabase secret](/docs/img/guides/integrations/clerk/03_jwt-secret.png) Click to reveal the JWT secret, copy it, and then paste it in the Signing key field in the Clerk JWT template. -![Paste signing key](/img/guides/integrations/clerk/04_signing-key.png) +![Paste signing key](/docs/img/guides/integrations/clerk/04_signing-key.png) After the key is added, click the **Apply Changes** button to save your template. @@ -58,11 +58,11 @@ NEXT_PUBLIC_SUPABASE_KEY=your-supabase-anon-key Your Clerk Frontend API can be found on the [API Keys](https://dashboard.clerk.dev/last-active?path=api-keys) screen. -![Clerk Frontend API](/img/guides/integrations/clerk/05_clerk-frontend-api.png) +![Clerk Frontend API](/docs/img/guides/integrations/clerk/05_clerk-frontend-api.png) To get the ones needed for Supabase, navigate to the same Settings > API page as before and locate the anon public key and URL. -![Supabase keys](/img/guides/integrations/clerk/06_supabase-keys.png) +![Supabase keys](/docs/img/guides/integrations/clerk/06_supabase-keys.png) **Note**: It is recommended that you enable [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security) (RLS) for your database tables and configure access policies as needed. @@ -174,7 +174,7 @@ For example, this policy would check that the user making the request is authent If you would like the requesting user ID from the JWT to automatically populate a text type column in your database table, you can set the **Default Value** field to the previously defined `requesting_user_id()` function. -![Set requesting_user_id() as default value](/img/guides/integrations/clerk/07_requesting-user-id.png) +![Set requesting_user_id() as default value](/docs/img/guides/integrations/clerk/07_requesting-user-id.png) ## Resources diff --git a/apps/temp-docs/docs/guides/integrations/dashibase.mdx b/apps/temp-docs/docs/guides/integrations/dashibase.mdx index dd53242782d..b3ee0e76909 100644 --- a/apps/temp-docs/docs/guides/integrations/dashibase.mdx +++ b/apps/temp-docs/docs/guides/integrations/dashibase.mdx @@ -26,11 +26,11 @@ First, in Dashibase, go to “Data Sources” via the left sidebar and click on Note: We do not download or store any of your database data. -![Connect Supabase to Dashibase](/img/guides/integrations/dashibase/connect-database.png) +![Connect Supabase to Dashibase](/docs/img/guides/integrations/dashibase/connect-database.png) Enter your database credentials, which you can find in Supabase under Settings > Database > Connection info. For additional security, you can also download your SSL certificate and upload it to Dashibase. -![Supabase credentials](/img/guides/integrations/dashibase/supabase-credentials.png) +![Supabase credentials](/docs/img/guides/integrations/dashibase/supabase-credentials.png) ## Step 2. Set up your data access policy @@ -38,15 +38,15 @@ Once you have connected your database, you can also control what your team can s Note: If you prefer to restrict access to your database _before_ you connect to Dashibase for security reasons, you can [create a restricted user](https://aws.amazon.com/blogs/database/managing-postgresql-users-and-roles/) via [Supabase's SQL Editor](https://supabase.com/docs/guides/database#the-sql-editor). The slight advantage of doing this in Dashibase is that there is a GUI, which makes it easier to set up the access control (but we understand some developers might find it more secure to restrict the access themselves). -![Set data access in Dashibase](/img/guides/integrations/dashibase/set-data-access.png) +![Set data access in Dashibase](/docs/img/guides/integrations/dashibase/set-data-access.png) You can even control which columns within a table that others can see and edit. In the example below, for the `tags` table, the `name` column can be read and updated, the `created_at` column can be read, and the `id` column cannot even be read. -![Set column-level access in Dashibase](/img/guides/integrations/dashibase/set-column-access.png) +![Set column-level access in Dashibase](/docs/img/guides/integrations/dashibase/set-column-access.png) Once you are happy with the data access control, you can decide who in your organization can edit this data source (usually other developers) or use this data source to create dashboards. -![Set user access to data source in Dashibase](/img/guides/integrations/dashibase/data-source-user-access.png) +![Set user access to data source in Dashibase](/docs/img/guides/integrations/dashibase/data-source-user-access.png) ## Step 3. Build your dashboard @@ -56,25 +56,25 @@ Here’s where the fun begins. There are many ways to build your dashboards in D You will see some automatically-generated content in your dashboard so that you can set up your dashboard more quickly. For this example, let's clear them out and start from scratch. -![Automatically-generated content for your dashboard](/img/guides/integrations/dashibase/initial-dashboard-content.png) +![Automatically-generated content for your dashboard](/docs/img/guides/integrations/dashibase/initial-dashboard-content.png) Using our Notion-like UI, you can quickly build out your dashboard through typing. For example, you can type '/table' to add a table from your database to your dashboard. No more dragging components across your screen and dropping them on a blank canvas repeatedly. -![Automatically-generated content for your dashboard](/img/guides/integrations/dashibase/slash-command.gif) +![Automatically-generated content for your dashboard](/docs/img/guides/integrations/dashibase/slash-command.gif) If you have set up [foreign keys in your Supabase database](https://supabase.com/docs/guides/database/tables#joining-tables-with-foreign-keys), you can easily show data from multiple tables on the table in your Dashibase dashboard. Simply click on the "Columns" button beside the "Filter" button and select the columns you want to show or hide. For this example, we want to show the customers' country and plan price, which are in separate `countries` and `plans` tables. -![Setting up the Customers table](/img/guides/integrations/dashibase/customers-table.png) +![Setting up the Customers table](/docs/img/guides/integrations/dashibase/customers-table.png) For all the tables in your dashboard, you can rename the column headers, add filter and sort, adjust the column width, and more. You can also add text to provide context or instructions for the rest of your team as they are using your dashboard. This saves you the trouble of having your dashboard and documentation in separate places. -![Customers table with instructions](/img/guides/integrations/dashibase/customers-table-with-text.png) +![Customers table with instructions](/docs/img/guides/integrations/dashibase/customers-table-with-text.png) Most importantly, we automatically generate a single-item view for each of the items on your table so that you do not have to manually create it yourself. You can easily edit or rearrange the blocks just like in Notion. -![Automatically generated single-item view](/img/guides/integrations/dashibase/single-item-view.png) +![Automatically generated single-item view](/docs/img/guides/integrations/dashibase/single-item-view.png) ## Step 4. Share your dashboard with your team @@ -85,7 +85,7 @@ Finally, save and share the dashboard with your team. There are two levels of ac Click on the “Share” button in the upper-right corner of your dashboard to share access: -![Share dashboard access](/img/guides/integrations/dashibase/share-dashboard.png) +![Share dashboard access](/docs/img/guides/integrations/dashibase/share-dashboard.png) Now your team can use this customer admin panel to find and update customer information easily! diff --git a/apps/temp-docs/docs/guides/integrations/directus.mdx b/apps/temp-docs/docs/guides/integrations/directus.mdx index ae5c51da936..4b7aebb3b09 100644 --- a/apps/temp-docs/docs/guides/integrations/directus.mdx +++ b/apps/temp-docs/docs/guides/integrations/directus.mdx @@ -8,11 +8,11 @@ In this guide, we will demonstrate how to create a new Supabase project, install ## Introduction -![Supabase App](/img/guides/integrations/directus/supabase-20220608A.webp) +![Supabase App](/docs/img/guides/integrations/directus/supabase-20220608A.webp) [Supabase](https://supabase.com/) is an open-source Firebase alternative that provides a PostgreSQL database, storage, authentication, and a dynamic REST API based on your schema. While it is possible to self-host Supabase on your own infrastructure, this article will focus on Supabase Cloud's Free tier, which is the fastest and easiest way to get started. -![Directus App](/img/guides/integrations/directus/directus-20220608A.webp) +![Directus App](/docs/img/guides/integrations/directus/directus-20220608A.webp) [Directus](https://directus.io/) is an open-source data platform that layers on top of any SQL database, providing a powerful suite of tools. The Directus Engine provides dynamic REST and GraphQL APIs based on your schema, hooks and automation, authentication and access control, and file transformations. Directus Studio enables engineers and non-technical users alike to browse, manage, and visualize database content through a no-code app. @@ -49,7 +49,7 @@ As mentioned, while you can [deploy Supabase locally](https://supabase.com/docs/ To take full advantage of the built-in geometry and mapping features Directus offers, we recommend enabling Geometric Data Support. To add PostGIS, follow these steps: -![Enable PostGis](/img/guides/integrations/directus/enable-PostGIS-20220608A.webp) +![Enable PostGis](/docs/img/guides/integrations/directus/enable-PostGIS-20220608A.webp) 1. From the sidebar, navigate to **Database > Extensions**. 2. Use the search bar to look up `PostGIS`. diff --git a/apps/temp-docs/docs/guides/integrations/draftbit.mdx b/apps/temp-docs/docs/guides/integrations/draftbit.mdx index 56e5eabd09a..adaae47333b 100644 --- a/apps/temp-docs/docs/guides/integrations/draftbit.mdx +++ b/apps/temp-docs/docs/guides/integrations/draftbit.mdx @@ -12,7 +12,7 @@ Draftbit is back-end agnostic and connects to Supabase via REST API. > Note: For the demonstration purpose of this guide, we are using a pre-populated database in Supabase. We are calling `Groceries`. To follow along, rename it any way you prefer. -![Prepopulated Database](/img/guides/integrations/draftbit/prepopulated-database.png) +![Prepopulated Database](/docs/img/guides/integrations/draftbit/prepopulated-database.png) If you don’t have a Draftbit account, create one [here](https://draftb.it/3Fkbask). Once you’ve got your account set up, Create a New App. You can select `Start From a Blank App` for this demo and proceed to the Builder interface. @@ -30,7 +30,7 @@ You can find these unique values in the API settings of your Supabase account. - In the **Project URL** section, select and copy the URL. It is the Base URL of your Supabase REST API. It will be required to make a connection to the Draftbit app. - Also, under `Project API keys`, select and copy the API key under `anon`. It is required for every request made to the Supabase database. -![Get Supabase connection string](/img/guides/integrations/draftbit/endpoint.png) +![Get Supabase connection string](/docs/img/guides/integrations/draftbit/endpoint.png) ## Step 2: Save Supabase API key as Authorization Header in Draftbit @@ -44,7 +44,7 @@ To authorize your Draftbit app with Supabse, in the builder interface: - The value of this key requires you to enter an authorization token that starts with syntax is ``. Click **Add** after adding the value. - Click **Save** to save these keys and close the modal. -![Add header values in Draftbit](/img/guides/integrations/draftbit/authheader.png) +![Add header values in Draftbit](/docs/img/guides/integrations/draftbit/authheader.png) ## Step 3: Add Supabase RESTful endpoint in Draftbit @@ -57,7 +57,7 @@ In your Draftbit builder interface: - In Step 2: Under **Key** add `Authorization` and `apikey`. Then, under **Value**, select the global variables (from the previous section) to add the actual values for both keys. - Click Save. -![Create a API service in Draftbit](/img/guides/integrations/draftbit/service.png) +![Create a API service in Draftbit](/docs/img/guides/integrations/draftbit/service.png) ## Making API requests with Supabase & Draftbit @@ -67,7 +67,7 @@ In this section, let's populate a Fetch component with all the data from a simpl For reference, here is a how the Components tree looks like for this screen: -![Components tree](/img/guides/integrations/draftbit/ctree.png) +![Components tree](/docs/img/guides/integrations/draftbit/ctree.png) The next step is to create an endpoint. Let's try fetching all the data using a `GET` HTTP request. Select the Supabase service in the **API & Cloud Services** modal, and then: @@ -77,7 +77,7 @@ The next step is to create an endpoint. Let's try fetching all the data using a - In Step 4: click the **Test** button next to the Endpoint input to verify the response coming from the Supabase. - Click Save. -![Creating a GET request endpoint](/img/guides/integrations/draftbit/get-request.gif) +![Creating a GET request endpoint](/docs/img/guides/integrations/draftbit/get-request.gif) In the Builder, on the app screen: @@ -89,7 +89,7 @@ In the Builder, on the app screen: - Add a `{{varName}}` value (inside the curly braces) to represent a column field from the Supabase. For example, add `{{title}}` to represent the column name from the Supabase Base. - Under **Variables**, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field. -![Fetching data on app screen](/img/guides/integrations/draftbit/fetchall.gif) +![Fetching data on app screen](/docs/img/guides/integrations/draftbit/fetchall.gif) ### GET request to fetch single row @@ -101,7 +101,7 @@ Open the **API & Cloud services** modal from the top menu, select the Supabase s - In Step 4: click the **Test** button next to the Endpoint input to verify the response coming from the Supabase. - Click Save. -![Creating endpoint to fetch a single row](/img/guides/integrations/draftbit/getsingle.gif) +![Creating endpoint to fetch a single row](/docs/img/guides/integrations/draftbit/getsingle.gif) On app screen: @@ -114,7 +114,7 @@ On app screen: - Add a `{{varName}}` value (inside the curly braces) to represent the column field from the Supabase. For example, add `{{title}}` to represent the field and value from the Supabase data table. - Under **Variables**, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field. -![Displaying data from single row](/img/guides/integrations/draftbit/fetchsingle.png) +![Displaying data from single row](/docs/img/guides/integrations/draftbit/fetchsingle.png) ### POST request to submit a new row @@ -140,7 +140,7 @@ In addition, you need a Touchable component like a Button to attach the POST act - In Step 4: to see the new row added to the Supabase data table as JSON response inside the Builder, you have to pass a new header called `Prefer` with its value as `return=representation`. - In Step 5: click the **Test** button next to the Endpoint input to verify the response coming from the Supabase and click Save. -![Make a POST request to add new data to Supabase database](/img/guides/integrations/draftbit/postrequest.gif) +![Make a POST request to add new data to Supabase database](/docs/img/guides/integrations/draftbit/postrequest.gif) Once you follow the above steps, you should get a 200 OK response with exactly the new record as a JSON you have entered for your schema. @@ -160,7 +160,7 @@ Now, there is a working `POST` request in Draftbit. Map its response to the comp First, for each input component, make sure you have set the Field Names (found in the Configs tab, second from the left) to unique values. For example, in the screen below, there is one TextInput field component with the value of the `Field Name` prop of `textInputValue`. -![Field Name prop on a TextInput component](/img/guides/integrations/draftbit/textinput.png) +![Field Name prop on a TextInput component](/docs/img/guides/integrations/draftbit/textinput.png) Next, on your Button component, go to the Interactions tab in the Properties panel located on the far-right-hand side. Select an Action called `API request`. @@ -170,7 +170,7 @@ In the API request action: - In **Endpoint**, select the name of the Endpoint. - Then add the configuration for the body request to be sent by selecting the values for `{{inputValue}}`. -![Setting up the API Request to send a POST request](/img/guides/integrations/draftbit/postapirequest.png) +![Setting up the API Request to send a POST request](/docs/img/guides/integrations/draftbit/postapirequest.png) After completing the above steps, you can trigger the API request to submit new data to the Supabase database. @@ -186,7 +186,7 @@ After you have created your screen components in the Draftbit builder, open the - In Step 3: add a valid Body structure to submit a PATCH request. Add one or many `{{variable}}` for test values depending on the structure of your app. Click Body Preview to validate the structure of the Body in the request. For the example, let's create a variable called `{{inputValue}}`. - In Step 5: click the **Test** button next to the Endpoint input to verify the response coming from the Supabase and click Save. -![Creating an endpoint for PATCH request](/img/guides/integrations/draftbit/patch.gif) +![Creating an endpoint for PATCH request](/docs/img/guides/integrations/draftbit/patch.gif) Next, on your Button component, go to the Interactions tab in the Properties panel located on the far-right-hand side. Select an Action called `API request`. @@ -196,7 +196,7 @@ In the API request action: - In **Endpoint**, select the name of the Endpoint. - Then add the configuration for the query param, and the body request to be sent by selecting the values for `{{inputValue}}`. -![Setting up the API Request to send a PATCH request](/img/guides/integrations/draftbit/patchapirequest.png) +![Setting up the API Request to send a PATCH request](/docs/img/guides/integrations/draftbit/patchapirequest.png) After completing the above steps, you can trigger the API request to update existing data in the Supabase database. @@ -212,7 +212,7 @@ After you have created your screen components in the Draftbit builder, open the - In Step 4: click the **Test** button next to the Endpoint input to verify the response from the Supabase. - Click Save. -![Creating an endpoint for DELETE request](/img/guides/integrations/draftbit/delete.gif) +![Creating an endpoint for DELETE request](/docs/img/guides/integrations/draftbit/delete.gif) Next, on your Button component, go to the Interactions tab in the Properties panel located on the far-right-hand side. Select an Action called `API request`. @@ -222,7 +222,7 @@ In the API Request action: - In **Endpoint**, select the name of the Endpoint. - Then, add the configuration for the query request to be sent by selecting a value. For example, in this case it will be the `id` of the record coming from the Navigation parameter. -![Setting up the API Request to send a DELETE request](/img/guides/integrations/draftbit/deleteapirequest.gif) +![Setting up the API Request to send a DELETE request](/docs/img/guides/integrations/draftbit/deleteapirequest.gif) ## Resources diff --git a/apps/temp-docs/docs/guides/integrations/pgmustard.mdx b/apps/temp-docs/docs/guides/integrations/pgmustard.mdx index a0470a79293..4a463c11f07 100644 --- a/apps/temp-docs/docs/guides/integrations/pgmustard.mdx +++ b/apps/temp-docs/docs/guides/integrations/pgmustard.mdx @@ -22,7 +22,7 @@ explain (analyze, format json, buffers, verbose, settings) Run the query, and copy the output. -![01-supabase-run-query](/img/guides/integrations/pgmustard/01-supabase-run-query.png) +![01-supabase-run-query](/docs/img/guides/integrations/pgmustard/01-supabase-run-query.png) If you’re using the Supabase SQL Editor, this is easily copied from the cell titled `QUERY PLAN`, as seen above. @@ -32,17 +32,17 @@ If you have any trouble, check out pgMustard’s guide for [getting a query plan Paste the json output into pgMustard and press Submit. -![02-paste-plan-pgmustard](/img/guides/integrations/pgmustard/02-paste-plan-pgmustard.png) +![02-paste-plan-pgmustard](/docs/img/guides/integrations/pgmustard/02-paste-plan-pgmustard.png) ## Step 3: Look through the top tips and slowest operations Review the top tips in pgMustard. These are scored on a scale of 0 to 5 stars, based on how much time-saving potential they have (5 stars meaning lots of potential). -![03-review-tips-pgmustard](/img/guides/integrations/pgmustard/03-review-tips-pgmustard.png) +![03-review-tips-pgmustard](/docs/img/guides/integrations/pgmustard/03-review-tips-pgmustard.png) Click one of the tips, or one of the operations, to see more information. -![04-click-tip-pgmustard](/img/guides/integrations/pgmustard/04-click-tip-pgmustard.png) +![04-click-tip-pgmustard](/docs/img/guides/integrations/pgmustard/04-click-tip-pgmustard.png) ## Step 4: Consider your options @@ -52,11 +52,11 @@ If you don’t get any tips, your query might be quite fast for the amount of wo For the example we saw in Step 3, let's try adding an index on the `customer_name` field in Supabase. -![05-create-index-supabase](/img/guides/integrations/pgmustard/05-create-index-supabase.png) +![05-create-index-supabase](/docs/img/guides/integrations/pgmustard/05-create-index-supabase.png) Going through Steps 1-3 again, we now get an efficient index scan, that will scale nicely as our data grows. -![06-check-pgmustard](/img/guides/integrations/pgmustard/06-check-pgmustard.png) +![06-check-pgmustard](/docs/img/guides/integrations/pgmustard/06-check-pgmustard.png) We could look into why Postgres isn’t choosing to do an index-only scan here, but pgMustard is letting us know that it doesn’t think we’ll gain much by doing so, by scoring the tip 0.3 out of 5. diff --git a/apps/temp-docs/docs/guides/integrations/plasmic.mdx b/apps/temp-docs/docs/guides/integrations/plasmic.mdx index 3af93d722ef..07d4e0dbf8d 100644 --- a/apps/temp-docs/docs/guides/integrations/plasmic.mdx +++ b/apps/temp-docs/docs/guides/integrations/plasmic.mdx @@ -14,7 +14,7 @@ You can also take a look at the Plasmic project here: > You’ll need to enable 3rd-party cookies in your browser for the project to properly load. -![pokedex-screenshot](/img/guides/integrations/plasmic/application-screenshot-00.png) +![pokedex-screenshot](/docs/img/guides/integrations/plasmic/application-screenshot-00.png) At a high level, @@ -27,7 +27,7 @@ At a high level, - On the [Supabase dashboard](https://app.supabase.com/), click `New project` and set the name of the project. By default, Supabase will already be set up for user signups with email, with users being stored in a `users` table. -![create-project-supabase](/img/guides/integrations/plasmic/create-project-supabase-01.png) +![create-project-supabase](/docs/img/guides/integrations/plasmic/create-project-supabase-01.png) - Navigate to the `Table Editor` on the left side navigation bar. Here we can create a `New table` to store our Pokemon entries. Make sure you are in the `schema public` view. Create a new table called `entries`, with 6 columns: - `id`: is a unique ID for the entry. This column should be generated automatically as the primary column. @@ -37,11 +37,11 @@ At a high level, > Note: In this tutorial we’ve turned off “[Row Level Security (RLS)](https://supabase.com/docs/guides/auth/row-level-security)”. In practice, you will want to create policies that restrict who gets to create, edit, and delete posts. By turning this off, any user can modify the database without restrictions. -![create-table-supabase](/img/guides/integrations/plasmic/create-table-supabase-02.png) +![create-table-supabase](/docs/img/guides/integrations/plasmic/create-table-supabase-02.png) For your convenience, feel free to import the following CSV into Supabase to pre-populate your database. In order to import, you must select `Import data via spreadsheet`, in the new table dialog box. (It does not work on existing tables.) -[pokedex-export.csv](/img/guides/integrations/plasmic/pokedex-export.csv) +[pokedex-export.csv](/docs/img/guides/integrations/plasmic/pokedex-export.csv) ## Step 2: Set up your codebase @@ -71,7 +71,7 @@ Navigate to [http://localhost:3000](http://localhost:3000) in your web browser. If you pre-populated the database in Step 1. you should see the following homepage after logging in. Otherwise, feel free to add Pokemon manually via the UI. -![application-screenshot](/img/guides/integrations/plasmic/application-screenshot-03.png) +![application-screenshot](/docs/img/guides/integrations/plasmic/application-screenshot-03.png) ## Step 4: Clone the Plasmic project @@ -80,7 +80,7 @@ Now let’s try to make some additions! The code base is currently configured to Open the default starter Plasmic project here: [https://studio.plasmic.app/projects/66RKaSPCwKxYjCfXWHCxn6](https://studio.plasmic.app/projects/66RKaSPCwKxYjCfXWHCxn6) -![clone-project-plasmic](/img/guides/integrations/plasmic/clone-project-plasmic-04.png) +![clone-project-plasmic](/docs/img/guides/integrations/plasmic/clone-project-plasmic-04.png) To make an editable copy, click on the `Copy Project` button in the blue bar. This will clone the project and redirect you to your copy. @@ -91,7 +91,7 @@ Take note of the `project ID` and `API token`. You can find the project ID in th The API token can be found by clicking the `Code` button in the top bar. -![api-token-plasmic](/img/guides/integrations/plasmic/api-token-plasmic-05.png) +![api-token-plasmic](/docs/img/guides/integrations/plasmic/api-token-plasmic-05.png) Now go back to `.env.local` and update the corresponding project ID and token fields. @@ -131,7 +131,7 @@ Insert a `SupabaseGrid` by searching the AddDrawer (by clicking the blue + butto > For source see `components/CodeComponents/DatabaseComponents.tsx` -![add-supabasegrid-plasmic](/img/guides/integrations/plasmic/add-supabasegrid-plasmic-07.png) +![add-supabasegrid-plasmic](/docs/img/guides/integrations/plasmic/add-supabasegrid-plasmic-07.png) Then in the right-hand panel, configure the props on `SupabaseGrid`. @@ -139,13 +139,13 @@ Then in the right-hand panel, configure the props on `SupabaseGrid`. - `tableColumns` are a comma-delimited list of columns you want to select from the table - We also set the number of columns and spacing shown in the grid -![set-props-plasmic](/img/guides/integrations/plasmic/set-props-plasmic-08.png) +![set-props-plasmic](/docs/img/guides/integrations/plasmic/set-props-plasmic-08.png) The `SupabaseGrid` will loop over the rows from the query. Now customize the repeated content by inserting instances of `SupabaseField`. Select the type of content and a selector string to fetch a single value. In the example below, we use `{{row.imageUrl}}` to retrieve the `imageUrl` column of the row. Apply any styling and layout you want on these elements. -![add-supabasefield-plasmic](/img/guides/integrations/plasmic/add-supabasefield-plasmic-09.png) +![add-supabasefield-plasmic](/docs/img/guides/integrations/plasmic/add-supabasefield-plasmic-09.png) ### Putting it all together (video) @@ -266,16 +266,7 @@ Note that this code component is defined in your codebase. Feel free to augment export function SupabaseGridCollection(props: SupabaseGridCollectionProps) { const supabaseQuery = React.useContext(SupabaseQueryContext) - const { - children, - columns, - columnGap, - rowGap, - count, - className, - loading, - testLoading, - } = props + const { children, columns, columnGap, rowGap, count, className, loading, testLoading } = props const result = supabaseQuery if (!result || testLoading) { @@ -309,13 +300,7 @@ export function SupabaseGridCollection(props: SupabaseGridCollectionProps) { ```tsx // supabase-demo/components/CodeComponents/DisplayCollections.tsx -export function SupabaseTextField({ - name, - className, -}: { - name?: string - className?: string -}) { +export function SupabaseTextField({ name, className }: { name?: string; className?: string }) { const contexts = useAllContexts() if (!name) { return

You need to set the name prop

diff --git a/apps/temp-docs/docs/guides/integrations/polyscale.mdx b/apps/temp-docs/docs/guides/integrations/polyscale.mdx index 1eae5729d0f..add9a2c536d 100644 --- a/apps/temp-docs/docs/guides/integrations/polyscale.mdx +++ b/apps/temp-docs/docs/guides/integrations/polyscale.mdx @@ -31,7 +31,7 @@ If you do not already have a PolyScale account, you can create an account [here] In your Supabase project, click on `Settings > Database` and scroll down to the `Connection info` section to copy your database `Host`. -![supabase-host](/img/guides/integrations/polyscale/supabase-host.png) +![supabase-host](/docs/img/guides/integrations/polyscale/supabase-host.png) ### 1.2 Configure your PolyScale Cache @@ -42,7 +42,7 @@ In your Supabase project, click on `Settings > Database` and scroll down to the - Enter `5432` for the **Port** - Click **Create** -![create-cache-supabase](/img/guides/integrations/polyscale/create-cache-supabase-400.png) +![create-cache-supabase](/docs/img/guides/integrations/polyscale/create-cache-supabase-400.png) Your cache is now created. PolyScale automatically checks to see that your database is accessible from all our global PoPs. diff --git a/apps/temp-docs/docs/guides/integrations/prisma.mdx b/apps/temp-docs/docs/guides/integrations/prisma.mdx index e7f8d517ccc..b8257507f9c 100644 --- a/apps/temp-docs/docs/guides/integrations/prisma.mdx +++ b/apps/temp-docs/docs/guides/integrations/prisma.mdx @@ -15,7 +15,7 @@ This guide explains how to quickly connect the Postgres database provided by Sup ## Step 1: Get the connection string from Supabase project settings Go to the settings page from the sidebar and navigate to the **Database** tab. You’ll find the database’s connection string with a placeholder for the password you provided when you created the project. -![Getting the connection string](/img/guides/integrations/prisma/zntcsh3ic91gf1gy8j73.png) +![Getting the connection string](/docs/img/guides/integrations/prisma/zntcsh3ic91gf1gy8j73.png) ## Step 2: Testing the connection @@ -114,14 +114,14 @@ This will create a `prisma/migrations` folder inside your `prisma` directory and > Note: if you want to skip the process of creating a migration history, you can use the [`db push`](https://www.prisma.io/docs/concepts/components/prisma-migrate/db-push) command instead of `migrate dev`. > If you go to your Supabase project, in the table editor, you should see that two tables have been created, a `Post` and a `User` table. -> ![tables created in the UI](/img/guides/integrations/prisma/7y4qq4wwvfrheti6r09u.png) +> ![tables created in the UI](/docs/img/guides/integrations/prisma/7y4qq4wwvfrheti6r09u.png) > That’s it! You have now successfully connected a Prisma project to a PostgreSQL database hosted on Supabase and ran your first migration. ## Connection pooling with Supabase If you’re working in a serverless environment (for example Node.js functions hosted on AWS Lambda, Vercel or Netlify Functions), you need to set up [connection pooling](https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#serverless-environments-faas) using a tool like [PgBouncer](https://www.pgbouncer.org/). That’s because every function invocation may result in a [new connection to the database](https://www.prisma.io/docs/guides/performance-and-optimization/connection-management#the-serverless-challenge). Supabase [supports connection management using PgBouncer](https://supabase.io/blog/2021/04/02/supabase-pgbouncer#what-is-connection-pooling) and are enabled by default. Go to the **Database** page from the sidebar in the Supabase dashboard and navigate to **connection pool** settings -![Connection pool settings](/img/guides/integrations/prisma/w0oowg8vq435ob5c3gf0.png) +![Connection pool settings](/docs/img/guides/integrations/prisma/w0oowg8vq435ob5c3gf0.png) When running migrations you need to use the non pooled connection URL (like the one we used in **step 1**). However, when deploying your app, you’ll use the pooled connection URL and add the `?pgbouncer=true` flag to the PostgreSQL connection URL. To minimize the number of concurrent connections, setting the `connection_limit` to `1` is also recommended. So the URL might look as follows: ```env diff --git a/apps/temp-docs/docs/guides/integrations/sequin.mdx b/apps/temp-docs/docs/guides/integrations/sequin.mdx index 3ba6e7afae9..3aac1434810 100644 --- a/apps/temp-docs/docs/guides/integrations/sequin.mdx +++ b/apps/temp-docs/docs/guides/integrations/sequin.mdx @@ -14,29 +14,29 @@ To connect Supabase to Sequin, you'll first need to retrieve the credentials for 1. In the Supabase dashboard, go to the settings page and open up your **Database** settings. In the **Connection info** section, you'll find the credentials you need - like `host` and `user`: - ![TBD](/img/guides/integrations/sequin/001_supabase_dash.png) + ![TBD](/docs/img/guides/integrations/sequin/001_supabase_dash.png) 2. In the [Sequin console](https://app.sequin.io), go to your sync's configuration and open the **Destination** section. Select **Launch or Connect** and then click **Connect** to configure the connection to your Supabase Postgres: - ![TBD](/img/guides/integrations/sequin/002_connect.png) + ![TBD](/docs/img/guides/integrations/sequin/002_connect.png) 3. In the connection modal that appears, enter the `Host` and `Port` for your Supabase database and click **Continue**. - ![TBD](/img/guides/integrations/sequin/003_step_1.png) + ![TBD](/docs/img/guides/integrations/sequin/003_step_1.png) 4. Now, enter the `Database name` and set the `schema` name for your sync. For instance, if your syncing Stripe, you'll likely want to name your synced schema something like `stripe`. Finally, enter the `user` and `password` for your Supabase database and then click **Continue**. Sequin will verify it can properly connect to your database with the correct permissions. - ![TBD](/img/guides/integrations/sequin/004_step_2.png) + ![TBD](/docs/img/guides/integrations/sequin/004_step_2.png) 5. Sequin is now connected to your Supabase Postgres database and will ask you to confirm which database users should be able to access your synced schema. Select all of the users and click **Continue**: - ![TBD](/img/guides/integrations/sequin/005_step_3.png) + ![TBD](/docs/img/guides/integrations/sequin/005_step_3.png) 6. That's it. Sequin will now create a new schema and permissions group in your Supabase database. Name the database connection in Sequin something like `Supabase` and your done! In the Supabase dashboard, you can go to the **Table Editor** and you'll see a new schema full of your synced platform data. -![TBD](/img/guides/integrations/sequin/006_see_data.png) +![TBD](/docs/img/guides/integrations/sequin/006_see_data.png) ## Step 2: Grant Permissions @@ -44,7 +44,7 @@ To ensure the right users can access the synced schema Sequin manages, you'll ne 1. In the Sequin console, click the **Connect** button next to your sync and copy down your `Schema` and unique `Read Group`. - ![TBD](/img/guides/integrations/sequin/007_get_read.png) + ![TBD](/docs/img/guides/integrations/sequin/007_get_read.png) 2. Now, in the Supabase dashboard, go to the **SQL Editor** and run the following permission grants: diff --git a/apps/temp-docs/docs/guides/integrations/snaplet.mdx b/apps/temp-docs/docs/guides/integrations/snaplet.mdx index 1153d206543..92fe9b4a550 100644 --- a/apps/temp-docs/docs/guides/integrations/snaplet.mdx +++ b/apps/temp-docs/docs/guides/integrations/snaplet.mdx @@ -40,29 +40,29 @@ Follow along in the video below as the founder of Snaplet, Peter Pistorius, take Navigate to [https://www.snaplet.dev/](https://www.snaplet.dev/) and sign up for a new account (it’s free). Once you have successfully signed up for a new account, create a team, and start by connecting to your Supabase project. -![connect-your-database](/img/guides/integrations/snaplet/connect-your-database.png) +![connect-your-database](/docs/img/guides/integrations/snaplet/connect-your-database.png) Enter the credentials of your production Supabase project. Find the "Connection string" in Supabase via `Organization > Project > Settings > Database > Connection string` (at the bottom of the page). The password is the same password you used when creating the Supabase project. -![supabase-connection-db-info](/img/guides/integrations/snaplet/supabase-connection-db-info.png) +![supabase-connection-db-info](/docs/img/guides/integrations/snaplet/supabase-connection-db-info.png) You’ll have to confirm providing Snaplet access to your database. Snaplet will prompt you to only provide `read-only` access to your database. Snaplet has a guide in their documentation on how to do so [here](https://docs.snaplet.dev/postgresql/create-read-only-role). > Note that whatever connection string you provide here will be that of your Data Source – essentially the production database in a real-life scenario -![checking-database-credentials](/img/guides/integrations/snaplet/checking-database-credentials.png) +![checking-database-credentials](/docs/img/guides/integrations/snaplet/checking-database-credentials.png) ### 2.2. Transform your data -![transform-your-data](/img/guides/integrations/snaplet/transform-your-data.png) +![transform-your-data](/docs/img/guides/integrations/snaplet/transform-your-data.png) The next step is to exclude any schemas that you do not require. You are able to exclude an entire schema by clicking on the drop-down at the top, selecting the schema you would like to exclude and clicking ‘Exclude schema’. Alternatively, you can select a given schema and exclude only specific tables from that particular schema. Exclude any non-required table data (such as logs) and extensions and view your columns. At this point, Snaplet will automatically detect any columns that have Personally Identifiable Information (PII) and mark them in purple. If there are any additional columns that hold data you would like to anonymise, you can click on the respective column name and provide a replacement value for the data in that column. To complete the onboarding, click on `Review and Save` and proceed to the dashboard. -![create-your-first-snapshot](/img/guides/integrations/snaplet/create-your-first-snapshot.png) +![create-your-first-snapshot](/docs/img/guides/integrations/snaplet/create-your-first-snapshot.png) ### 2.3. Create a Snapshot diff --git a/apps/temp-docs/docs/guides/integrations/stytch.mdx b/apps/temp-docs/docs/guides/integrations/stytch.mdx index b804c594682..3929087f0d9 100644 --- a/apps/temp-docs/docs/guides/integrations/stytch.mdx +++ b/apps/temp-docs/docs/guides/integrations/stytch.mdx @@ -20,7 +20,7 @@ If you already have a Stytch account you may skip this step. Go to [Stytch](https://stytch.com?utm_source=supabase&utm_medium=guide), and create an account. Note that Stytch provides two ways to create an account, either via Google OAuth, or through Email magic links.  This is the same user experience we will be building in this guide! -![Stytch redirect URL settings](/img/guides/integrations/stytch/01.png) +![Stytch redirect URL settings](/docs/img/guides/integrations/stytch/01.png) ## Step 1: Set up Stytch redirect URLs @@ -28,11 +28,11 @@ First we need to add the redirect URLs that will be used during the Email magic Navigate to your [redirect URL settings](https://stytch.com/dashboard/redirect-urls?utm_source=supabase&utm_medium=guide) in the Stytch dashboard, and under **Test environment** create an entry where the **URL** is `http://localhost:3000/api/authenticate` and the **Type** is `All`. -![Edit Stytch redirect URL settings](/img/guides/integrations/stytch/02.png) +![Edit Stytch redirect URL settings](/docs/img/guides/integrations/stytch/02.png) After pressing **Confirm**, the redirect URLs dashboard will update to show your new entry. We will use this URL later on. -![Stytch redirect URL settings](/img/guides/integrations/stytch/03.png) +![Stytch redirect URL settings](/docs/img/guides/integrations/stytch/03.png) ## Step 2: Create a Supabase project @@ -44,7 +44,7 @@ Enter a secure `Database Password`. Click **Create new project**. It may take a couple minutes for your project to be provisioned. -![New Supabase project settings](/img/guides/integrations/stytch/04.png) +![New Supabase project settings](/docs/img/guides/integrations/stytch/04.png) ## Step 3: Creating data in Supabase @@ -64,17 +64,17 @@ Add three new columns: Click **Save** to create the new table. -![Creating a new table](/img/guides/integrations/stytch/05.png) +![Creating a new table](/docs/img/guides/integrations/stytch/05.png) From the Table editor view, select the expenses table and click **Insert row**. Fill out the title and value fields (leave user_id blank for now) and click **Save**. -![Creating a new row](/img/guides/integrations/stytch/06.png) +![Creating a new row](/docs/img/guides/integrations/stytch/06.png) Use **Insert Row** to further populate the table with expenses. -![Multiple rows](/img/guides/integrations/stytch/07.png) +![Multiple rows](/docs/img/guides/integrations/stytch/07.png) ## Step 4: Building a Next.js app @@ -98,11 +98,11 @@ SUPABASE_SIGNING_SECRET=GET_FROM_SUPABASE_DASHBOARD > Note: Stytch values can be found in the project [dashboard](https://stytch.com/dashboard/api-keys?utm_source=supabase&utm_medium=guide) under **API Keys**. -![Stytch API keys](/img/guides/integrations/stytch/08.png) +![Stytch API keys](/docs/img/guides/integrations/stytch/08.png) > Note: Supabase values can be found under **Settings** > **API** for your project. -![Supabase API keys](/img/guides/integrations/stytch/09.png) +![Supabase API keys](/docs/img/guides/integrations/stytch/09.png) Start your Next.js development server to read in the new values from `.env.local`. @@ -225,15 +225,15 @@ export default Index On `localhost:3000` there is now a login form prompting for your email address. -![Email login step one](/img/guides/integrations/stytch/10.png) +![Email login step one](/docs/img/guides/integrations/stytch/10.png) Enter your email address and press **Continue with email**. -![Email login step two](/img/guides/integrations/stytch/11.png) +![Email login step two](/docs/img/guides/integrations/stytch/11.png) In your inbox you will find a login request from your app. -![Email login step three](/img/guides/integrations/stytch/12.png) +![Email login step three](/docs/img/guides/integrations/stytch/12.png) However, if you click the link in the email you will get a 404. We need to build an API route to handle the email magic link authentication. @@ -266,10 +266,7 @@ const loadStytch = () => { client = new stytch.Client({ project_id: process.env.STYTCH_PROJECT_ID, secret: process.env.STYTCH_SECRET, - env: - process.env.STYTCH_PROJECT_ENV === 'live' - ? stytch.envs.live - : stytch.envs.test, + env: process.env.STYTCH_PROJECT_ENV === 'live' ? stytch.envs.live : stytch.envs.test, }) } @@ -400,7 +397,7 @@ export default Index Return to `localhost:3000`, and login again by sending yourself a new email. Upon clicking through in the email you should be presented with “Welcome $USER_ID”. If you refresh the page, you should remain in an authenticated state. If you press **Logout** then you should return to the login screen. -![Profile page](/img/guides/integrations/stytch/13.png) +![Profile page](/docs/img/guides/integrations/stytch/13.png) Now that we have a working login flow with persistent authentication it is time to pull in our expense data from Supabase. @@ -520,11 +517,11 @@ Let's create a policy that checks whether this user is the owner of an expense. Select **Authentication** from the Supabase sidebar menu, click **Policies**, then **New Policy**. -![Supabase authentication page](/img/guides/integrations/stytch/14.png) +![Supabase authentication page](/docs/img/guides/integrations/stytch/14.png) From the modal, select **For full customization create a policy from scratch** and add the following. -![Supabase create policy page](/img/guides/integrations/stytch/15.png) +![Supabase create policy page](/docs/img/guides/integrations/stytch/15.png) This policy is calling the function we just created to get the currently logged in user's `user_id` `auth.user_id()` and checking whether this matches the `user_id` column for the current expense. If it does, then it will allow the user to select it, otherwise it will continue to deny. @@ -536,19 +533,19 @@ The last thing we need to do is update the `user_id` columns for our existing ex Head back to the Supabase dashboard, and select Table editor from the sidebar. You will notice each entry has `user_id` set to `NULL`. We need to update this value to the proper `user_id`. -![Supabase null users in table](/img/guides/integrations/stytch/16.png) +![Supabase null users in table](/docs/img/guides/integrations/stytch/16.png) To get the `user_id` for our Stytch user, you can pull it from the welcome page in our example app (eg `user-test-61497d40-f957-45cd-a6c8-5408d22e93bc`). -![Get user_id](/img/guides/integrations/stytch/17.png) +![Get user_id](/docs/img/guides/integrations/stytch/17.png) Update each row in Supabase to this `user_id`. -![Populate user_id](/img/guides/integrations/stytch/18.png) +![Populate user_id](/docs/img/guides/integrations/stytch/18.png) Return to `localhost:3000`, and you will see your expenses listed. -![Listed expenses](/img/guides/integrations/stytch/19.png) +![Listed expenses](/docs/img/guides/integrations/stytch/19.png) We now have a basic expense tracker application powered by Stytch, Supabase, and Next.js. From here you could add additional features like adding, editing, and organizing your expenses further. @@ -651,7 +648,7 @@ export const authenticateTokenStartSession = async (req, res) => { With these two changes you will now have a working Google One Tap authentication method along with email magic links. -![Google One Tap](/img/guides/integrations/stytch/20.png) +![Google One Tap](/docs/img/guides/integrations/stytch/20.png) ## Resources diff --git a/apps/temp-docs/docs/guides/integrations/supertokens.mdx b/apps/temp-docs/docs/guides/integrations/supertokens.mdx index eafc7c9c28d..d83f13b267d 100644 --- a/apps/temp-docs/docs/guides/integrations/supertokens.mdx +++ b/apps/temp-docs/docs/guides/integrations/supertokens.mdx @@ -26,7 +26,7 @@ Select the same `Region` you host your app's backend in. Click `Create new project`. -![New Supabase project settings](/img/guides/integrations/supertokens/supabase_dashboard_create.png) +![New Supabase project settings](/docs/img/guides/integrations/supertokens/supabase_dashboard_create.png) ## Step 2: Creating tables in Supabase @@ -45,7 +45,7 @@ Create two new columns: Click `Save` to create the new table. -![Users table](/img/guides/integrations/supertokens/supabase_table_create.png) +![Users table](/docs/img/guides/integrations/supertokens/supabase_table_create.png) ## Step 3: Setup your Next.js App with SuperTokens. @@ -53,7 +53,7 @@ Since the scope of this guide is limited to the integration between SuperTokens Once you finish setting up your app, you will be greeted with the following screen -![SuperTokens Auth Screen](/img/guides/integrations/supertokens/supertokens_thirdpartyemailpassword_auth_screen.png) +![SuperTokens Auth Screen](/docs/img/guides/integrations/supertokens/supertokens_thirdpartyemailpassword_auth_screen.png) ## Step 4: Creating a Supabase JWT to access Supabase @@ -294,10 +294,7 @@ function ProtectedPage() { const supabase = getSupabase(accessTokenPayload.supabase_token) // retrieve the user's name from the users table whose email matches the email in the JWT - const { data } = await supabase - .from('users') - .select('email') - .eq('user_id', userId) + const { data } = await supabase.from('users').select('email').eq('user_id', userId) if (data.length > 0) { setEmail(data[0].email) @@ -363,11 +360,11 @@ Our first policy will check whether the user is the owner of the email. Select `Authentication` from the Supabase sidebar menu, click `Policies`, and then `New Policy` on the `Users` table. -![Create new policy](/img/guides/integrations/supertokens/create_policy.png) +![Create new policy](/docs/img/guides/integrations/supertokens/create_policy.png) From the modal, select `Create a policy from scratch` and add the following. -![Policy settings for SELECT](/img/guides/integrations/supertokens/policy_config_select.png) +![Policy settings for SELECT](/docs/img/guides/integrations/supertokens/policy_config_select.png) This policy is calling the PostgreSQL function we just created to get the currently logged in user's ID `auth.user_id()` and checking whether this matches the `user_id` column for the current `email`. If it does, then it will allow the user to select it, otherwise it will continue to deny. @@ -379,7 +376,7 @@ Our second policy will check whether the `user_id` being inserted is the same as Create another policy and add the following: -![Policy settings for INSERT](/img/guides/integrations/supertokens/policy_config_insert.png) +![Policy settings for INSERT](/docs/img/guides/integrations/supertokens/policy_config_insert.png) Similar to the previous policy we are calling the PostgreSQL function we created to get the currently logged in user's ID `auth.user_id()` and check whether this matches the `user_id` column for the row we are trying to insert. If it does, then it will allow the user to insert the row, otherwise it will continue to deny. @@ -389,11 +386,11 @@ Click `Review` and then `Save policy`. You can now sign up and you should see the following screen: -![SuperTokens App Authenticated](/img/guides/integrations/supertokens/supabase_app_authenticated_screen.png) +![SuperTokens App Authenticated](/docs/img/guides/integrations/supertokens/supabase_app_authenticated_screen.png) If you navigate to your table you should see a new row with the user's `user_id` and `email`. -![Supabase Users table](/img/guides/integrations/supertokens/table_with_user.png) +![Supabase Users table](/docs/img/guides/integrations/supertokens/table_with_user.png) ## Resources diff --git a/apps/temp-docs/docs/guides/integrations/vercel.mdx b/apps/temp-docs/docs/guides/integrations/vercel.mdx index 846a4bec3cb..dd2ec91417b 100644 --- a/apps/temp-docs/docs/guides/integrations/vercel.mdx +++ b/apps/temp-docs/docs/guides/integrations/vercel.mdx @@ -18,7 +18,7 @@ From the Supabase dashboard, click `New project` and select an organization. Give your project a `name`, `password`, select a `region` close to your potential users and click `Create new project`. -![Create a Supabase project](/img/guides/integrations/vercel/create-supabase-project.png) +![Create a Supabase project](/docs/img/guides/integrations/vercel/create-supabase-project.png) Supabase will take a couple of minutes to configure the infrastructure. @@ -57,15 +57,15 @@ This will create a new todos table, enable row level security, add policies for From your [Vercel dashboard](https://vercel.com/dashboard), click `New Project`. -![Create new Vercel project](/img/guides/integrations/vercel/create-vercel-project.png) +![Create new Vercel project](/docs/img/guides/integrations/vercel/create-vercel-project.png) Under the `Clone Template` menu, click `Next.js`. -![Clone Next.js template](/img/guides/integrations/vercel/clone-next-js-template.png) +![Clone Next.js template](/docs/img/guides/integrations/vercel/clone-next-js-template.png) In the `Create Git Repository` section, click `GitHub`, select your username under `GIT SCOPE`, enter a name for your project, choose whether you want your repo `private` or `public`, and click `Create`. -![New GitHub repo settings](/img/guides/integrations/vercel/repo-settings.png) +![New GitHub repo settings](/docs/img/guides/integrations/vercel/repo-settings.png) This will create a new GitHub repository, clone and commit the Next.js starter project, then build and deploy your new project to Vercel. @@ -75,19 +75,19 @@ Navigate to `Settings`, `Integrations`, then click `Browse Marketplace`. Search for `Supabase` and click the Supabase integration. -![Supabase integration](/img/guides/integrations/vercel/supabase-integration.png) +![Supabase integration](/docs/img/guides/integrations/vercel/supabase-integration.png) Click `Add Integration`. Select your account from the `Vercel Scope` dropdown, and click `CONTINUE`. -![Choose scope](/img/guides/integrations/vercel/choose-scope.png) +![Choose scope](/docs/img/guides/integrations/vercel/choose-scope.png) Choose `Specific Projects` and select your new Vercel project from the dropdown, and click `Add Integration`. -![Choose project](/img/guides/integrations/vercel/choose-project.png) +![Choose project](/docs/img/guides/integrations/vercel/choose-project.png) From the Supabase popup, select your new Vercel Project and Supabase project from the dropdowns. -![Supabase integration](/img/guides/integrations/vercel/link-vercel-to-supabase.png) +![Supabase integration](/docs/img/guides/integrations/vercel/link-vercel-to-supabase.png) ## Step 3: Clone GitHub repo @@ -95,11 +95,11 @@ The fastest way to get this project running locally is to clone the repo that Ve Navigate back to the Vercel project `Overview` page, and click `View Git Repository`. -![Vercel Project Dashboard](/img/guides/integrations/vercel/vercel-project-dashboard.png) +![Vercel Project Dashboard](/docs/img/guides/integrations/vercel/vercel-project-dashboard.png) This will open the GitHub repo. From here, click the arrow next to `Code` and copy the url from the dropdown. -![GitHub repo url](/img/guides/integrations/vercel/github-project-url.png) +![GitHub repo url](/docs/img/guides/integrations/vercel/github-project-url.png) Open a terminal window or CLI and run the following command to clone the GitHub repo. @@ -147,7 +147,7 @@ npx vercel link Step through the prompts to link the Vercel project. -![Link project from Vercel](/img/guides/integrations/vercel/vercel-link.png) +![Link project from Vercel](/docs/img/guides/integrations/vercel/vercel-link.png) Copy the environment variables from our Vercel project. diff --git a/apps/temp-docs/docs/guides/with-angular.mdx b/apps/temp-docs/docs/guides/with-angular.mdx index 2de33c1ae72..2db189b097a 100644 --- a/apps/temp-docs/docs/guides/with-angular.mdx +++ b/apps/temp-docs/docs/guides/with-angular.mdx @@ -12,7 +12,7 @@ import ProjectSetup from './_partials/project_setup.mdx' -![Supabase User Management example](/img/user-management-demo.png) +![Supabase User Management example](/docs/img/user-management-demo.png) ### GitHub @@ -414,7 +414,7 @@ npm run start And then open the browser to [localhost:4200](http://localhost:4200) and you should see the completed app. -![Supabase Angular](/img/supabase-angular-demo.png) +![Supabase Angular](/docs/img/supabase-angular-demo.png) ## Bonus: Profile photos diff --git a/apps/temp-docs/docs/guides/with-expo.mdx b/apps/temp-docs/docs/guides/with-expo.mdx index 598fbf8f03d..62ecd484cc9 100644 --- a/apps/temp-docs/docs/guides/with-expo.mdx +++ b/apps/temp-docs/docs/guides/with-expo.mdx @@ -5,14 +5,9 @@ description: Learn how to use Supabase in your React Native App. sidebar_label: Expo --- -import Tabs from '@theme/Tabs' -import TabItem from '@theme/TabItem' -import QuickstartIntro from './_partials/quickstart_intro.md' -import ProjectSetup from './_partials/project_setup.mdx' - -![Supabase User Management example](/img/supabase-flutter-demo.png) +![Supabase User Management example](/docs/img/supabase-flutter-demo.png) ### GitHub @@ -126,18 +121,10 @@ export default function Auth() { /> - + @@ -242,7 +235,7 @@ npm run dev And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app. -![Supabase Nuxt 3](/img/supabase-vue-3-demo.png) +![Supabase Nuxt 3](/docs/img/supabase-vue-3-demo.png) ## Bonus: Profile photos @@ -262,11 +255,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We class="avatar image" style="width: 10em; height: 10em;" /> -
+
- +
diff --git a/apps/temp-docs/docs/guides/with-react.mdx b/apps/temp-docs/docs/guides/with-react.mdx index 43deef7a598..4d2f668dd53 100644 --- a/apps/temp-docs/docs/guides/with-react.mdx +++ b/apps/temp-docs/docs/guides/with-react.mdx @@ -12,7 +12,7 @@ import ProjectSetup from './_partials/project_setup.mdx' -![Supabase User Management example](/img/user-management-demo.png) +![Supabase User Management example](/docs/img/user-management-demo.png) ### GitHub @@ -94,9 +94,7 @@ export default function Auth() {

Supabase + React

-

- Sign in via magic link with your email below -

+

Sign in via magic link with your email below

{loading ? ( 'Sending magic link...' ) : ( @@ -227,11 +225,7 @@ const Account = ({ session }) => {
)} -
@@ -267,11 +261,7 @@ export default function App() { return (
- {!session ? ( - - ) : ( - - )} + {!session ? : }
) } @@ -285,7 +275,7 @@ npm start And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app. -![Supabase React](/img/supabase-react-demo.png) +![Supabase React](/docs/img/supabase-react-demo.png) ## Bonus: Profile photos @@ -309,9 +299,7 @@ export default function Avatar({ url, size, onUpload }) { const downloadImage = async (path) => { try { - const { data, error } = await supabase.storage - .from('avatars') - .download(path) + const { data, error } = await supabase.storage.from('avatars').download(path) if (error) { throw error } @@ -335,9 +323,7 @@ export default function Avatar({ url, size, onUpload }) { const fileName = `${Math.random()}.${fileExt}` const filePath = `${fileName}` - let { error: uploadError } = await supabase.storage - .from('avatars') - .upload(filePath, file) + let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file) if (uploadError) { throw uploadError diff --git a/apps/temp-docs/docs/guides/with-redwoodjs.mdx b/apps/temp-docs/docs/guides/with-redwoodjs.mdx index 4c8830df945..e9ed843cc0b 100644 --- a/apps/temp-docs/docs/guides/with-redwoodjs.mdx +++ b/apps/temp-docs/docs/guides/with-redwoodjs.mdx @@ -639,7 +639,7 @@ yarn rw dev And then open the browser to [localhost:8910](http://localhost:8910) and you should see the completed app. -![Supabase RedwoodJS](/img/supabase-redwoodjs-demo.png) +![Supabase RedwoodJS](/docs/img/supabase-redwoodjs-demo.png) ## Bonus: Profile photos diff --git a/apps/temp-docs/docs/guides/with-solidjs.mdx b/apps/temp-docs/docs/guides/with-solidjs.mdx index 8cdacfcc4cf..d1c5f6a362c 100644 --- a/apps/temp-docs/docs/guides/with-solidjs.mdx +++ b/apps/temp-docs/docs/guides/with-solidjs.mdx @@ -12,7 +12,7 @@ import ProjectSetup from './_partials/project_setup.mdx' -![Supabase User Management example](/img/user-management-demo.png) +![Supabase User Management example](/docs/img/user-management-demo.png) ### GitHub @@ -226,19 +226,11 @@ const Account: Component = ({ session }) => { />
-
- @@ -291,7 +283,7 @@ npm start And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app. -![Supabase SolidJS](/img/supabase-solidjs-demo.png) +![Supabase SolidJS](/docs/img/supabase-solidjs-demo.png) ## Bonus: Profile photos diff --git a/apps/temp-docs/docs/guides/with-svelte.mdx b/apps/temp-docs/docs/guides/with-svelte.mdx index 2a423276170..feacadd1122 100644 --- a/apps/temp-docs/docs/guides/with-svelte.mdx +++ b/apps/temp-docs/docs/guides/with-svelte.mdx @@ -12,7 +12,7 @@ import ProjectSetup from './_partials/project_setup.mdx' -![Supabase User Management example](/img/user-management-demo.png) +![Supabase User Management example](/docs/img/user-management-demo.png) ### GitHub @@ -106,12 +106,7 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L />
-
@@ -262,7 +257,7 @@ And then open the browser to [localhost:5173](http://localhost:5173) and you sho > ⚠️ WARNING: Svelte uses Vite and the default port is `5173`, Supabase uses `port 3000`. To change the redirection port for supabase go to: `Authentication > Settings` and change the `Site Url` to `localhost:5173` -![Supabase Svelte](/img/supabase-svelte-demo.png) +![Supabase Svelte](/docs/img/supabase-svelte-demo.png) ## Bonus: Profile photos @@ -288,9 +283,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We const downloadImage = async (path: string) => { try { - const { data, error } = await supabase.storage - .from('avatars') - .download(path) + const { data, error } = await supabase.storage.from('avatars').download(path) if (error) { throw error @@ -317,9 +310,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We const fileExt = file.name.split('.').pop() const filePath = `${Math.random()}.${fileExt}` - let { error } = await supabase.storage - .from('avatars') - .upload(filePath, file) + let { error } = await supabase.storage.from('avatars').upload(filePath, file) if (error) { throw error @@ -340,8 +331,8 @@ Let's create an avatar for the user so that they can upload a profile photo. We
- {#if avatarUrl} {avatarUrl {:else} + {#if avatarUrl} {avatarUrl {:else}
{/if}
diff --git a/apps/temp-docs/docs/guides/with-sveltekit.mdx b/apps/temp-docs/docs/guides/with-sveltekit.mdx index 86f2c66592d..3f6964977e3 100644 --- a/apps/temp-docs/docs/guides/with-sveltekit.mdx +++ b/apps/temp-docs/docs/guides/with-sveltekit.mdx @@ -12,7 +12,7 @@ import ProjectSetup from './_partials/project_setup.mdx' -![Supabase User Management example](/img/user-management-demo.png) +![Supabase User Management example](/docs/img/user-management-demo.png) ### GitHub @@ -78,52 +78,52 @@ Update your `src/routes/+layout.svelte`: ```html title="src/routes/+layout.svelte"
- +
``` Create a new `src/routes/+layout.ts` file to handle the session on the client-side. ```ts title="src/routes/+layout.ts" -import type { LayoutLoad } from './$types'; -import { getSupabase } from '@supabase/auth-helpers-sveltekit'; +import type { LayoutLoad } from './$types' +import { getSupabase } from '@supabase/auth-helpers-sveltekit' export const load: LayoutLoad = async (event) => { - const { session } = await getSupabase(event); - return { session }; -}; + const { session } = await getSupabase(event) + return { session } +} ``` Create a new `src/routes/+layout.server.ts` file to handle the session on the server-side. ```ts title="src/routes/+layout.server.ts" -import type { LayoutServerLoad } from './$types'; -import { getServerSession } from '@supabase/auth-helpers-sveltekit'; +import type { LayoutServerLoad } from './$types' +import { getServerSession } from '@supabase/auth-helpers-sveltekit' export const load: LayoutServerLoad = async (event) => { - return { - session: await getServerSession(event) - }; -}; + return { + session: await getServerSession(event), + } +} ``` Be sure to create `src/hooks.client.ts` and `src/hooks.server.ts` in order to get the auth helper started on the client and server-side. @@ -142,43 +142,39 @@ Let's set up a Svelte component to manage logins and sign ups. We'll use Magic L ```html title="src/routes/Auth.svelte" -
-
-

Supabase + SvelteKit

-

Sign in via magic link with your email below

-
- -
-
- -
-
+ +
+

Supabase + SvelteKit

+

Sign in via magic link with your email below

+
+ +
+
+ +
+
``` @@ -189,114 +185,110 @@ Create a new `Account.svelte` component to handle this functionality. ```html title="src/routes/Account.svelte" -
-
- - -
-
- - -
-
- - -
+ +
+ + +
+
+ + +
+
+ + +
-
- -
+
+ +
-
- -
+
+ +
``` @@ -306,20 +298,20 @@ Now that we have all the components in place, let's update `src/routes/+page.sve ```html title="src/routes/+page.svelte" - Supabase + SvelteKit - + Supabase + SvelteKit + {#if !$page.data.session} - + {:else} - + {/if} ``` @@ -331,7 +323,7 @@ npm run dev And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app. -![Supabase Svelte](/img/supabase-svelte-demo.png) +![Supabase Svelte](/docs/img/supabase-svelte-demo.png) ## Bonus: Profile photos @@ -343,93 +335,87 @@ Let's create an avatar for the user so that they can upload a profile photo. We ```html title="src/routes/Avatar.svelte"
- {#if avatarUrl} - {avatarUrl - {:else} -
- {/if} + {#if avatarUrl} {avatarUrl {:else} +
+ {/if} -
- - -
+
+ + +
``` @@ -443,13 +429,9 @@ And then we can add the widget to the Account page: import Avatar from './Avatar.svelte' -
+ - + diff --git a/apps/temp-docs/docs/guides/with-vue-3.mdx b/apps/temp-docs/docs/guides/with-vue-3.mdx index 30a7be5449e..8f328be5c64 100644 --- a/apps/temp-docs/docs/guides/with-vue-3.mdx +++ b/apps/temp-docs/docs/guides/with-vue-3.mdx @@ -12,7 +12,7 @@ import ProjectSetup from './_partials/project_setup.mdx' -![Supabase User Management example](/img/user-management-demo.png) +![Supabase User Management example](/docs/img/user-management-demo.png) ### GitHub @@ -103,12 +103,7 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link

Supabase + Vue 3

Sign in via magic link with your email below

- +
- +
@@ -279,7 +272,7 @@ npm run dev And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app. -![Supabase Vue 3](/img/supabase-vue-3-demo.png) +![Supabase Vue 3](/docs/img/supabase-vue-3-demo.png) ## Bonus: Profile photos @@ -304,9 +297,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We const downloadImage = async () => { try { - const { data, error } = await supabase.storage - .from('avatars') - .download(path.value) + const { data, error } = await supabase.storage.from('avatars').download(path.value) if (error) throw error src.value = URL.createObjectURL(data) } catch (error) { @@ -326,9 +317,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We const fileExt = file.name.split('.').pop() const filePath = `${Math.random()}.${fileExt}` - let { error: uploadError } = await supabase.storage - .from('avatars') - .upload(filePath, file) + let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file) if (uploadError) throw uploadError emit('update:path', filePath) @@ -354,11 +343,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We class="avatar image" :style="{ height: size + 'em', width: size + 'em' }" /> -
+