{"id":7509,"date":"2022-08-01T07:50:46","date_gmt":"2022-08-01T12:50:46","guid":{"rendered":"https:\/\/upmostly.com\/?p=7509"},"modified":"2022-08-01T07:50:47","modified_gmt":"2022-08-01T12:50:47","slug":"add-authentication-to-your-react-apps-with-auth0","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/add-authentication-to-your-react-apps-with-auth0","title":{"rendered":"Add Authentication to your React apps with Auth0"},"content":{"rendered":"\n<p>Building a safe authentication system without any third-party service is a challenging task and is much easier to get wrong. Auth0 is a third-party service that allows developers to quickly add authentication to their apps.<\/p>\n\n\n\n<p>In this tutorial, we will look at how to secure your React application with Auth0 React SDK.<\/p>\n\n\n\n<p>To log in users, our application redirects to an Auth0 customizable page. After successful completion of login Auth0 then redirects users back to our application and returns with authentication and user information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Project Setup<\/h3>\n\n\n\n<p>Start by&nbsp;<strong><a href=\"https:\/\/upmostly.com\/tutorials\/how-do-i-create-react-app-and-open-it-in-vs-code\">creating react app<\/a><\/strong> on your machine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sign up for an Auth0 account<\/h3>\n\n\n\n<p>We need to create an account to use the Auth0 service, so <strong><a href=\"https:\/\/auth0.com\/signup\" target=\"_blank\" rel=\"noopener\">sign up for a free Auth0 account<\/a>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/s3.us-west-2.amazonaws.com\/secure.notion-static.com\/17314573-2458-4a2c-bd42-c093d5149da3\/Sign_up.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220801%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20220801T090103Z&amp;X-Amz-Expires=86400&amp;X-Amz-Signature=50d199b74c696521aa5e3b5570aa07c93afef3a0add2c3cc395c7eb3d8f7d170&amp;X-Amz-SignedHeaders=host&amp;response-content-disposition=filename%20%3D%22Sign%2520up.PNG.png%22&amp;x-id=GetObject\" alt=\"\" \/><\/figure>\n\n\n\n<p>After completing the sign-up steps, move forward by creating a new application. After clicking on <strong>Create new application<\/strong> we get options to create a native app, Single Page Web App, web app, or even CLIs.<\/p>\n\n\n\n<p>Give your app a good name and as we\u2019re building React app select <strong>Single Page Web App<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/s3.us-west-2.amazonaws.com\/secure.notion-static.com\/ed778434-f6fb-4320-9532-67ee8451432f\/Create_Application.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220801%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20220801T090255Z&amp;X-Amz-Expires=86400&amp;X-Amz-Signature=38b0b03acb0d01d25008451623df112be1ad361a21b31cdfd2e12edfe23ca26a&amp;X-Amz-SignedHeaders=host&amp;response-content-disposition=filename%20%3D%22Create%2520Application.PNG.png%22&amp;x-id=GetObject\" alt=\"\" \/><\/figure>\n\n\n\n<p>Once you create the application Auth0 takes you to the application Dashboard. In the Dashboard, click on Settings and copy <em><strong>Domain<\/strong> <\/em>and <em><strong>Client ID<\/strong> <\/em>that we will use later.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/s3.us-west-2.amazonaws.com\/secure.notion-static.com\/851e6fc0-7be8-479a-9124-bb1f063cf67d\/Domain.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220801%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20220801T090349Z&amp;X-Amz-Expires=86400&amp;X-Amz-Signature=6a955d4ff258f8001296172e420c3ec52cb0e0483adfc8bcd1d0854125a1f73c&amp;X-Amz-SignedHeaders=host&amp;response-content-disposition=filename%20%3D%22Domain.PNG.png%22&amp;x-id=GetObject\" alt=\"\" \/><\/figure>\n\n\n\n<p>Now, scroll down and you will see Application URIs. Add URL <a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener\"><\/a><a href=\"http:\/\/localhost:3000\" target=\"_blank\" rel=\"noopener\">http:\/\/localhost:3000<\/a> for<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Allowed Callback URLs:<\/strong> redirects user after login<\/li><li><strong>Allowed Logout URLs:<\/strong> redirects user after logout<\/li><li><strong>Allowed Web Origins:<\/strong> silently refreshes authentication tokens and users will be logged out the next time they visit the application or refresh the page.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/s3.us-west-2.amazonaws.com\/secure.notion-static.com\/bf7df92d-5877-43fb-ae67-81df161186d9\/URLs.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220801%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20220801T090436Z&amp;X-Amz-Expires=86400&amp;X-Amz-Signature=43e60f5a38729f2f47e2b78510560fc9bb16964a6e1858ed3dfe799e00fdf3e8&amp;X-Amz-SignedHeaders=host&amp;response-content-disposition=filename%20%3D%22URLs.PNG.png%22&amp;x-id=GetObject\" alt=\"\" \/><\/figure>\n\n\n\n<p>Scroll down to the bottom and click on Save Changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Install Auth0 React SDK<\/h3>\n\n\n\n<p>Now, in the react app install Auth0 React SDK.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div>npm install @auth0<span class=\"token operator\">\/<\/span>auth0<span class=\"token operator\">-<\/span>react<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Then, create a <strong>.env<\/strong> file in the root of the project and paste the <em>Domain<\/em> and <em>Client ID<\/em> that we copied earlier.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token constant\">REACT_APP_AUTH0_DOMAIN<\/span> <span class=\"token operator\">=<\/span> your domain\r\n<span class=\"token constant\">REACT_APP_AUTH0_CLIENT_ID<\/span> <span class=\"token operator\">=<\/span> your client id<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>In the <em>index.js<\/em> file wrap the root component App with Auth0Provider. Auth0 React SDK uses React Context<a href=\"https:\/\/upmostly.com\/tutorials\/how-to-start-using-context-in-my-react-application\" data-type=\"URL\" data-id=\"https:\/\/upmostly.com\/tutorials\/how-to-start-using-context-in-my-react-application\"> <\/a>to manage the authentication of applications. You can learn more about <a href=\"https:\/\/upmostly.com\/tutorials\/how-to-start-using-context-in-my-react-application\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/upmostly.com\/tutorials\/how-to-start-using-context-in-my-react-application\" rel=\"noreferrer noopener\">React Context here<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token comment\">\/\/ index.js<\/span>\r\n<span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> ReactDOM <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"react-dom\/client\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">\".\/index.css\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> App <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/App\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> Auth0Provider <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"@auth0\/auth0-react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">const<\/span> root <span class=\"token operator\">=<\/span> ReactDOM<span class=\"token punctuation\">.<\/span><span class=\"token function\">createRoot<\/span><span class=\"token punctuation\">(<\/span>document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"root\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\nroot<span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span>\r\n  <span class=\"token operator\">&lt;<\/span>Auth0Provider\r\n    domain<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">.<\/span><span class=\"token constant\">REACT_APP_AUTH0_DOMAIN<\/span><span class=\"token punctuation\">}<\/span>\r\n    clientId<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">.<\/span><span class=\"token constant\">REACT_APP_CLIENT_ID<\/span><span class=\"token punctuation\">}<\/span>\r\n    redirectUri<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>window<span class=\"token punctuation\">.<\/span>location<span class=\"token punctuation\">.<\/span>origin<span class=\"token punctuation\">}<\/span>\r\n  <span class=\"token operator\">&gt;<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>App <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\r\n  <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Auth0Provider<span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Run your React application and make sure there are no errors related to Auth0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Login and Logout Component<\/h3>\n\n\n\n<p>Now, we will create 3 components for authentication events: Login, Logout, and User.<\/p>\n\n\n\n<p>In the <em><strong>src<\/strong><\/em> directory create new folder C<em><strong>omponents.<\/strong><\/em> Inside <em>src\/components\/<\/em> Create 3 files<\/p>\n\n\n\n<p><strong>Login.jsx, Logout.jsx, User.jsx<\/strong><\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token comment\">\/\/ Login.jsx<\/span>\r\n<span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> useAuth0 <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"@auth0\/auth0-react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">Login<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> loginWithRedirect <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useAuth0<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token operator\">&lt;<\/span>button onClick<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token function\">loginWithRedirect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>Log In<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Login<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>First, we import the <strong><em>useAuth0<\/em><\/strong> hook which is available in Auth0 React SDK.<\/p>\n\n\n\n<p>Then, we are using <em><strong>loginWithRedirect<\/strong><\/em> method which is provided by the <strong><em>useAuth0<\/em><\/strong> hook. <strong><em>loginWithRedirect<\/em><\/strong> method takes the user to the Auth0 Universal login page. After login, it redirects the user back to the application.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token comment\">\/\/ Logout.jsx<\/span>\r\n<span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> useAuth0 <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"@auth0\/auth0-react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">Logout<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> logout <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useAuth0<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>button onClick<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token function\">logout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> returnTo<span class=\"token punctuation\">:<\/span> window<span class=\"token punctuation\">.<\/span>location<span class=\"token punctuation\">.<\/span>origin <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\r\n      Log Out\r\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>button<span class=\"token operator\">&gt;<\/span>\r\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> Logout<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Similarly, for logout, we have the <strong><em>logout()<\/em><\/strong> method which comes with Auth0 React SDK. It redirects the user to the <strong>\/v2\/logout<\/strong> Auth0 endpoint to clear the login session and then takes the user back to the application.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token comment\">\/\/ User.jsx<\/span>\r\n<span class=\"token keyword\">import<\/span> React <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> useAuth0 <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"@auth0\/auth0-react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">User<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> user<span class=\"token punctuation\">,<\/span> isAuthenticated<span class=\"token punctuation\">,<\/span> isLoading <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useAuth0<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n  <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>isLoading<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token keyword\">return<\/span> <span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>Loading <span class=\"token operator\">...<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token punctuation\">}<\/span>\r\n\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\r\n    isAuthenticated <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token punctuation\">(<\/span>\r\n      <span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n        <span class=\"token operator\">&lt;<\/span>img src<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>user<span class=\"token punctuation\">.<\/span>picture<span class=\"token punctuation\">}<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>user<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\r\n        <span class=\"token operator\">&lt;<\/span>h2<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>user<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h2<span class=\"token operator\">&gt;<\/span>\r\n        <span class=\"token operator\">&lt;<\/span>p<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>user<span class=\"token punctuation\">.<\/span>email<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span>\r\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n    <span class=\"token punctuation\">)<\/span>\r\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> User<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>The User component will be used to display the user\u2019s information. We have a <em><strong>user<\/strong><\/em> object available in the <strong><em>useAuth0<\/em><\/strong> hook which we will use to get the user\u2019s name, email, etc. To check if the user has authenticated we are using <strong><em>isAuthenticated<\/em><\/strong> boolean property again available in the useAuth0 hook.<\/p>\n\n\n\n<p>Now, import all the components in the App.js file. Also, we will need <strong><em>isAuthenticated<\/em><\/strong> property from the <em><strong>useAuth0<\/strong><\/em> hook to check if the user has authenticated.<\/p>\n\n\n\n<p>We want to display the <strong>Login<\/strong> button if the user isn\u2019t authenticated and the <strong>Logout<\/strong> button if the user has completed authentication. To do that we are simply using conditional statements.<\/p>\n\n\n\n<div class=\"wp-block-cgb-block-codeplus\"><div class=\"upmostly-block better-code-block\"><div class=\"dark\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><div><span class=\"token comment\">\/\/ App.js<\/span>\r\n<span class=\"token keyword\">import<\/span> logo <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/logo.svg\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> useAuth0 <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"@auth0\/auth0-react\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> <span class=\"token string\">\".\/App.css\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> Logout <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/Components\/Logout\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> User <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/Components\/User\"<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">import<\/span> Login <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/Components\/Login\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">App<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> isAuthenticated <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">useAuth0<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>div className<span class=\"token operator\">=<\/span><span class=\"token string\">\"App\"<\/span><span class=\"token operator\">&gt;<\/span>\r\n      <span class=\"token punctuation\">{<\/span><span class=\"token operator\">!<\/span>isAuthenticated <span class=\"token operator\">?<\/span> <span class=\"token punctuation\">(<\/span>\r\n        <span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n          <span class=\"token operator\">&lt;<\/span>p<span class=\"token operator\">&gt;<\/span>Login<span class=\"token punctuation\">.<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span>\r\n          <span class=\"token operator\">&lt;<\/span>Login <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\r\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n      <span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">(<\/span>\r\n        <span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n          <span class=\"token operator\">&lt;<\/span>Logout <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\r\n          <span class=\"token operator\">&lt;<\/span>User <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\r\n          <span class=\"token operator\">&lt;<\/span>header className<span class=\"token operator\">=<\/span><span class=\"token string\">\"App-header\"<\/span><span class=\"token operator\">&gt;<\/span>\r\n            <span class=\"token operator\">&lt;<\/span>img src<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span>logo<span class=\"token punctuation\">}<\/span> className<span class=\"token operator\">=<\/span><span class=\"token string\">\"App-logo\"<\/span> alt<span class=\"token operator\">=<\/span><span class=\"token string\">\"logo\"<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span>\r\n            <span class=\"token operator\">&lt;<\/span>p<span class=\"token operator\">&gt;<\/span>\r\n              Edit <span class=\"token operator\">&lt;<\/span>code<span class=\"token operator\">&gt;<\/span>src<span class=\"token operator\">\/<\/span>App<span class=\"token punctuation\">.<\/span>js<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>code<span class=\"token operator\">&gt;<\/span> and save to reload<span class=\"token punctuation\">.<\/span>\r\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span>\r\n            <span class=\"token operator\">&lt;<\/span>a\r\n              className<span class=\"token operator\">=<\/span><span class=\"token string\">\"App-link\"<\/span>\r\n              href<span class=\"token operator\">=<\/span><span class=\"token string\">\"https:\/\/reactjs.org\"<\/span>\r\n              target<span class=\"token operator\">=<\/span><span class=\"token string\">\"_blank\"<\/span>\r\n              rel<span class=\"token operator\">=<\/span><span class=\"token string\">\"noopener noreferrer\"<\/span>\r\n            <span class=\"token operator\">&gt;<\/span>\r\n              Learn React\r\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span>\r\n          <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>header<span class=\"token operator\">&gt;<\/span>\r\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n      <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span>\r\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> App<span class=\"token punctuation\">;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n<p>Save the file and start React app. We\u2019re all done now. Pat yourself on the back if you have made it till here. Here\u2019s the result:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/s3.us-west-2.amazonaws.com\/secure.notion-static.com\/9128a7f2-45b1-41f6-b74f-186e65742cca\/screen-capture.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220801%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20220801T091350Z&amp;X-Amz-Expires=86400&amp;X-Amz-Signature=6d063a249c2bb2075cc2477c76dbc25b6611d6e270e476e037dd8787f4b4948b&amp;X-Amz-SignedHeaders=host&amp;response-content-disposition=filename%20%3D%22screen-capture.webm%22&amp;x-id=GetObject\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>In this tutorial, we completed the user Authentication in our React app with Auth0. This was just the simple implementation of the Authentication. You can learn more about how to manage routes and everything else in Auth0\u2019s official documentation.<\/p>\n\n\n\n<p><strong>Thank you so much for reading.<\/strong><\/p>\n\n\n\n<p>Feel free to comment if you have any questions or If you have any suggestions. If you want to request any article for a particular topic contact through the&nbsp;<strong><a href=\"https:\/\/upmostly.com\/about\">about<\/a><\/strong> page. I would love to hear from you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Building a safe authentication system without any third-party service is a challenging task and is much easier to get wrong. Auth0 is a third-party service that allows developers to quickly add authentication to their apps. In this tutorial, we will look at how to secure your React application with Auth0 React SDK. To log in [&hellip;]<\/p>\n","protected":false},"author":120,"featured_media":7515,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[34,4],"class_list":["post-7509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-advanced-react-tutorials","tag-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/120"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=7509"}],"version-history":[{"count":3,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7509\/revisions"}],"predecessor-version":[{"id":7521,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/7509\/revisions\/7521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/7515"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=7509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=7509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=7509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}