Setting Up a Login Route

[00:00:00]
>> First thing that I wanna do here is let's get Netlify Dev running so that we can see our changes as we go. So I want to add. A profile that is gonna show up at the top to let us know whether or not we're logged in. So let's start by adding that, create a component called profile.

[00:00:21]
And in profile, I'm going to import React from react. And then we will import Link again from gatsby. When we're linking in between pages Link is kind of the preferred way to do that. And we'll setup a profile. That's not going to accept any arguments for now.M And it will return a div we're going to take advantage of that CSS, we already wrote him a dashboard header.

[00:00:51]
I'm going to set up a nav, and that'll pages on the dashboard. And let's come up with the couple pages that we're gonna create. So the first one is going to be for secret stuff and we're gonna give that an active class name as well. And this is a convenience method, so that we're able to specify how the links look when we're visiting that particular link, so we don't have to write that logic ourselves.

[00:01:23]
And then inside of this, I'm going to add a page name, so we'll call this secret staff. Then let's add another one, and this one will go to our base. So those are our two links., export default Profile. And then, we also wanna show whether or not we're logged in.

[00:01:50]
But we're not quite ready to do that yet. We don't have the ability to authenticate. So we'll just start a to do for now and we'll just say show login status. So let's save this, fix my typo, and now we've got a valid thing. So I'm gonna go back over here into my dashboard, and I'm going to import this.

[00:02:16]
/components/profile And I can just drop this right at the top. Make sure that's doing what I want it to, yep. Okay, so this is good. Now we can navigate around, and we can see where we are. And if you look at that URL at the top, it is changing as we move around.

[00:02:43]
So the next thing we want to do is actually control how we're seeing what's on the screen and make sure that that everyone is able to actually navigate that we can actually see those components. So let's just create some simple components to make this work. And I'm going to go into the components.

[00:02:58]
And we'll create one called route-base. The name here is entirely arbitrary. I'm prefixing with route so that I know what it's for. But you can do that however you want. You could do it with a folder name. You could do it with whatever. In here, I'm going to import React from react.

[00:03:17]
And then I'm going to set up a component called route base, and we'll make that just a component. And I'm just gonna have it have a headline in it. Let's make that wrap so it's legible, and then down here we're gonna export default. Route base, okay. So these are gonna be very simple, we're not gonna actually be building out like a full app, we're just gonna have protective areas.

[00:03:48]
So if we start here, I'm gonna copy this, because we're gonna build one more and we want this one to be called route-secret. And inside of it, we're gonna change these to be called RouteSecret. And we will say this is super secret stuff. Okay. So now that we've got that, we can switch over to our dashboard.

[00:04:17]
And let's import those as well. And so what I want to be able to do is like, if I just bring these straight in, so I'm going to get outeBase from components RouteBase, then I'll duplicate it. Get route secret from route-secret if I just drop these in. What we'll see is that's not what we wanted.

[00:04:49]
We want these to actually be different based on what the URLs. So we're going to use Reach router, which is kind of a standard react router. And I'm just gonna pull that straight in. So import router from reach router. And reach router is a dependency of Gatsby so it's already available to us, we don't have to install it ourselves.

[00:05:15]
It's kinda under the hood what makes gatsby go. So, using that I can then just create a router and move these components inside of it. And to make these actually work with the routes, I have to give it a path. So because we're wrapping these components with a router.

[00:05:37]
They get a new crop of path. And we can say that dashboard. And then for this one, we're gonna say base. And for this one we're gonna say secret. And now we've actually got routing in our app. And you know, this is one of the things that is really pleasant about this approaches like the work has been done to make this relatively straightforward.

[00:06:02]
So we don't have to worry about actually parsing the URL and doing that logic. We just kinda follow the patterns that are established, and things work. So the other thing that we're gonna need, though, is we need a way to log in. So we need a login form, and that'll allow us to actually get people authenticated and then we'll be able to use that authentication to decide whether not someone should be able to see these routes.

[00:06:27]
So, let's go back in here and create a route login component. And inside of it, we're going to import React From react and we will also see, let's just define this component. It's gonna be called login and it will return a heading that says, login or sign up.

[00:07:01]
And we'll add a button. And that button is gonna say, login. Then we're gonna export default login. And to keep with my naming convention, I'm gonna rename these to route login. So then, in our dashboard, we can just include this, will get import Browser login from components route login.

[00:07:31]
And we can include this one down here as route login, and we'll make the URL for that login as well.