Kent C. Dodds: 0:00 Web applications aren't really applications, unless you have some user authentication, so the user can create data and associate it to their account. Then, people can't access that data, unless they have that user's username and password.

0:14 That's the typical way that we do authentication is with username and password, but the user doesn't want to have to type in their password every time, so you need to somehow preserve that logged in state even when the user closes the browser.

0:27 Typically, the way that we go about doing this is by using a token. I explained how to accomplish that with window.fetch, where you pass that token as part of the authorization header, so you can make authenticated requests.

0:39 Here, I give you a little bit of a warning, and I recommend that you don't build the backend for authentication yourself, and instead you rely on another service that is 100 percent dedicated to solving this difficult problem.

0:52 Unless you happen to be somebody who's building a service like that, then sure, knock yourself out, go build your own backend for authentication.

1:00 I recommend one of these three services, or there are others, regardless of which one you choose, they pretty much all have the same idea. You get a token. If the user's logged in, then you'll get that token you can make authenticated requests. If they're not, then you can render a login screen where they can authenticate.

1:17 The way that this all works in React is you store the user's state in useState. Then, you can use that to make authenticated requests, and I give you a little bit of an idea of how I architect my applications in regard to authentication to make things easier to maintain. I've got a blog post for you to take a look at.

1:36 Let's take a look at the exercise. If I pull up in the final version over here, then I can register for some random account here. Then, I get to see that discover page we built earlier, and I can look for voice to get the "Voice of War" or lion to get "Lion King," and then I can log out, and I can go back and log in again.

1:57 That's what we're supposed to build here. In our version, that currently doesn't work. We're just rendering the unauthenticated app, and login doesn't do anything. Your job is to wire everything up, so we render the unauthenticated app when we don't have a user and then the authenticated app, when we do.

2:16 We have not implemented our own provider. We've got some backend engineers who are 100 percent dedicated to this, and they've created this module for us called authProvider.

2:25 Here's how you use it. You can import it with import * as auth from authProvider, then you can call getToken to get the user's token if they're currently logged in.

2:34 If you don't get a token from that, then you know they're not logged in, and they need to call login with the username and password to get that user's information including their token and register if they want to register for a new account. Then, finally, you can call login to get the user's information cleared out.

2:50 Once you have that token, you can start making authenticated requests by attaching the authorization header to a request with bearer token, which we'll do in an extra credit.

3:01 For this exercise, you're going to be working in the App.js file, but then we've got some extra credits, where you're going to be doing some additional stuff in both the App.js and the API client.

3:12 Then, also, we're going to bring in that useAsync to simplify some of this stuff in our App.js. We'll also automatically log the user out when we get a 401 from the backend indicating that we have an invalid request here. Then, we'll also add support for posting data to our backend with the token that we got from our authProvider.

3:33 I think that you'll have a good time with this. Authentication is when magic happens in our applications. Have a good time with this exercise, and we'll see you on the other side.