You've done an amazing job up to this point in building out this portfolio, this section is simply going to be cleaning up a few polish items, definitely explore in adding your own look and feel throughout this section, we're gonna be adding a few security elements and also polishing up some styles, so let's get started.

In this guide, we are going to add a security fix. Right now, our application, if you click on one of the blog posts, and if you're not logged in, you might notice that if you click on the title, you can actually activate the blog form.

Now, this will not work, because I've put checks in place in the API itself, that verifies that you're actually who you say you are, and we use the cookies and the with credentials flag in order to make that work, so if I were to go in here and say "With featured image", change it to "Whoops" and hit save, nothing's gonna happen except an error's gonna be thrown, if you hit refresh, you will see nothing changed.

So we're good from a data integrity standpoint, you can't be hacked in that way, but it's still a very bad user experience, so my goal is to check to make sure a user is logged in, and if they're not, it shouldn't even give the ability to switch into edit mode, and so let's implement that here, now we're gonna start at the very parent component, we're gonna start by opening up the app component, and as you may have guessed, we're gonna use a render prop with our route, like we've already done a few times before.

So I want you to navigate down to your route definition, where you are calling this /b/:slug, so wherever you're defining BlogDetail, and let's add that render prop here, I'm gonna go and remove this entire component call, because we're now gonna be switching to a render prop, and I'm gonna move our path prop to its own line, and let's also close that off.

And you can see right above this, for our blog, you can see here, we're passing in that loggedInStatus, so we can follow this identical pattern.

Now, I'm not gonna copy and paste it, just because it's right above us, and we can really get some practice in being able to type this all out manually, the more times you do this, you're gonna start to see that you are not gonna have to feel like you have to memorize code, or memorize syntax, by manually forcing yourself to type these types of things out, then it's gonna start to just become second nature.

So I'm gonna call our render prop, and the first thing is, we're going to have that prop argument, and that's going to have an arrow function.

Make sure, like we've talked about before, we are using parentheses and not curly brackets, for calling the component. So now I can call our BlogDetail, we're first gonna pass in props, and then from there, let's call loggedInStatus, so that's now gonna have the loggedInStatus prop, of this.state.loggedInStatus.

Okay, and then make sure to close off that component, hit save.

app.js

<Route
  path="/blog"
  render={props => (
    <Blog {...props} loggedInStatus={this.state.loggedInStatus} />
  )}
/>

<Route
  path="/b/:slug"
  render={props => (
    <BlogDetail
      {...props}
      loggedInStatus={this.state.loggedInStatus}
    />
  )}
/>

And now, inside of our blog detail, we're gonna have access to loggedInStatus. So if you scroll all the way down into the JSX code, and you can see our content manager here.

Right now we're only checking to see if we're in edit mode, but we can add one more conditional, so all we have to say here is if this.state.editMode, and this.props.loggedInStatus, is triple equals to LOGGED_IN, then we wanna return the BlogForm.

So this is not going to allow edit mode to even be triggered or it's not gonna allow this BlogForm to even be rendered if we are not logged in.

blog-detail.js

const contentManager = () => {
  if (this.state.editMode && this.props.loggedInStatus === "LOGGED_IN") {
    return (
      <BlogForm
        handleFeaturedImageDelete={this.handleFeaturedImageDelete}
        hanldeUPdateFormSubmission={this.handleUPdateFormSubmissiion}
        editMode={this.state.editMode}
        blog={this.state.blogItem}
      />
    );
  } else {

So let's test this out, we are not logged in right now, and if I click on this title, nothing happens, if you open up the console you can see it says handle edit clicked, but we're actually not even allowing that,

so the other option that we have, too, is, if you go into edit mode, so we have two spots where we could do this, let's scroll all the way up, so where it says handleEditClick, where it says this.setState, and then we're actually switching into edit mode, we also could alternatively put this check up there, and I think I'm going to do that, and the main reason is because I don't like having discrepancies in state.

I don't really feel like we should even allow ourselves to be in edit mode if the user isn't logged in, so I'm going to cut this and let's move that into the handleEditClick feature here.

So here, I can say, I'll just add the conditional inside, I'll say if this.props.loggedInStatus is logged in, then allow edit mode to occur, and if not, we're not gonna do anything, so handleEditClick won't do anything at all.

handleEditClick() {
  if (this.props.loggedInStatus === "LOGGED_IN") {
    this.setState({ editMode: true });
  }
}

Now if you open this up, if you click on "With featured image" we're not gonna have that change in state, and we can open up the React toolbox here, and we can just triple check this, which is always a good thing to do, so let's go into our blog in detail, you can see, if you go down to state, editMode is false, and if you click the title, editMode is still false, which is exactly what we're looking for.

So now we don't have any discrepancy in state, and now we are definitely only allowing that form to be rendered if a user is logged in. Let's test this out to make sure it's working for the case where a user is logged in, so type in your username and password, type login, then go back to the blog, and then click on any of the posts, click on the title, and you'll see everything there is still working, so we've now enabled the ability to add an authorization rule.

One quick side note, if you've ever heard the two terms authentication and authorization and you're confused on what the key differences are, and also as a hint, this is a very popular coding interview question, authentication is the actual process of logging in and authenticating on the server, so that is where you pass up your credentials to the server, and it either says yes, you are able to access these resources, or no, we couldn't find you in the system, or we couldn't find you with that combination of an email address and password, or username and password.

Authorization is different, that is where you're setting up your permissions. So, what we just did right here was authorization, we said, if a user is not logged in, then I don't want them to be able to access this feature, in this case, accessing the blog form. We've also done this with routes, anytime that you are changing the behavior based on if they're logged in or not, that is called authorization, so we just finished up one of our final authorization features for this entire course, so great job, and in the next guide, we're gonna go update a few of our styles.

Resources

• Source code