Build a personalized Image Editor with Cloudinary + Auth0
Tags: cloudinary, hackjamstack, auth0, jamstack
Published: 2021-10-17 11:51:45

---
title: Build a personalized Image Editor with Cloudinary + Auth0
published: true
description: 
tags: #cloudinary #hackjamstack #auth0 #jamstack
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8688712k03ih48o2l68c.png
---
Image editing is the art of altering digital photographs, traditional photo-chemical photographs, or illustrations to make them look more like what you saw with your eyes. The constant demand for image editing has brought about the invention of new software, jobs, and specialized personnel to help improve the quality of images.

In this post, we will discuss how to build a personalized image editor using [Cloudinary](https://cloudinary.com/), [Auth0](https://auth0.com/), and [Next.js](https://nextjs.org/). We can think of this as a lighter version [photoshop](https://www.adobe.com/uk/products/photoshop.html) or [afinity photo](https://affinity.serif.com/en-gb/photo/). At the end of this tutorial, we would have learnt how to add image editing functionality using Cloudinary Media Editor and secure the web application using Auth0.

By way of introduction, Cloudinary is a platform on which you can quickly and easily upload, store, manage, transform, and deliver images and videos for websites and apps. The platform also offers a vast collection of SDKs for frontend frameworks and libraries. 

Auth0 is a platform that offers systems to rapidly integrate authentication and authorization for web, mobile, and legacy applications.

Next.js is a React-based front-end development framework that enables functionalities like server-side rendering, static site generation, file-system routing (with no need to manually configure `react-router-dom`), and API endpoints for backend features.


## Source code

You can find the source code of this project [here](https://github.com/Mr-Malomz/media_editor).

# Prerequisites

The next steps in this post require JavaScript and React.js experience. Experience with Next.js isn’t a requirement, but it’s nice to have.

We also need the following:

- A [Cloudinary account](https://cloudinary.com/) for file hosting. [**Signup**](https://cloudinary.com/users/register/free) **is completely free**.
- An [Auth0 account](https://auth0.com/) for authentication. [**Signup**](https://auth0.com/signup?place=header&type=button&text=sign%20up) **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


    npx create-next-app media_editor && cd media_editor

This command creates a Next.js project called `media_editor` and navigates into the project directory.

We proceed to install the required dependencies with:


    npm install react-helmet @auth0/nextjs-auth0

`react-helmet` is a [library](https://github.com/nfl/react-helmet) that takes plain HTML tags and outputs plain HTML tags. It will help us avoid the `Reference error: Window is not Defined` error when using client-side only packages in Next.js.

`@auth0/nextjs-auth0` is a [library](https://github.com/auth0/nextjs-auth0) for implementing user authentication in Next.js applications.

# Image editing with Cloudinary

Cloudinary provides an interactive user interface providing a set of everyday image editing actions that we can use on our website or application. The editor helps us scale internal operations by reducing dependency on designers by allowing us to manually review/fix media assets when needed. To add a media editor to our application, we need to follow these steps:

- Upload image to Cloudinary using **Cloudinary Upload Widget**.
- Pass the returned uploaded image `publicId` to **Cloudinary Media Editor**.
- Specify image editing steps:
    - `resizeAndCrop` to resize and crop images
    - `textOverlays` add text overlay on images
    - `export` to download edited images

## Integrating Cloudinary

With the project dependencies installed, we can leverage Next.js [CSS Module](https://github.com/css-modules/css-modules) support to style our page by replacing the content in `Home.module.css` in the `styles` folder with the gist below:

**Home.module.css**

{% gist https://gist.github.com/Mr-Malomz/c9012f3623cdbe2346f159eb9ea4d499 %}

With that done, we can update the `index.js` file in the `pages` folder by importing the styles created, configure Cloudinary Upload Widget and Cloudinary Media Editor to upload files to Cloudinary and edit uploaded images, respectively. We also include states to handle returned image `publicId` and editing state.

```javascript
    import styles from '../styles/Home.module.css';
    import { Helmet } from 'react-helmet';
    import { useState } from 'react';
    
    export default function Home() {
      const [id, setId] = useState(null);
      const [editing, setEditing] = useState(false);
      const openUpload = () => {
        window.cloudinary
          .createUploadWidget(
            {
              cloudName: 'dtgbzmpca',
              uploadPreset: 'tca2j0ee',
            },
            (error, result) => {
              if (!error && result && result.event === 'success') {
                setId(result.info.public_id);
                setEditing(true);
              }
            }
          )
          .open();
      };
      const openEditor = () => {
        const myEditor = cloudinary.mediaEditor();
        myEditor.update({
          publicIds: [id],
          cloudName: 'dtgbzmpca',
          image: {
            steps: ['resizeAndCrop', 'textOverlays', 'export'],
          },
        });
        myEditor.show();
        myEditor.on('export', function (data) {
          console.log(data);
          setEditing(false);
        });
      };
      return (
        <div>
          <Helmet>
            <script src='https://media-editor.cloudinary.com/all.js' />
            <script src='https://upload-widget.cloudinary.com/global/all.js' />
          </Helmet>
          <main className={styles.files}>
            {/* remaining JSX comes here */}
          </main>
        </div>
      );
    }
```

The Cloudinary Upload Widget and Cloudinary Media Widget also configures `cloudName`, `uploadPreset`, and `publicIds` , `cloudName`, `image`, respectively. Finally, we used `react-helmet` to add Cloudinary Upload Widget and Cloudinary Media Widget CDNs to the application.


![Shaded portions are where your cloud name is located in Cloudinary](https://paper-attachments.dropbox.com/s_4BCCCE95ACE9B0C1081840B08C278ED838CD7BEFE9CA8C7C882D08A88A918EB2_1620114874519_cloudname.png)


To create a new upload preset, click on the **Settings** Icon, select the **Upload** tab, navigate to the **Upload presets** section, click on the **Add Upload preset**.

![select preset](https://paper-attachments.dropbox.com/s_4BCCCE95ACE9B0C1081840B08C278ED838CD7BEFE9CA8C7C882D08A88A918EB2_1620116773149_Screenshot+2021-05-04+at+01.49.21.png)




![copy preset name, change to Unsigned and save](https://paper-attachments.dropbox.com/s_4BCCCE95ACE9B0C1081840B08C278ED838CD7BEFE9CA8C7C882D08A88A918EB2_1620117224843_Screenshot+2021-05-04+at+01.50.21.png)



Find out more about Cloudinary Upload Widget [here](https://cloudinary.com/documentation/upload_widget) and Cloudinary Media Widget [here](https://cloudinary.com/documentation/media_editor).

Next, we need to include our markup to upload and edit image.

```javascript
    //imports here
    
    export default function Home() {
      //states here
    
      const openUpload = () => {
        //upload widget code
      };
    
      const openEditor = () => {
        //media widget code
      };
    
      return (
        <div>
          <Helmet>
            <script src='https://media-editor.cloudinary.com/all.js' />
            <script src='https://upload-widget.cloudinary.com/global/all.js' />
          </Helmet>
          <main className={styles.files}>
            <header className={styles.header}>
              <a className={styles.logout}>
                Log Out
              </a>
            </header>
            <p className={styles.name}>Hi {user.name}</p>
            <div className={styles.container}>
              <div className={styles.buttonwrapper}>
                {!editing && (
                  <button className={styles.button} onClick={() => openUpload()}>
                    Upload Image
                  </button>
                )}
                {editing && (
                  <>
                    <p>Image uploaded successfully!</p>
                    <button className={styles.button} onClick={() => openEditor()}>
                      Open Editor
                    </button>
                  </>
                )}
              </div>
            </div>
          </main>
        </div>
      );
    }
```

Finally, we can start a development server and test our application:


    npm run dev
![Upload Image](https://paper-attachments.dropbox.com/s_9AC0BFCEAD044A9F9FB389D81CABE903F91CC43814F0AA82F32D3333CE44AE06_1633604346759_Screenshot+2021-10-07+at+11.55.58.png)
![Select image to upload](https://paper-attachments.dropbox.com/s_9AC0BFCEAD044A9F9FB389D81CABE903F91CC43814F0AA82F32D3333CE44AE06_1633604346785_Screenshot+2021-10-07+at+11.57.26.png)
![Start editing image](https://paper-attachments.dropbox.com/s_9AC0BFCEAD044A9F9FB389D81CABE903F91CC43814F0AA82F32D3333CE44AE06_1633604346813_Screenshot+2021-10-07+at+11.58.00.png)

![Editing uploaded image](https://paper-attachments.dropbox.com/s_9AC0BFCEAD044A9F9FB389D81CABE903F91CC43814F0AA82F32D3333CE44AE06_1633604346851_Screenshot+2021-10-07+at+11.58.21.png)

# Adding Authentication with Auth0
## Setup a Developer Account

To get started, we need to log into our [Auth0](https://auth0.com/auth/login) dashboard. Click on **Applications**

![Auth0 Dashboard](https://paper-attachments.dropbox.com/s_39889F3A941E007B2BE724DE6F2C4C4FFE6C2B007CCCDB3B36F915067C40E3D1_1633445331548_Screenshot+2021-10-05+at+15.44.55.png)


In the application page, click on the **Create Application** button, input application name `auth0Cloudinary` in our case, select **Regular Web Application** as the application type and **Create**

![Creating a new app](https://paper-attachments.dropbox.com/s_39889F3A941E007B2BE724DE6F2C4C4FFE6C2B007CCCDB3B36F915067C40E3D1_1633446208392_Screenshot+2021-10-05+at+15.50.45.png)


Click on the **Settings** tab and copy the **Domain,** **Client ID,** and **Client Secret**.

![copy credentials](https://paper-attachments.dropbox.com/s_39889F3A941E007B2BE724DE6F2C4C4FFE6C2B007CCCDB3B36F915067C40E3D1_1633446417723_Screenshot+2021-10-05+at+16.04.21.png)


Then scroll down to the **Applications URIs** section and fill in the details below for **Allowed Callback URLs** and **Allowed Logout URLs,** respectively.

- Allowed Callback URLs
    - `http://localhost:3000/api/auth/callback`
- Allowed Logout URLs
    - `http://localhost:3000/`
![URIs](https://paper-attachments.dropbox.com/s_39889F3A941E007B2BE724DE6F2C4C4FFE6C2B007CCCDB3B36F915067C40E3D1_1633447038602_Screenshot+2021-10-05+at+16.12.18.png)


Then scroll down to the bottom of the page and click on the **Save Changes** button**.**

## Integrating Auth0 with Next.js

To integrate Auth0 in our application, we need to create an `.env.local` file in our root directory and fill in the required parameters(**Domain, Client ID and Client Secret**) as shown below:

    AUTH0_SECRET='LONG_RANDOM_VALUE'
    AUTH0_BASE_URL='http://localhost:3000'
    AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth0.com'
    AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
    AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'

We can run the snippet below on our terminal to generate a random secret for the `AUTH0_SECRET`

    node -e "console.log(crypto.randomBytes(32).toString('hex'))"

Next, we need to create a dynamic route file for our APIs. We need to navigate to the `pages` folder, inside this folder, navigate to the `api` folder, in the folder, create an `auth` folder, and inside this folder, create an `[…auth0].js` file and add the snippet below:

```javascript
    import { handleAuth } from '@auth0/nextjs-auth0';
    export default handleAuth();
```

The `handleAuth()` function will generate APIs for:

- Login
    - `/api/auth/login`
- Logout
    - `/api/auth/logout`
- Fetch user data
    - `/api/auth/me`
- Redirect user on successful login.
    - `/api/auth/callback`

Next, we need to update `_app.js` file inside the `pages` folder as shown below: 

```javascript
    import { UserProvider } from '@auth0/nextjs-auth0';
    export default function App({ Component, pageProps }) {
      return (
        <UserProvider>
          <Component {...pageProps} />
        </UserProvider>
      );
    }
```

Finally, we need to update `index.js` as shown below

```javascript
    //other imports here
    import { withPageAuthRequired } from '@auth0/nextjs-auth0';
    
    export default function Home({ user }) { //update this with destructure props
      //state goes here
    
      //functions goes here
      
      return (
        <div>
          <Helmet>
            <script src='https://upload-widget.cloudinary.com/global/all.js' />
          </Helmet>
          <main className={styles.files}>
            <header className={styles.header}>
              <a href='/api/auth/logout' className={styles.logout}> {/* add href to this*/}
                Log Out
              </a>
            </header>
            <p className={styles.name}>Hi {user.name}</p> {/*add this*/}
            {/*remaining code snippet goes here*/}
          </main>
        </div>
      );
    }
    export const getServerSideProps = withPageAuthRequired({
      returnTo: '/',
    });
 ```   

In the snippet above, we imported `withPageAuthRequired` and also modified the `log out` link. We used Next.js inbuilt method `getServerSideProps` to call the `withPageAuthRequired` method, specified the URL to redirect to after login, accessed the `user` props it returned and then displayed the user’s name.

**Complete index.js**

{% gist https://gist.github.com/Mr-Malomz/5822f4c534b72d01161b7b79beea2aa0 %}


# Conclusion

This post discussed how to build and secure an application that supports uploading, editing, and downloading images.

You may find these resources useful:

- [Cloudinary upload presets](https://cloudinary.com/documentation/upload_presets)
- [Cloudinary upload widget](https://cloudinary.com/documentation/upload_widget)
- [Cloudinary media editor](https://cloudinary.com/documentation/media_editor)
- [Next.js Auth0 library](https://github.com/auth0/nextjs-auth0)

Content created for the [Hackmamba](https://content.hackmamba.io/) Jamstack Content Hackathon.