Now if you have never heard of authentication, it's something that might be a little bit tricky to implement if you've never done it before. But one good thing is it's something you've been using for as long as you've been using a computer or phone. If you've ever had to register for an application or log in to a website, you were using authentication.

Authentication is the process where you can tell that application that you are authorized to, maybe it might be something like creating a post, or see your feeds if you're logging into a tool like Facebook, or Twitter, it's a way of identifying yourself to the application.

And so, we're gonna take a very step by step approach for how to implement authentication into a react application because there are a few different popular ways, and so I want to explain the process at every single step of development.

So we're gonna start out, and we're gonna go slowly, and so hopefully by the end of this section, you will have a very full understanding of what authentication is, how to implement it, how to do it securely, and also how to do it properly.

So I'm gonna walk through what we're gonna be creating. I'm on the finished application right here, and if I go to the end of the URL, and just type, auth, just a-u-t-h, then you can see we have this login component.

Now in a regular application, so say you were creating a social network or something like that. You'd have a link to your login page, but this is your portfolio, you should be the only one going to this login page. So we're not gonna add a login link anywhere here because it doesn't make sense for users to know where this endpoint is.

So we're going to create a new route, and new component that's gonna manage the authentication process, and then we're going to make it possible to log in. Right now I'm in the logged-out state, you can see up here in the navbar, we don't have all the links, we don't have a sign-out link,

and if I click login right here, it's gonna redirect me to the Home page, and now you can see we have other links, and we also have a sign-out link.

So, that's what we're going to be building. We're going to make it possible to secure our application so that an unauthorized user can't access it. So for example, if I were to click on the portfolio manager form right here, you can see that I have a bunch of portfolio items and different things like that. If I, and let me grab this URL, copy it.

Now if I log out, I wouldn't want a user to be able to access that. If I come back here to the URL, and paste in that portfolio manager link, and hit Return, you can see it goes to that no matching route.

It's like the route doesn't even exist, and we'll walk through how we can properly implement that so that the application is secure. So in this guide, we're gonna switch back over to our application, and I just started the server up, so everything here should be in working order.

And let's just take the very first step, and we're gonna create that auth component. So switch over to Visual Studio Code, and open up the app, and inside of the app component, let's say right after PortfolioDetail, I'm gonna copy that, and I'm just gonna call it, Auth. And then, this is going to be in pages, and then the file name is going to be called Auth, just like that.

Now I'm not gonna save it quite yet because remember, if we try to pull in a file, or import a file we haven't created, we'll get an error message. So, I'm going to wait on saving it, but I am going to come here, and create the route. So, I'll say that the path is just gonna be auth, and it's going to use the auth component, just like that.

app.js

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/auth" component={Auth} />
    <Route path="/about-me" component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="/blog" component={Blog} />

And if you open up the file system, let's go to the Pages directory. So, SRC, Components, Pages, and then let's click, and create a new component here called, auth.js and I just want to have a regular class component here. We're gonna have to use quite a few different features such as state, and some event handlers, so I think it's fine for us to start with just using a full class component.

So I'm gonna use my snippet here of react component, and I'm gonna call this, Auth, and then let's just put some code right there, just to make sure that this is working.

auth.js

import React, { Component } from "react";

export default class Auth extends Component {
    render() {
        return <div>Auth...</div>;
    }
}

So save that, and in the app file, now we can save it, and now we should be able to navigate to localhost, and then the auth route. So after 3000 just type auth, and there we go. So that is working, our component is in place, and it is ready for us to start building it out. So, we'll start doing that in the next guide.

Resources

• Source Code