Adding Login to React with Auth0

Instructor: [0:00] Let's jump right in. The first thing we're going to do is clone the starter code already put together for us. This is going to give us a good starting point.

[0:08] Now, go ahead and CD into that project. After we've installed all of our dependencies and our app is loaded, we can see the app that we're going to start out with. Before we go any further with this app, let's make sure we have an Auth0 account and application ready to be connected to later on.

[0:23] Let's navigate to auth0.com and either log in or sign up for an account. Once you've done that, you'll land on your dashboard. Go ahead and click on this New Application button. Give this application a name and select "single-page app."

[0:36] Once this loads and generates a new application, click on the Settings tab. This is how we can figure out how we want our authentication to work within this specific app. Let's go ahead and copy the URL from our sample app and paste it in three locations.

[0:50] The first is allowedCallbackURL, which specifies which URLs we are allowing Autho0 to redirect us to after authenticating. Next is allowedLogoutURL which states which URLs we allow redirection to after logging out and finally allowedWebOrigins which handles checking for current sessions when refreshing the page. Perfect.

[1:13] Now we are ready to take some of these apps specific properties and integrate it with our starter app, so don't close this tab just yet. Let's hit back to our code and create .env file that will store our configuration values. Populate the ENV file with these two keys.

[1:27] The values will be back in our Auth0 account. Copy the domain and paste it with the domain key and then the client ID is going to go with the client ID key in this ENV file.

[1:40] Next up is installing the Auth0 React SDK npm package so I run that in my terminal. Then I'll restart my app. Back in our code, we're going to configure the Auth0 provider component. We need to use router to redirect users to the page they were trying to use after they log in.

[2:00] We are going to create Auth0 provider with history which uses composition to make React router hooks available to Auth0 provider. Under the source directory, let's create a Auth0 provider with history file. We'll populate with the following code.

[2:14] Now let's talk about what this is doing really quick. We're importing new history from React-router-dom to get the history object from our clientele router. This is again to help us redirect to the page you are on when you log in. We're also importing Auth0 provider from our React SDK.

[2:29] If you're familiar with Context and React, this is how we can give access to Auth0 values to any child component within our app. We're grabbing our two ENV values we previously added and passing them down as props to our provider.

[2:42] This is because our Auth0 provider given to us by our SDK its role is to connect our app with our Auth0 application we set up previously in our dashboard. To finish wiring everything up, let's navigate to the index page within source and import our newly created component.

[2:59] Now what we have to do is wrap this new component around the main app and now we are ready to implement user authentication. No authentication is complete without some sort of login and logout buttons. Instead of our components folder, let's create a login button component.

[3:13] This will be a basic button that has an onclick handler. We need to import the user through a hook and destructure the login with redirect function from it. This function needs to be called when our login button is clicked and as the name suggest, it will cause a redirectional way from our app to log in using Auth0.

[3:33] Now let's do something similar with the logout button. Same setup, however, this time we'll destructure the logout function from our user through a hook and that's what will be called when our button is clicked on.

[3:44] With our two buttons ready to go, let's integrate them into the nerve bar component which gets rendered to the top of our app. We'll import them into the top of the page here and also import our user through a hook.

[3:56] Next, locate the Auth nav function. We're going to change this to become a component that will first destructure the isAuthenticated Boolean value to help us determine whether or not we need to show the login or logout button in our nav.

[4:13] With those buttons in, we can go back to our app and test everything else. Notice we have this blue login button now. When we click on it, we're going to be redirected to log in. Let's sign up and it will direct us to another view where it will ask me for my consent.

[4:26] After I accept, we're going to be redirected back to our application and our blue login button is now red. If you caught it, you'll notice that our login/ logout button flashed blue and then red after we were redirected.

[4:40] We need to add some loading logic to our app component that states, "Wait to render anything until our SDK is finished loading everything it needs first." Here, we are using the isLoading Boolean from our hook and conditionally rendering the loading component if we are still loading.

[4:57] Now that we're in a good state with authentication integrated and ready to go, let's renew the authenticated user profile information to the profile page. Navigate to the profile.js page and import our use Auth0 hook. Then on line six is to two cons and then destructure the user object from that use Auth0 hook.

[5:16] Now I'm going to remove the code that's currently there and paste in some columns and additional elements. You'll notice that this is inside of a row and we have two columns. Inside the first column, we're working with an image element and the source is taking the user.picture.

[5:33] In the second column we have an H2 that's using the name from the user. Then down at the bottom we are going to highlight basically just stringifying the user object completely as you can see with entire user object looks like.

[5:46] At the top, we need to import that row and column from our React-Bootstrap as well as highlight from our components folder. Back in our app, we see the JSON stringified user object down here in the black. We're displaying the Gravatar image that we have provided as well as the name.