diff --git a/web/docs/guides/auth/auth-zoom.mdx b/web/docs/guides/auth/auth-zoom.mdx new file mode 100644 index 00000000000..531e3d2797a --- /dev/null +++ b/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://.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`. + + + +### 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/) diff --git a/web/sidebars.js b/web/sidebars.js index b6694141368..507f8d18b08 100755 --- a/web/sidebars.js +++ b/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', ], }, { diff --git a/web/src/data/authProviders.js b/web/src/data/authProviders.js index 35d74d3fca7..1c1dbac7a12 100644 --- a/web/src/data/authProviders.js +++ b/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 \ No newline at end of file +export default authProviders diff --git a/web/static/img/guides/auth-zoom/zoom-portal.png b/web/static/img/guides/auth-zoom/zoom-portal.png new file mode 100644 index 00000000000..4630dcc6465 Binary files /dev/null and b/web/static/img/guides/auth-zoom/zoom-portal.png differ