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`. - + ### 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** - + 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. - + ## 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. ->  +>  > 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 - + 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`: -  +  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: -  +  3. In the connection modal that appears, enter the `Host` and `Port` for your Supabase database and click **Continue**. -  +  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. -  +  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**: -  +  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. - + ## 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`. -  +  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. - + 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. - + 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 - + ### 2.2. Transform your data - + 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. - + ### 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! - + ## 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`. - + After pressing **Confirm**, the redirect URLs dashboard will update to show your new entry. We will use this URL later on. - + ## 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. - + ## Step 3: Creating data in Supabase @@ -64,17 +64,17 @@ Add three new columns: Click **Save** to create the new table. - + 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**. - + Use **Insert Row** to further populate the table with expenses. - + ## 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**. - + > Note: Supabase values can be found under **Settings** > **API** for your project. - + 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. - + Enter your email address and press **Continue with email**. - + In your inbox you will find a login request from your app. - + 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. - + 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**. - + From the modal, select **For full customization create a policy from scratch** and add the following. - + 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`. - + 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`). - + Update each row in Supabase to this `user_id`. - + Return to `localhost:3000`, and you will see your expenses listed. - + 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. - + ## 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`. - + ## Step 2: Creating tables in Supabase @@ -45,7 +45,7 @@ Create two new columns: Click `Save` to create the new table. - + ## 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 - + ## 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. - + From the modal, select `Create a policy from scratch` and add the following. - + 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: - + 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: - + If you navigate to your table you should see a new row with the user's `user_id` and `email`. - + ## 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`. - + 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`. - + Under the `Clone Template` menu, click `Next.js`. - + 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`. - + 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. - + Click `Add Integration`. Select your account from the `Vercel Scope` dropdown, and click `CONTINUE`. - + Choose `Specific Projects` and select your new Vercel project from the dropdown, and click `Add Integration`. - + From the Supabase popup, select your new Vercel Project and Supabase project from the dropdowns. - + ## 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`. - + This will open the GitHub repo. From here, click the arrow next to `Code` and copy the url from the dropdown. - + 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. - + 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'