Building a Social Media Preview App with Cloudinary and Auth0

Introduction

What We'll Be Building

Prerequisites

• Basic understanding of Javascript

• Basic knowledge of React and React Hooks

• The Latest version of Nodejs installed on your machine

• the Latest version of React

• An Cloudinary account.

• An Auth0 Account

Step 1. Set up the Project

1. We will be using TailwindCSS as our CSS Framework. Setup a New Create React App Project with TailwindCSS using this guide from the official Tailwind Docs. If during the installation of Tailwind Libraries your terminal shows a no matches found: postcss@^7 error then install using quotes.

npm install -D "tailwindcss@npm:@tailwindcss/postcss7-compat" "postcss@^7" "autoprefixer@^9"

2. Once you've completed setting up above. Replace your App.js code to below

//App.js
function App() {
  return (
    <div>
      <h1 className="text-9xl font-bold text-yellow-400">Hello World!</h1>
    </div>
  );
}

export default App;

 

1. Install @tailwindcss/forms library and add it to your tailwind.config.js plugins array. This will be helpful in styling form elements through TailwindCSS.

npm install @tailwindcss/forms

//tailwind.config.js
module.exports = {
 ...
  plugins: [require('@tailwindcss/forms')],
};

Step 2. Setup Authentication with Auth0 and Views

• Sign Up/Login to Auth0. You can sign up here . Create an Application. Once Logged in Navigate to your application and copy your Domain and Client ID information.

• In your project create an .env.local file with the following values. Insert your Copied Client ID & Domain in this file.

# YOUR_AUTH_DOMAIN is e.g yourauthdomain.eu.auth0.com
REACT_APP_AUTH_CLIENT_ID=YOUR_CLIENT_ID
REACT_APP_AUTH_DOMAIN=YOUR_AUTH_DOMAIN 

• Install the @auth0/auth0-react npm package from Auth0 for React.

npm install @auth0/auth0-react

• In order to manage Authentication State within the Application the Auth0 React SDK uses React Context. We can configure the Auth0Provider Component from the root component in index.js .

//index.js

import { Auth0Provider } from "@auth0/auth0-react";

....
ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_AUTH_DOMAIN}
    clientId={process.env.REACT_APP_AUTH_CLIENT_ID}
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

• Update your App.js to have a basic authentication setup

//App.js
import { useAuth0 } from '@auth0/auth0-react';
import './App.css';

function App() {
  const { loginWithRedirect, logout, isAuthenticated } = useAuth0();

  if (isAuthenticated) {
    return (
      <div>
        <h1 className="text-9xl font-bold text-yellow-400">Logged In !</h1>
        <button onClick={() => logout()}>Log Out</button>
      </div>
    );
  } else {
    return (
      <div>
        <h1 className="text-9xl font-bold text-yellow-400">Hello World!</h1>
        <button onClick={() => loginWithRedirect()}>Log In</button>
      </div>
    );
  }
}

export default App;

 

Step 3. Set up Login and Home UI

• Add Home UI below returned from when isAuthenticated is false

// App.js
if(isAuthenticated){
....
}else{
return(
<div className="">
        <main className="mx-auto max-w-5xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="bg-yellow-300 p-4 rounded-lg shadow-md">
              <svg
                class="text-yellow-700 w-20 h-20"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                ></path>
              </svg>
            </div>

            <h1 className="text-4xl tracking-tight font-extrabold text-gray-800 sm:text-5xl md:text-6xl">
              <span className="block xl:inline">Site Preview</span>{' '}
            </h1>
            <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
              Preview and Generate Open Graph meta tags in seconds
            </p>
            <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
              <div className="rounded-md shadow">
                <button
                  onClick={() => loginWithRedirect()}
                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 md:py-4 md:text-lg md:px-10"
                >
                  Log In
                </button>
              </div>
            </div>
          </div>
        </main>
      </div>
);
}

Setting up PreviewImage Component

• Add Custom Styling for the Preview Image in App.css.

/* App.css */
.preview {
  font-size: 12px;
  font-family: tahoma;
  border: 1px solid #ccc;
  color: #555;
  box-sizing: border-box;
  text-decoration: none;
}

• Create the Component

// src/components/PreviewImage.js

import React from 'react';

const PreviewImage = ({ form }) => {
  return (
    <div class="preview flex flex-col">
      <img
        className="w-full object-cover h-32"
        src={form.image}
        alt="some description"
      />
      <div className="px-2 py-2 bg-white">
        <h3 className="text-gray-800 font-bold">
          {form.title.length === 0 ? `Enter A Title` : form.title}
        </h3>
        <p class="">
          {form.description.length === 0
            ? `Enter A Description`
            : `${form.description}`}
        </p>
      </div>
    </div>
  );
};

export default PreviewImage;

• Import the Component to Home.js

//Home.js
import PreviewImage from './components/PreviewImage';

const Home = ()=>{
...
return (
...
<div className="grid grid-cols-2 gap-6">
	<form>...
	<div>
			{/* Add Preview Image Component Here */}
			<PreviewImage form={form} />
	<div>
</div>
)
}

Set up CodeBlock Component with Syntax Highlighting

• Install prismjs package

npm install prismjs

• Download you syntax highlighter css from here. For this example we are going to use Okaidia .Remember the download css option is near the bottom of the prismjs download page. Once downloaded place it at the root of the src directory.

import React from 'react';
import Prism from 'prismjs';
import '../prism.css';

const Codeblock = ({ form }) => {
  const { title, description, image } = form;
  React.useEffect(() => {
    Prism.highlightAll();
  }, [form]);

  return (
    <div className="flex flex-col mt-4">
      <div className="flex justify-between items-center bg-gray-200 p-4 rounded-sm">
        <h3 className="text-md text-gray-800 font-semibold">Code</h3>
      </div>
      <pre>
        <code className="language-html">
          {`
<!-- Replace YOUR_SITE_NAME with the Page/Website URL e.g https://example.com -->
<!-- HTML Meta Tags -->
<title>${title}</title>
<meta name="description" content="${description}">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="YOUR_SITE_NAME">
<meta property="og:type" content="website">
<meta property="og:title" content="${title}">
<meta property="og:description" content="${description}">
<meta property="og:image" content="${image}">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="YOUR_SITE_NAME">
<meta property="twitter:url" content="YOUR_SITE_NAME">
<meta name="twitter:title" content="${title}">
<meta name="twitter:description" content="${description}">
<meta name="twitter:image" content="${image}">
  `}
        </code>
      </pre>
    </div>
  );
};

export default Codeblock;

• Import the Codeblock Component to Home.js

//Home.js
import Codeblock from './components/Codeblock';

const Home = ()=>{
...
return (
...
<div className="grid grid-cols-2 gap-6">
...
</div>
{/* Add Code Block Component Here */}
<Codeblock form={form} />
)
}

Setup Image Uploads with Cloudinary

• Head over to Cloudinary and create an account or login. Once logged in you can check from your Dashboard to see a summary of Account Details,Resources. Copy the Cloud name you see in the Account Details.

• Head over to the Settings section by clicking on your profile. Select the Upload Tab. Scroll down until you see the Upload Presets section and click on the Enable unsigned uploading button which allows Unauthenticated uploads which will work for this demo. Copy the Name you get in the Unsigned Mode.

• Head over back to the project and add Cloudinary's widget script in your index.html.

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>

• In your .env.local file add your Copied Cloud Name and Upload Preset value in this file.

REACT_APP_CLOUDINARY_UPLOAD_PRESET=
REACT_APP_CLOUDINARY_CLOUD_NAME=

• In your Home.js you can add the following function in the Component together with the onClickHandler to the Upload File button that should fires the same function.

//Home.js

....
const uploadWidget = () => {
    window.cloudinary.openUploadWidget(
      {
        cloud_name: process.env.REACT_APP_CLOUDINARY_CLOUD_NAME,
        upload_preset: process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET,
        tags: ['site-preview'],
        sources: ['local', 'url'],
      },
      function (error, result) {
        if (error) {
          return;
        }
        console.log('Upload Result is', result);
        setForm({ ...form, image: result[0].url });
      },
    );
  };

....
return(
...
<label className="block text-sm font-medium text-gray-700">
    Image
</label>
<button
   type="button"
   onClick={() => uploadWidget()}
	 className="...">
</button>
)

Conclusion

• Customising Image Feature Options through the powerful Cloudinary Transformation API . Might need to let the user choose the file format of image, crop, background overlays or even blur.

• View list of Images Selected depending on Auth0 Account Logged In.