OK, this is gonna be a composed component so similar to a wrapper or functional component in the sense that we take a component and extend its functionality. Okay so in this case we're just going to say okay we want this component to have a little bit more functionality and that functionality is protecting it in our routes.

We want to protect it, we want to say hey this component requires the user to be signed in. Okay so let's go ahead and go to our component's directory and create a new file and call it requireAuth.js. Okay, now we're going to want to import react so we're gonna say import React component from react.

And then we're going to do it a little bit differently, we just want to basically return a function. We want to export a function that returns a class so let's say export default function and this is where we pass the child component or in this case I want to call it composed component okay and let's say class authentication so were returning a class okay.

It's very similar to a functional component. And then we want to say extends Component and in here we want to use a few specific methods. We obviously want to use our render method which we will just return the composed component in and we want a couple of the lifecycle methods in here as well. OK. So let's say component will mount and component will update.

requireAuth.js

import React, { Component } from 'react';

export default function(ComposedComponent) {
    class Authentication extends Component {
        componetWillMount() {

        }
        componentWillUpdate() {

        }
        render() {
            return <ComposedComponent/>
        }
    }
}

So that's kind of the skeleton of it, although we also need access to redux if we want to basically see this authenticated variable. You'll see it is false right now

and in our application we're still in dashboard. So basically what we want is to not allow the user to get here if this is false. So basically we need access to this variable so we can use it in this requireAuth.js file. So with that knowledge let's important connect from react-redux.

Now what we need to do is somehow connect it even though we're exploiting the function up here okay. So the syntax probably looks a little weird to you since we've been doing it completely different but I'll show you how to do it right now.

So what we need to do is say, down here, this is where we're returning the class. Because right now all this export default function is doing is creating a class in here but we're not doing anything with it.

So if we were to use this in a different file and say something like require auth and pass in the component we want to require, authentication, we want the user authenticated in order to view it wouldn't do anything, it would just create a class it wouldn't even return anything to our function so we'd get an error.

So what we need to do down here is say function mapStateToProps so we can get that piece of state that we want, which is the authenticated variable which we know is in our authreducer right here. So let's get it by saying state.auth.authenticated. So let's say return authenticated, what I want to do is pull it out.

So let's say constant authenticated is equal to state.auth. So basically it's going to go into state.auth and it's going to check for authenticated and it's going to check for authenticated and its going take it out and put it into this variable. And then we're returning it, so now we have access to it in our class here and we can say something like this.props.authenticated.

Now if we tried to do that, it wouldn't work because there's no connection between this class and mapStateToProps yet. So let's create that connection by using the Connect function from react redux and say return connect mapStateToProps. And in this set of parentheses authentication. So we're connecting mapStateToProps to our authentication class.

So now in these component willMount and willUpdate methods we have access to this piece of state authenticated.

requireAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

export default function(ComposedComponent) {
    class Authentication extends Component {
        componentWillMount() {

        }
        componentWillUpdate() {

        }
        render() {
            return <ComposedComponent/>
        }
    }

    function mapStateToProps(state) {
        const { authenticated } = state.auth;
        return { authenticated }
    }

    return connect(mapStateToProps)(Authentication)
}

Now at this point you're probably wondering what these two methods are and why their names mean anything when they run. So I'll show you what they mean by going to Chrome and if you open a new tab and Google component did make sense. There is an articleon this that explains it pretty well.

Alright so it says learn the react lifecycle methods and when and how to use them. So looking at this diagram

you can see there's a whole bunch but the ones we're focusing on are these two right here. Component willMount and willUpdate. Okay so willMount and willUpdate at the bottom here. So basically you can see that willMount comes before render and willUpdate is going to come right before it renders again.

Basically we want to check in these methods if the users authenticated and if they're not then we're going to push them back to the normal route, the base, the root route. So let's say if this.props.authenticated I'm gonna put an exclamation point in front of this to say not, so if they're not authenticated then we want to say something like this.props.history.push and push them back here.

Now there is a slight catch here and it's that we don't have access to history in our props because this isn't directly associated with our browser router. So let's go ahead and let's talk about this by fixing it. So let's fix this and get access to this and it's pretty easy. All we have to do is go into bootstrap and basically switch this around so we have access to the history on multiple components.

So with that knowledge let's end the video here and then in the next video we will learn how we can actually get access to this so we can push them back when the user is not authenticated.

Terminal

git status
git add .
git commit -m "started building require auth HOC"

I'll see you in the next video where we will continue building this component and specifically how we can actually get access to our history so we can perform the piece of functionality that we want to, so I'll see you then.

Resources

requireAuth.js

import React, { Component } from 'react';
import { connect } from 'react-redux';


export default function(ComposedComponent) {
    class Authentication extends Component {
        componentWillMount() {
            if(!this.props.authenticated) {
                this.props.history.push('/')
            }
        }
        componentWillUpdate() {

        }
        render() {
            return <ComposedComponent/>
        }
    }

    function mapStateToProps(state) {
        const { authenticated } = state.auth;
        return { authenticated } 
    }

    return connect(mapStateToProps)(Authentication)
}

Source code