Merge pull request #5221 from devkiran/doc/oauth-zoom

Documentation for Sign In with Zoom

web/docs/guides/auth/auth-zoom.mdx

@@ -0,0 +1,107 @@
+---
+id: auth-zoom
+title: 'Login with Zoom'
+description: Add Zoom OAuth to your Supabase project
+---
+
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
+To enable Zoom Auth for your project, you need to set up a Zoom OAuth application and add the application credentials to your Supabase Dashboard.
+
+## Overview
+
+Setting up Zoom logins for your application consists of 3 parts:
+
+- Create and configure a Zoom OAuth App on [Zoom App Marketplace](https://marketplace.zoom.us/)
+- Add your Zoom OAuth keys to your [Supabase Project](https://app.supabase.io)
+- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
+
+## Steps
+
+### Access your Zoom Developer account
+
+- 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)
+
+### 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.io).
+- 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>
+
+### Create a Zoom Oauth App
+
+- Go to [marketplace.zoom.us](https://marketplace.zoom.us/).
+- Click on `Sign In` at the top right to log in.
+- Click `Build App` (from the dropdown Develop)
+- In the OAuth card, click `Create`
+- Type the name of your app
+- Choose app type
+- Click `Create`
+
+Under `App credentials`
+
+- Copy and save your `Client ID`.
+- Copy and save your `Client secret`.
+
+Under `Redirect URL for OAuth`
+
+- Paste your `Callback URL`
+- Click `Continue`
+
+### Enter your Zoom credentials into your Supabase Project
+
+- Go to your [Supabase Project Dashboard](https://app.supabase.io)
+- 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`
+
+### Add login code to your client app
+
+The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
+
+```js
+const { user, session, error } = await supabase.auth.signIn({
+  provider: 'zoom',
+})
+```
+
+Add this function which you can call from a button, link, or UI element.
+
+```js
+async function signInWithZoom() {
+  const { user, session, error } = await supabase.auth.signIn({
+    provider: 'zoom',
+  })
+}
+```
+
+To log out:
+
+```js
+async function signout() {
+  const { error } = await supabase.auth.signOut()
+}
+```
+
+## Resources
+
+- [Supabase Account - Free Tier OK](https://supabase.com)
+- [Supabase JS Client](https://github.com/supabase/supabase-js)
+- [Zoom App Marketplace](https://marketplace.zoom.us/)

web/sidebars.js

@@ -136,6 +136,7 @@ module.exports = {
             'guides/auth/auth-twitter',
             'guides/auth/auth-twilio',
             'guides/auth/auth-messagebird',
+            'guides/auth/auth-zoom',
           ],
         },
         {

web/src/data/authProviders.js

@@ -143,6 +143,15 @@ const authProviders = [
     platform: true,
     selfHosted: true,
   },
+  {
+    name: 'Zoom',
+    // logo: '/img/libraries/dart-icon.svg',
+    href: '/docs/guides/auth/auth-zoom',
+    official: true,
+    supporter: 'Supabase',
+    platform: true,
+    selfHosted: true,
+  },
   {
     name: 'Twilio',
     // logo: '/img/libraries/dart-icon.svg',
@@ -154,4 +163,4 @@ const authProviders = [
   },
 ]
 
-export default authProviders
+export default authProviders