Skip to content

zoom/zoomapps-workshop-sample

Repository files navigation

Getting Started with Zoom Apps

This is a Next.js project bootstrapped with create-next-app.

I've modified it a bit so that we can create a powerful Zoom App development environment.

Follow along with these branches to implement it yourself or check out the completed project on the main branch (here).

Prerequisites

You'll need the following for this workshop:

  1. Node JS
  2. Ngrok
  3. Zoom Account
  4. Zoom App Credentials (Instructions below)
    1. Client ID
    2. Client Secret
    3. Redirect URL

Before you start

Make sure that you have created an app on the Zoom Marketplace.

Check out our guide here

Getting Started

Install dependencies

npm install

Start Ngrok and copy your URL

ngrok http 3000

ngrok screen

In your browser, navigate to your app in the Zoom Marketplace.

In the Basic Information tab add the /auth route to your Ngrok URL for the OAuth Redirect URL

oauth information

Next, select the Surface tab and enter the Ngrok URL as your Home URL

surface tab

Enter your credentials in .env.local

# Do not store credentials in plain text on production environments

ZOOM_CLIENT_ID=
ZOOM_CLIENT_SECRET=
ZOOM_REDIRECT_URL=

# Generated after you run npm install
SESSION_SECRET=random_string_generated_for_you

Run the development server:

npm run dev

Navigate to your Ngrok URL to see your new app!