Update social login guides

Add the correct steps for the Supabase Dashboard

apps/docs/components/MDX/social_provider_settings_supabase.mdx

@@ -0,0 +1,6 @@
+- Go to your [Supabase Project Dashboard](https://app.supabase.com)
+- In the left sidebar, click the `Authentication` icon (near the top)
+- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
+- Click on **{props.client}** from the accordion list to expand and turn **{props.client} Enabled** to ON
+- Enter your **{props.client} Client ID** and **{props.client} Client Secret** saved in the previous step
+- Click `Save`

apps/docs/components/MDX/social_provider_setup.mdx

@@ -0,0 +1,8 @@
+The next step requires a callback URL, which looks like this:
+
+`https://<project-ref>.supabase.co/auth/v1/callback`
+
+- Go to your [Supabase Project Dashboard](https://app.supabase.com)
+- Click on the `Authentication` icon in the left sidebar
+- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
+- Click on your provider and you'll find your **Redirect URL**, you can click `Copy` to copy it to the clipboard

apps/docs/components/index.tsx

@@ -17,6 +17,8 @@ import Extensions from './Extensions'
 import { Heading } from './CustomHTMLElements'
 import QuickstartIntro from './MDX/quickstart_intro.mdx'
 import ProjectSetup from './MDX/project_setup.mdx'
+import SocialProviderSetup from './MDX/social_provider_setup.mdx'
+import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx'
 import { Mermaid } from 'mdx-mermaid/lib/Mermaid'
 import InlineCodeTag from './CustomHTMLElements/InlineCode'
 import React from 'react'
@@ -42,6 +44,8 @@ const components = {
   JwtGenerator,
   QuickstartIntro,
   ProjectSetup,
+  SocialProviderSetup,
+  SocialProviderSettingsSupabase,
   Mermaid,
   Extensions,
   Alert: (props: any) => (

apps/docs/pages/guides/auth/social-login/auth-apple.mdx

@@ -57,19 +57,7 @@ This will serve as the `client_id` when you make API calls to authenticate the u
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Configure your Services ID
 
@@ -167,13 +155,7 @@ puts token
 
 ## Add your OAuth credentials to Supabase
 
-- Go to your [Supabase Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Apple Enabled` to ON.
-- Enter your `client_id` and `client_secret` saved in the previous steps.
-- Click `Save`.
+<SocialProviderSettingsSupabase client="Apple" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx

@@ -25,19 +25,7 @@ Setting up Bitbucket logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Bitbucket OAuth app
 
@@ -56,13 +44,7 @@ The next step requires a callback URL, which looks like this:
 
 ## Add your Bitbucket credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Bitbucket Enabled` to ON
-- Enter your `client_id` and `client_secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="Bitbucket" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-discord.mdx

@@ -29,19 +29,7 @@ Setting up Discord logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-In the next step you require a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Discord Application
 
@@ -55,13 +43,7 @@ In the next step you require a callback URL, which looks like this:
 
 ## Add your Discord credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Discord Enabled` to ON
-- Enter your `client_id` and `client_secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="Discord" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-facebook.mdx

@@ -31,21 +31,7 @@ Setting up Facebook logins for your application consists of 3 parts:
 - Fill in your app information, then click `Create App`.
 - This should bring you to the screen: `Add Products to Your App`. (Alternatively you can click on `Add Product` in the left sidebar to get to this screen.)
 
-## Find your callback URI
-
-The next step requires a callback URI, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Set up FaceBook Login for your Facebook App
 
@@ -73,13 +59,7 @@ You can read more about access levels [here](https://developers.facebook.com/doc
 
 ## Enter your Facebook App ID and Secret into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Facebook Enabled` to ON
-- Enter your `Facebook client ID` and `Facebook secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="Facebook" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-github.mdx

@@ -34,19 +34,7 @@ Go to the [GitHub Developer Settings](https://github.com/settings/developers) pa
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Register a new OAuth application
 
@@ -66,13 +54,7 @@ Copy your new OAuth credentials
 
 ## Enter your GitHub credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `GitHub Enabled` to ON
-- Enter your `GitHub Client ID` and `GitHub Client Secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="GitHub" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx

@@ -25,19 +25,7 @@ Setting up GitLab logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create your GitLab Application
 
@@ -53,13 +41,7 @@ The next step requires a callback URL, which looks like this:
 
 ## Add your GitLab credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `GitLab Enabled` to ON.
-- Enter your `client_id` and `client_secret` saved in the previous step.
-- Click `Save`.
+<SocialProviderSettingsSupabase client="GitLab" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-google.mdx

@@ -48,19 +48,7 @@ From your project's dashboard screen:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create your Google credentials
 
@@ -81,13 +69,7 @@ Copy your new OAuth credentials
 
 ## Enter your Google credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Google Enabled` to ON
-- Enter your `Google Client ID` and `Google Client Secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="Google" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx

@@ -25,19 +25,7 @@ Setting up LinkedIn logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a LinkedIn OAuth app
 
@@ -52,13 +40,7 @@ The next step requires a callback URL, which looks like this:
 
 ## Enter your LinkedIn credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `LinkedIn Enabled` to ON.
-- Enter your `client_id` and `client_secret` saved in the previous step.
-- Click `Save`.
+<SocialProviderSettingsSupabase client="LinkedIn" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-notion.mdx

@@ -36,19 +36,7 @@ Setting up Notion logins for your application consists of 3 parts:
 
 ![notion.so](/docs/img/guides/auth-notion/notion-redirect-uri.png)
 
-You can retrieve the redirect uri with the following steps:
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-Your redirect uri should look like the following: `https://<project-ref>.supabase.co/auth/v1/callback`
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Add your Notion credentials into your Supabase Project
 
@@ -56,12 +44,7 @@ Your redirect uri should look like the following: `https://<project-ref>.supabas
 
 ![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)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Under `External OAuth Providers` turn `Notion Enabled` to ON
-- Enter the "OAuth client ID" and "OAuth client secret" obtained in the `client id` and `client secret` fields.
-- Click `Save`
+<SocialProviderSettingsSupabase client="Notion" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-slack.mdx

@@ -25,19 +25,7 @@ Setting up Slack logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Slack OAuth app
 
@@ -65,13 +53,7 @@ Under `Redirect URLs`:
 
 ## Enter your Slack credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Slack Enabled` to ON.
-- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
-- Click `Save`.
+<SocialProviderSettingsSupabase client="Slack" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-spotify.mdx

@@ -25,19 +25,7 @@ Setting up Spotify logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Spotify OAuth app
 
@@ -60,13 +48,7 @@ Under `Redirect URIs`:
 
 ## Enter your Spotify credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Spotify Enabled` to ON.
-- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
-- Click `Save`.
+<SocialProviderSettingsSupabase client="Spotify" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-twitch.mdx

@@ -30,19 +30,7 @@ Setting up Twitch logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-In the next step you require a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Twitch Application
 
@@ -71,13 +59,7 @@ In the next step you require a callback URL, which looks like this:
 
 ## Add your Twitch credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Twitch Enabled` to ON
-- Enter your `client_id` and `client_secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="Twitch" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-twitter.mdx

@@ -25,19 +25,7 @@ Setting up Twitter logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Twitter OAuth app
 
@@ -61,13 +49,7 @@ The next step requires a callback URL, which looks like this:
 
 ## Enter your Twitter credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Twitter Enabled` to ON.
-- Enter your `API Key` (`client_id`) and `API Secret Key` (`client_secret`) saved in the previous step.
-- Click `Save`.
+<SocialProviderSettingsSupabase client="Twitter" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-workos.mdx

@@ -48,12 +48,7 @@ You can pick between any one of the many identity providers that WorkOS supports
 
 ## Add your WorkOS credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Under `External OAuth Providers` turn `WorkOS Enabled` to ON
-- Enter the `Client ID`, `Secret`, and `WorkOS URL` saved in the previous steps. The ``WorkOS URL` setting should be set to https://api.workos.com/
-- Click `Save`
+<SocialProviderSettingsSupabase client="WorkOS" />
 
 ## Add login code to your client app
 

apps/docs/pages/guides/auth/social-login/auth-zoom.mdx

@@ -25,19 +25,7 @@ Setting up Zoom logins for your application consists of 3 parts:
 
 ## Find your callback URL
 
-The next step requires a callback URL, which looks like this:
-
-`https://<project-ref>.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-<video width="99%" muted playsInline controls="true">
-  <source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
-</video>
+<SocialProviderSetup />
 
 ## Create a Zoom Oauth App
 
@@ -61,13 +49,7 @@ Under `Redirect URL for OAuth`
 
 ## Enter your Zoom credentials into your Supabase Project
 
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Zoom Enabled` to ON
-- Enter your `Zoom Client ID` and `Zoom Client Secret` saved in the previous step
-- Click `Save`
+<SocialProviderSettingsSupabase client="Zoom" />
 
 ## Add login code to your client app