Set Auth State after Login

Ryan Chenkie: [0:00] One of the more important aspects of authentication in the front end is going to be how you manage the user's authentication state. In general, we need to keep some kind of state about the authenticated user, and this is a necessary for you to be able to tell your application how it can be used.

[0:17] For example, you want your authenticated users to be able to see certain UI elements, and to be able to navigate to certain spots in the application, and generally, you need some kind of state for the user to make those determinations.

[0:30] Even just as a very simple example, we can look at this drop down here that's got my name. Right now, this is hard-coded in, but it should be coming from some kind of authentication state that we set after the user logs in or signs up.

[0:43] Now, there are lots of ways that you can manage this state, and different people have their different opinions on the best way to do it. Some people prefer composition and a React application to achieve this. I like to use the context API.

[0:56] So, just really quick, if you're not familiar with React's context API, it gives you some tools so that you can get away from prop drilling. Instead of having to pass our authenticated user information all the way down to each child component that might need to use it, we can set up a context API, and then just use context wherever we need it.

[1:16] The scaffolding for the context is already provided for you, and you can see it down here in app.js. If you take a look at the very root of the application, we've got something called an auth provider and a fetch provider. These are the two contexts that we're going to be using in the application.

[1:33] Those are there, ready for you to go, and we've already got something started here for our auth context. Our job now is to work in this to be able to set some authentication state. Right now, we're just using some generic auth state, and that's setting everything to null or empty. Instead of hard coding this in, as we are here, we want to set it when the user logs in or signs up.

[1:56] Let's give ourselves some tools to do that within our auth provider here. The very first thing that we'll want to do is use some actual state here for auth state. Right now, it's just a hard-coded value. For that, we can bring in use state from React, and let's give ourselves a const of auth state and set auth state.

[2:20] We'll say, use state. For now, let's copy this object that we've got down here. We can actually cut it right out and we'll place it into use state. Our default initial state is going to be essentially the same thing, it's just going to use state now instead of being set as a hard coded value in the provider.

[2:39] Next, we'll want a function to set that state. Let's give ourselves a constant of, set auth info, and that's going to take a few things that we get back from a successful login for example. We'll want a token, user info, and expires at.

[2:58] We will de-structure those out as arguments, and within here, let's call, set auth state, and we'll set the auth state with token, user info, and expires at. You might be thinking, why are we going through this function and not just calling set auth state immediately? That's because, later on, we're going to have this set auth info function do a little bit more work.

[3:23] Now, down here in the provider, let's expose that set auth info function. We've got, auth state, so that's going to be equal to whatever the authentication state of the user currently is, and then we can expose, set auth info.

[3:37] Let's expose it as, set auth state, which is going to take in some auth info. This is going to be an object with those items we want, like token, user info, and expires at, and then we'll pass that in to set auth info.

[3:53] Now that we've got this in place, we can make a call to it when the user logs in or signs up. Let's go back over to our sign-up page, we'll start there. This is where we'll make use of our auth context. Before we can call set auth info on auth context, we've got to bring it in.

[4:13] Let's give ourselves a constant of auth context and that's going to be equal to, use context, that comes from React. We'll import it like that, and we pass into it, auth context. That auto imported auth context which comes from context/auth context where we were just working, and we got use context coming from React as well.

[4:36] On auth context, we should be able to just call, set auth state. We'll just call, auth context, set auth state, and we'll pass in the data that comes back from that sign-up response.

[4:49] Let's save that, and we'll quickly go into the login page and do the same thing. Const auth context equals use context. We'll bring in auth context, and then likewise, once the user has logged in, we'll call, auth context, set auth state and we'll pass in data.

[5:09] The spot that we'll be able to tell whether this is working is going to be in this auth debugger. Right now, we don't have anything there, but if we go to log in, let's navigate directly to the login page, and we enter some valid credentials. Once we're back at the dashboard, and we take a look at the auth debugger, here we've got some auth state.

[5:32] We've got our JSON Web Token, the time that the token expires at, and also information particular to the user.