How to authenticate a Next.js application using Zoom
Tags: appwrite, nextjs, zoomauth, oauth
Published: 2022-06-13 18:52:11

---
title: How to authenticate a Next.js application using Zoom
published: true
description: 
tags: #Appwrite #Nextjs #ZoomAuth #OAuth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p17m4sknwwflua32i5hu.jpg
---

Authentication is an integral part of building robust and secure applications. Companies such as Zoom, Apple, Google, and Facebook are constantly creating innovative ideas that help their users securely share information with third-party applications without remembering multiple credentials. The technology facilitating this process is known as Open Authentication (OAuth), a framework that enables users to grant access to websites or applications without compromise.

In this post, we will learn how to authenticate a Next.js application using Appwrite’s Zoom OAuth provider. The project’s GitHub repository can be found [here](https://github.com/Mr-Malomz/zoom-auth).

## Prerequisites

To fully grasp the concepts presented in this tutorial, the following requirements apply:

- Basic understanding of JavsScript and React
- Docker [installation](https://www.docker.com/get-started/)
- An Appwrite instance; check out this [article](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba) on how to set up an instance
- A Zoom account; [**s**](https://marketplace.zoom.us/)[**ignup**](https://marketplace.zoom.us/) **is completely free**


## Getting started

We need to create a Next.js starter project by navigating to the desired directory and running the command below in our terminal.
```bash
    npx create-next-app zoom-auth && cd zoom_auth
```
The command creates a Next.js project called `zoom-auth` and navigates into the project directory.

## Installing dependencies

**Installing TailwindCSS**
[TailwindCSS](https://tailwindcss.com/) is a utility-first CSS framework packed with classes to help us style our web page. To use it in our application, run the command below in our terminal.

```bash
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
```
The command installs TailwindCSS and its dependencies and generates  `tailwind.config.js` and `postcss.config.js` files.

Next, we need to update `tailwind.config.js` file with the snippet below:
```js
    module.exports = {
      content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }
```
Finally, we need to add TailwindCSS directives to our application. The directives give our application access to TailwindCSS utility classes. To do this, navigate to the `styles` folder and update the `globals.css` files in it with the snippet below:
```css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
```
**Installing Appwrite**
[Appwrite](https://appwrite.io?utm_source=hackmamba&utm_medium=hackmamba-blog) is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications. To install it, run the command below:
```bash
    npm install appwrite
```

## Creating a new Appwrite project

To create a new project,  start up the Appwrite instance on your machine and navigate to the specified hostname and port `http://localhost:80`. Next, we need to log in to our account or create an account if we don’t have one. 


![Appwrite running](https://paper-attachments.dropbox.com/s_9C6F95223612512F2BFCBBAA719BAF62E5E51518F8EC1B3A16905A2D91336244_1650158621491_screencapture-localhost-auth-signup-2022-04-17-02_22_56.png)


You can learn more about setting up Appwrite [here](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba). On the console, click on the **Create Project** button, input `appwrite_zoom` as the name, and click **Create**.

![Create project](https://paper-attachments.dropbox.com/s_9C6F95223612512F2BFCBBAA719BAF62E5E51518F8EC1B3A16905A2D91336244_1650159125946_Screenshot+2022-04-17+at+02.28.39.png)
![Enter project name](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653953612228_Screenshot+2022-05-30+at+15.00.51.png)


The project dashboard will appear on the console. Next, click on the **settings** tab and copy the **Project ID** and **API Endpoint**. 

![Copy  Project ID and API Endpoint](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653954578896_Screenshot+2022-05-30+at+15.01.22.png)


Next, we’ll navigate to our project root directory and create a `helper` folder; here, create an `utils.js` file and add the snippet below:
```js
    import { Appwrite } from 'appwrite';
    const sdk = new Appwrite();
    sdk.setEndpoint('http://localhost/v1').setProject('ADD YOUR PROJECTID HERE');
    
    export default sdk;
```
**Activating Zoom auth method on Appwrite**
To do this,  navigate to the **Users** menu, select the **Settings** tab, and enable the **Zoom** option:

![navigate to settings](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653956046320_Screenshot+2022-05-30+at+15.03.10.png)


Upon enabling the Zoom option, we will be required to fill in the **App ID** and **App Secret**. We will fill them in shortly. However, we need to copy the callback URI provided by Appwrite. We need it to authenticate our application.

![Copy callback URI](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653956240187_Screenshot+2022-05-30+at+16.01.55.png)


**Create an App on Zoom**
To enable Zoom’s OAuth provider with Appwrite, we need to sign in/sign up on [Zoom’s marketplace](https://marketplace.zoom.us/) and create an application.

Click on the **Develop** dropdown, and select **Build App****:**

![Build App](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653955329206_Screenshot+2022-05-30+at+14.25.46.png)


Click on **Create** under the OAuth section:

![](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653955420887_Screenshot+2022-05-30+at+14.25.59.png)



Input `appwrite_zoom` as the **App Name**, select **Account-level app**, and **Create**.

![Create app](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653955618882_Screenshot+2022-05-30+at+14.27.37.png)


Next, we paste the callback URI we copied earlier into the **Redirect URL for OAuth** and **Add allow lists** fields. We also need to copy the Client ID and Client Secret and paste them into our Appwrite configuration. Then, click **Update****.**

![Paste URI and copy Client ID and Client Secret](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653957497726_Screenshot+2022-05-31+at+01.24.58.png)
![Paste URI](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653957497739_Screenshot+2022-05-31+at+01.25.39.png)

![Update Zoom provider on Appwrite](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653957497774_Screenshot+2022-05-31+at+01.29.32.png)


Navigate to the **Information** menu and input `Appwrite authentication using Zoom` as the **Short description** and the **Long description**.

![Fill in description](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653958158645_Screenshot+2022-05-30+at+14.35.48.png)


On the same **Information** menu, scroll down to the **Developer Contact Information** section and fill in your **Name** and **Email Address****.**

![](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653958418063_Screenshot+2022-05-31+at+01.53.27.png)


Navigate to the **Scope** menu, click on the **Add Scopes** button, click **User,** and then select **View all user information**. This scope selected will give our application access to the user’s information.

![add scope](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653959467652_Screenshot+2022-05-30+at+14.37.29.png)
![select user](https://paper-attachments.dropbox.com/s_BDB4B2E9DEBC947CF21789BC4224D1B5D1E6999B18844A1ABC22F2142E2E2A61_1653959467672_Screenshot+2022-05-30+at+14.38.13.png)



## Building the authentication in Next.js

The application will contain two pages; a page to log in and another page to show logged-in user details.

**Creating a** **l****og****i****n** **p****age**
To do this, we need to update the content of the `index.js` file inside the `pages` folder with the snippet below:
```js
    import Head from 'next/head';
    import styles from '../styles/Home.module.css';
    import sdk from '../helper/utils';
    
    export default function Home() {
      const loginWithZoom = async () => {
        try {
          await sdk.account.createOAuth2Session(
            'zoom',
            'http://localhost:3000/dashboard'
          );
        } catch (error) {
          console.log(error);
        }
      };
    
      return (
        <div className={styles.container}>
          <Head>
            <title>Appwrite|Zoom</title>
            <meta name='description' content='Appwrite and Zoom' />
            <link rel='icon' href='/favicon.ico' />
          </Head>
          <main className={styles.main}>
            <h1 className='text-2xl font-medium text-indigo-700'>
              Auth with Appwrite and Zoom
            </h1>
            <div className='w-11/12 md:w-2/4 flex flex-col items-center p-16 border rounded-lg'>
              <p className='text-sm mb-4'>Click on the button below to login</p>
              <button
                onClick={loginWithZoom}
                className='px-6 py-2 h-10 bg-black text-white rounded-lg'
              >
                Login with zoom
              </button>
            </div>
          </main>
        </div>
      );
    }
```
The snippet above does the following:

- Imports the required dependencies.
- Creates a `loginWithZoom` asynchronous function that uses the Appwrite `sdk` we initialized earlier to authenticate using `zoom` as the provider and `http://localhost:3000/dashboard` as the URL it redirects to when the authentication is successful. We will create the dashboard page in the next section.
- Creates markup for the login page.

**Creating a** **d****ashboard** **p****age**
Next, in the same `pages` folder, we need to create a `dashboard.js` file and update it with the snippet below:
```js
    import Head from 'next/head';
    import styles from '../styles/Home.module.css';
    import sdk from '../helper/utils';
    import { useEffect, useState } from 'react';
    import { useRouter } from 'next/router';
    
    export default function Dashboard() {
      const [session, setSession] = useState(null);
      const router = useRouter();
    
      const getSession = async () => {
        const data = (await sdk) && sdk.account.get();
        data
          .then((res) => setSession(res))
          .catch((err) => {
            router.push('/');
            console.log(err);
          });
      };
    
      useEffect(() => {
        getSession();
      }, []);
    
      const logOut = async () => {
        await sdk.account.deleteSession('current');
        alert('logout successful');
        router.push('/');
      };
    
      return (
        session && (
          <div className={styles.container}>
            <Head>
              <title>Appwrite|Zoom</title>
              <meta name='description' content='Appwrite and Zoom' />
              <link rel='icon' href='/favicon.ico' />
            </Head>
            <main className={styles.main}>
              <h1 className='text-2xl font-medium text-indigo-700 mb-4'>
                Authenticated Page with Appwrite and Zoom
              </h1>
              <p>
                Welcome:{' '}
                <span className='font-medium capitalize'>{session.name}</span>
              </p>
              <p>
                email:{' '}
                <span className='font-medium text-indigo-700'>{session.email}</span>
              </p>
              <button
                onClick={logOut}
                className='px-6 py-2 h-10 mt-12 border-2 border-black text-black rounded-lg'
              >
                Log Out
              </button>
            </main>
          </div>
        )
      );
    }
```
The snippet above does the following:

- Imports the required dependencies.
- Creates states and route variables to manage logged in user sessions and route accordingly.
- Creates a `getSession` function to get the logged-in user session and re-route to the login page if the session is empty. We also called the function upon page load using the `useEffect` hook.
- Creates a `logOut` function to log the user out.
- Includes markup to show the user’s name and email.

With that done, we can start a development server using the command below:

```bash
    npm run dev
```


![](https://media.giphy.com/media/iKBpFwHoKzTOkUTrws/giphy.gif)


[https://media.giphy.com/media/iKBpFwHoKzTOkUTrws/giphy.gif](https://media.giphy.com/media/iKBpFwHoKzTOkUTrws/giphy.gif)


# Conclusion

This post discussed how to authenticate a Next.js application using Appwrite’s Zoom OAuth provider.

These resources might be helpful:

- [Set](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba) [](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba)[up Appwrite instance locally](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba)
- [Appwrite OAuth2 documentation](https://appwrite.io/docs/client/account?sdk=web-default#accountCreateOAuth2Session?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Create an OAuth App on zoom](https://marketplace.zoom.us/docs/guides/build/oauth-app/)
- [Appwrite web SDK](https://github.com/appwrite/sdk-for-web?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [TailwindCSS](https://tailwindcss.com/)