This project is created with React.js and uses Auth0 for authentication. So in this article, we will discuss on how to use the application.
Challenges
Before we talk about the project, let me briefly highlight the challenge I encountered. This is actually not a complete project, in that I plan on adding a Generate link
button so users can either download the banner or generate a link instead. This is where Cloudinary comes in.
In using cloudinary, the traditional way of uploading media to their server is via a form. But for this project, form is not used, rather an NPM package (html2canvas) is used to generate the banner image. If you know a way I can upload canvas image to cloudinary without using the form, please leave a comment.
We won't cover the entirety of the project, just the important part, so I will try to make this article as brief as possible. You can clone the source code to your device. Now let's dive right in!
After cloning the project to your device, open the project on your IDE (e.g visual studio) to start.
Registering on Auth0
First off, you will need to create an account on Auth0. Visit Auth0 to register your account.
Creating a tenant
You will create a tenant after successfully signing up. The tenant is where you configure your Auth0 usage and where Auth0 assets like applications, connections, and user profiles are defined, managed, and stored. It is immutable.
Creating an application
From your dashboard, click on applications > applications. Then click on create application. A box will appear as seen below, where will be required to enter your application name and select your application type.
Auth0 will assign you an immutable client ID which you will use in your code to call the Auth0 API. To get your client ID, select your application, and go to settings.
Environmental Variable
On the root folder of your project, create a .env
file
REACT_APP_AUTH0_DOMAIN= /* domain */
REACT_APP_AUTH0_CLIENT_ID= /* client id */
Copy your Domain
and Client ID
values from your application settings and paste them in your .env
file.
Run the following command in your terminal to install dependencies
npm install
Your dependencies can be found in the package.json
file.
Using Auth0
Auth0 is platform that creates an easy to implement, adaptable authentication and authorization for your application. In this section, I will explain how the Auth0 authentication is used in different components of the application.
Integrating Auth0
To integrate Auth0 to your react application, you will use the Auth0 React SDK @auth0/auth0-react
.
Run the command
npm install --save @auth0/auth0-react
auth-history.js
Go to /src/auth/auth-history.js
import React from "react";
import { useHistory } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";
const AuthHistory = ({ children }) => {
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const history = useHistory();
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
};
export default AuthHistory;
To process authentication, the Auth0 React SDK connects to the Auth0 Application. The Auth0Provider
must be configured with an Auth0 Domain and Client ID.
The onRedirectCallback()
method is called when Auth0 redirects users from the Auth0 Universal Login page to the application. The useHistory()
hook is used to retrieve the React Router's history object. The history.push()
method will then redirect users to the route they intended to visit prior to authentication.
index.js
Go to src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom'
import AuthHistory from './auth/auth-history'
ReactDOM.render(
<Router>
<AuthHistory>
<App />
</AuthHistory>
</Router>,
document.getElementById("root")
);
The App
component is wrapped with the AuthHistory
component so that the entire application will have access to the AuthContext
. The BrowserRouter
component from React Router must be the parent of the AuthHistory
.
LoginButton.js
Go to /src/components/buttons/loginbutton.js
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button className="btn btn-primary btn-block" onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
When loginWithRedirect()
method is called, a user is asked to authenticate and give permission for the application to access specific data on their behalf. This means that the application redirects the user to the Auth0 Universal Login page to complete the authentication process.
SignupButton.js
Go to /src/components/buttons/signupbutton.js
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const SignupButton = () => {
const { loginWithRedirect } = useAuth0();
return (
<button
className="btn btn-primary btn-block m-2"
onClick={() =>
loginWithRedirect({
screen_hint: "signup",
})
}
>
Sign Up
</button>
);
};
export default SignupButton;
In the signup component, an option is passed to redirect users to an Auth0 Universal Login page optimized for signing up for the application. This is done by specifying the screen_hint=signup
property in the configuration object of loginWithRedirect()
LogoutButton.js
Go to /src/components/buttons/logoutbutton.js
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
const LogoutButton = () => {
const { logout } = useAuth0();
return (
<button
className="btn btn-danger btn-block"
onClick={() =>
logout({
returnTo: window.location.origin,
})
}
>
Log Out
</button>
);
};
export default LogoutButton;
Auth0Context's logout()
method clears the application session and redirects to the Auth0 /v2/logout
endpoint to clear the Auth0 session. logout()
, like the login method, accepts an object argument to define parameters for the /v2/logout
call. The returnTo
option specifies the URL to which Auth0 should redirect users after they logout.
AuthenticateButton.js
Go to /src/components/buttons/authenticatebutton.js
import React from "react";
import LoginButton from "./LoginButton";
import LogoutButton from "./LogoutButton";
import SignupButton from './SignupButton'
import { useAuth0 } from "@auth0/auth0-react";
const AuthenticationButton = () => {
const { isAuthenticated } = useAuth0();
return isAuthenticated ? <LogoutButton /> : (
<div>
<SignupButton className="mr-5 " />
<LoginButton />
</div>
);
};
export default AuthenticationButton;
The isAuthenticated
is used to check if a user is logged in. It returns a boolean true
is logged in. If a user is authenticated, it displays the logout
button, if not authenticated, the signup
and login
buttons are displayed.
BannerWrapper
Go to src/components/bannerwrapper/index.js
...
const { isAuthenticated } = useAuth0();
return (
<>
<div className="wrapper">
<div>
<Output values={values} />
</div>
<div className="actionWrapper">
<InputWrapper values={values} setters={setters} />
{ isAuthenticated ? (
<>
<button className="btn btn-success mb-5 mt-3" id="download-button" download="banner.png" href={imgURL}>
<a download="banner.png" href={imgURL}>DOWNLOAD BANNER</a>
</button>
</>
) : (
<h5 className="mb-5 mt-3" style={{color: "red"}}>Login to download your banner</h5>
)}
</div>
</div>
</>
)
}
In this part of the bannerWrapper
component, the isAuthenticated
is used once more to check if user is logged in. If authenticated, the download
button will be displayed. If not authenticated, a red-colored text is displayed requesting the user to login in order to download the banner.
That is how Auth0 is used in this project application.
Overview of the application
Now run the following command to start the project:
npm start
Your browser should display the following image
At the bottom of the page, your will see a red-colored sentence, requesting you to login before you can download your banner. Since your are a new user, you will have to signup instead. So click on the signup button to register.
Fill in your email address and password to signup or your can simply signup with Google. When signed in, you will be presented access to the download button, so your can easily download your banner to your device.
Conclusion
With Auth0, we can easily implement an adaptable authentication and authorization for our application. While with Cloudinary, we can manage our cloud-based media services such as image and video. It enables users to upload, store, manage, manipulate, and deliver images and video for websites and apps.
These are robust technologies that can make our development easier and faster.
Here is a link to my live demo on codesandbox
Reference
https://auth0.com/docs/quickstart/spa/react
https://auth0.com/docs/get-started
https://auth0.com/blog/complete-guide-to-react-user-authentication/
Content created for the Hackmamba Jamstack Content Hackathon using Auth0 and Cloudinary
Top comments (0)