Learn how to use Auth0 and Cloudinary to build an Open Graph Tag Generator Web App
2nd Posted URL
Next Action Date
Sep 25, 2021
Sep 25, 2021
Authentication and File Storage are common features that developers think about while working on a project. Cloudinary is a service that makes media management easy to integrate for web and mobile developers. Auth0 provides authentication and authorization services that are built into applications. Using these tools avoids the cost, time, and risk of building your own solution.
In this tutorial, we are going to build a real-world application that integrates with Auth0 and Cloudinary.
What We'll Be Building
One of the major reasons for creating content on the internet is to share it with others which often would be via social media. When sharing that URL link depending on the site shared it would most likely use rich previews to show more information about the site. The Open Graph Protocol was developed To standardize the display of link previews and other metadata within a webpage. You can read more about it in Colby's article here.
In this tutorial, we will build a Site Previewer App that displays link previews for social media sites and displays the page metadata.
You can find the Source Code of the project on Github and Live Environment on Codesandbox
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
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.
You can see we are able to pull Authentication State and Login/Logout actions from the useAuth0 hook. We use isAuthenticated to switch between showing Content that is Authenticated and that which isn't. Once you update this you should see the Authentication state changes once we log in and out.
Step 3. Set up Login and Home UI
Add Home UI below returned from when isAuthenticated is false
Create a new file Home.js in the directory src. Setup the Home Component as below
We are also able to fetch the user object from the useAuth0 Hook. We are able to extract the user name and display it once logged in. Your UI should appear like below once your run. We will be defining 3 fields for the Preview Tags which include Title(Less than 60 characters) ,Description(Less than 120 characters) and the Image(URL)
Let us now work on the PreviewImage and CodeBlock component
Setting up PreviewImage Component
For the preview image component we will create a folder components inside src directory.
Add Custom Styling for the Preview Image in App.css.
Set up CodeBlock Component with Syntax Highlighting
The Last Part of the Home UI setup involves adding a CodeBlock section which displays the tags displayed by completing the form fields entered on the same page. We will display the Metadata Code using Prism which is an elegant syntax highlighter tool.
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.
Once you are done you should have both the PreviewImage and Codeblock rendered properly as below
Setup Image Uploads with Cloudinary
The application is nearly complete. All we are missing now is adding an Image Upload feature so that it can populate the final image url to the Codeblock and PreviewImage component.
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.
This function opens the Cloudinary Widget with the specified cloud name and upload preset. It also adds options for local file upload or url upload. Once successful we update the form with the returned image from the result.
Once done the solution is completed. You now have built a powerful social media link previews generator with Authentication and File Storage. There are more features that can probably be added to the app which include
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.
Have any other ideas ? Feel free to clone the project and expand on the capabilities of the app using Cloudinary and Auth0.
Last edited on Tue Jun 06 2023
Hey there 👋
Was anything I wrote confusing, outdated, or incorrect? Please let me know! Just write a few words below and I'll be sure to amend this post with your suggestions.