Photoshare is an application where users can login using Auth0 and share picture that can be viewed by other users using Cloudinary.
Auth0 is an easy to use authentication and authorization platform, it takes away the stress of authentication and authorization during the building process.
Cloudinary is a service that makes life easy when it comes to working with images, you can upload images, resize images, crop images and other cool stuffs without installing any complex software or going through heavy documentation.
Supabase is a firebase alternative, it is very useful in setting up a backend service in few minutes.
Perequisites Knowledge
- React Js
- CSS
Lets Start Building
Setup React
I am assuming we can setup react on our own. In the case when you are unable to set up react.js on your own, check out this tutorial by freecodecamp - How to setup react js
We need to flesh up our application to make it usable for the demo, i will drop some snippet, all you have to do is replace then in the appropriate files, i will explain where i need to.
index.html
The index.html file is inside the public folder.
Create a component folder inside your src folder, we will be creating few components.
main-nav.js
nav-bar.js
footer.js
loading.js
index.js
We are done with our components, now we need to create pages that will make use of the components.
Create a views folder inside the src folder.
The following pages will be inside the views folder
home.js
profile.js
index.js
We are done with the views folder for now. The only files remaining for us to fill up are index.js, app.js and app.css.
index.js
app.js
app.css
Install Dependencies in react.
@auth0/auth0-react,
@material-ui/core,
@material-ui/icons,
@supabase/supabase-js,
react-router-dom,
date-fns
Add Auth0 to your React Application.
Sign up for a new account if you dont have one, once your signup is done Auth0 takes you to the dashboard, in the left side menu, click on applications.
On the applications page, click on the create application button.
You need to enter the name of the app and choose the application type.
You can use any name you want, we will select the single page web application, this is because we are using react.js.
When you are done, click on the Create button.
The next step is to add some urls on the application settings page.
Make sure you are on the settings page for the application, you just created.
The following fields needs to filled
- Allowed Callback URLs
- Allowed Logout URLs
- Allowed Web Origins
The base url of the application shoud be entered into the fields above i.e localhost:300 or appzone.com. Make sure you save the changes at the bottom of the page.
Add the Auth0 configuration variables to React
Create a .env inside the the src folder, populate the following fields
REACT_APP_AUTH0_DOMAIN=
REACT_APP_AUTH0_CLIENT_ID=
The values can be found on your Auth0 application settings page.
The first one is the domain value from the settings.
The second one is the client value from the settings.
The react application can now be able to interact with the Auth0 authorization server.
Set up the Auth0 React SDK
The Auth0 react dependency has been installed - @auth0/auth0-react
We need to create a auth folder, where we would have all our authentication files.
We need to create a Auth0Provider file inside the auth folder to setup Auth0 for react.
src/auth/auth0-provider.js
We need to integrate the Auth0 provider in the index.js, for that to happen, we need to edit out index.js inside the src folder.
src/index.js
At this point, we can run npm start to start up the application to be sure everything is running fine.
Up next, we will start adding our Login, Signup and Logout button from Auth0.
We will create our login-button.js, signup-button.js and logout-button.js in the components folder.
login-button.js
We made use of the useAuth0 hook, we got the loginWithRedirect from it, which is useful for our login button.
signup-button.js
logout-button.js
We made use of the useAuth0 hook, we got the logout from it, which is useful for our logout button.
Up next, lets integrate our login and logout button, so that when we are logged in we see the logout button and when we are logged out, we see the login button.
authentication-button.js
Here we got the isAuthenticated from our useAuth0 hook, this is needed to track when we are logged in or logged out.
Now, we need to create auth-nav.js which will contain our AuthenticationButton.
auth-nav.js
To bring everything together, lets update the nav-bar.js
nav-bar.js
At this point, we can test our application, you should be able to signup, login and logout using Auth0.
Upnext, we need to secure our routes and access some information from Auth0
We will create protected-route.js in the auth folder.
protected-route.js
We can now protect all our routes in the app.js file.
app.js
At this point, we can test our application, you should not be able to access the home page and login page. it will redirect you to the an Auth0 login modal when you are not logged in.
Setup Cloudinary
If you dont have a cloudinary account, signup on cloudinary.com
First step, we need to add this script to the index.html in the public folder
We need to create two function in the home.js file, we would make use of it inside the file.
The cloudname can be gotten on cloudinary dashboard while the presetname can be gotten settings page, upload tab.
SetUp Supabase
To create a supabase account, go to supabase
After signup is complete, click on new project
Chose the existing organisation.
Fill the create new project form.
Click on the create new project button to complete the form.
The setup process runs for a few minutes.
Once it is done, It will show you the project dashboard, you will see a card which is titled Database, click on the table editor in the card.
Click on create a new table.
Enter the table name and description.
You will also need to add columns to the table, two default columns are already added.
For the columns, you need to enter the name, type(i.e int) and the default value, you can also specify if you want the column to be the Primary Key.
What i choose for the Demo
Table name - Image
Columns (type)
- userId (varchar)
- image (text)
- likes (int)
- dislikes(int)
- desc(text)
Supabase is good to go and ready to be used.
Intergrate Supabase with React
We will create a client.js file in our src folder.
client.js
To get these detail go the settings page of your supabase dashboard.
For the config_url, you will get it on the config card, the name of the card is config and the name of the detail you need is URL.
For the token, the name of the card is Project API keys and the name of the anon public.
Finish Up App
Home.js
A couple of things is going on in this file but it basically brings together everything we have been working on.
Three important things to note.
- we imported supabase from the client.js, this is what we would use to create post and get all the posts.
- We are making use of formatDistanceToNow from fns date package to get relative date.
- We are import useAuth0 form Auth0 package. This is where we get the user information such as name, unique id and picture.
We also added our two cloudinary powered functions, this is what is triggered when the image button is clicked and it pops up the cloudinary widget which we willl use to upload our image.
We also have two other functions powered by supabase, the first one is the create post, which is called when we submit our post, we also have the getAllImages function which triggers when the page reloads or when a post is created.
We also make use of useState to keep track of our states, useEffect to run functions when a page is reloaded and useRef to get data from elements.
We also obviously added some html and css to make it look a little bit nice.
I hope you have been able to learn a few things from the tutorial and the code snippets, in order to solidify your knowledge, you can complete the profile page, by displaying the user data and only the user’s posts on the page.
Thank You.
Link to the demo - https://jbwym.csb.app/
Content created for the Hackmamba Jamstack Content Hackathon with Auth0 and Cloudinary.
Top comments (2)
Really cool! Quite educative
Nice job. Really good step by step instructions and explanation.