Instructor: I'm at my terminal
inside my project directory here.
I'm going to first open my code editor.
And I'm also gonna start up our development environment
by running the command npm run start.
And that will start off webpack doing our build for us.
I'm also gonna pull up my code editor onto the screen here.
Great.
Okay.
So at this point, we've got our boilerplate package.
It's definitely running in the browser.
We tested it and we also saw some wireframes,
which means we're totally ready to get started
on our project, right?
Got this big authentication app.
We're totally ready to get going.
We've done all our startup.
We've got a good idea of the design.
That means surely we're ready
to start writing some code, right?
Well, like most things, not quite.
This is a really big application that we're making here.
It has several different screens.
We kind of have this internal kind of gut feeling
on how authentication should work but trust me,
when you really have to start writing the logic,
it really starts to get pretty darn challenging.
So again, just to get a better idea
of how we're gonna tackle this,
let's look at just a little bit more diagrams
and then we're gonna start writing some code
inside this section.
So I took the same wireframe that we were just looking at,
and I added on some component labels
for some of the stuff that we need to make.
So at the top of every single screen,
we'll have our header component.
And then in the body of each page, it's gonna swap out.
So for the first page that a user will see
when they are not authenticated,
I'm just gonna call landing.
The sign in page will be called signin.
We'll have signup.
And finally, we'll call the feature,
just simply feature but again,
if you were loading up a list of posts
or maybe emails or whatever it might be,
you might call this instead post emails,
whatever you might want to call the component.
So this gives us at least a little bit better idea
of the components that we'll need.
But what about the actual state
to power this application?
What is this application state gonna look like?
That's what's really key here for an authentication app.
I'm gonna pull another diagram up on the screen.
And so this is the diagram of the application state
that we're gonna end up with
for just handling the authentication side of things.
We're gonna have a piece of application state
called either auth or authentication.
We can kind of decide when we get there.
It'll be one or the other.
And that piece of state
is going to have two separate flags to it.
First, it'll have a plain, simple Boolean,
which will map out to the key authenticated.
This Boolean right here for authenticated relates
to whether or not the user is currently signed in
to the application.
So you'll notice that there's not really a good reason
to store the JW key
that we're going to be using inside
of our application state.
That key, we don't really need the key
in our application state.
We definitely wanna store it somewhere, right?
We wanna store it somewhere
but we don't really need it inside the application state.
So to indicate whether or not a user
is currently signed in or not,
we'll be using a simple Boolean true or false.
The other part of state that's gonna be really important
is gonna be this error flag right here.
And well, I shouldn't really say flag,
I should say error: string.
This error: string right here
will be a simple text message
to display on any given form that's on the screen
that will display whether or not an error related
to authentication just occurred.
So if a user say enters a bad password
or makes a request that they're not authenticated to make,
or if they try to create an account
with an email that's already been taken,
we'll dump that error message
on this error property right here
and then we'll make sure to use it inside
of any form that we wanna show an error message inside of.
One last thing.
We're looking at state here
but it's really important to think
about exactly how we're gonna be modifying state as well.
We modify state with action creators
but I guess what I'm trying to say
is what different action creators do we want
for our application?
Chances are we're going to want an authentication
or excuse me, an application creator
that's going to change this authenticated flag
whenever a user signs in, signs out or signs up.
So with these three probably
separate different action creators right here,
we'll be changing this flag
of authenticated from true to false.
Just a very simple toggle
to indicate whether or not the user is signed up.
So this is where we're heading.
We've now got a better idea
of what our application state's gonna look like
and we've also got a better idea
of some of the different components
that we're gonna show in our application as well.
So I think probably a good place to start
and again, when we're talking about authentication,
finding a reasonable place to start
is almost definitely one of the hardest parts.
I'm not gonna lie.
A really reasonable place to start here
would be probably starting to put together some
of the different components that we're going to need.
So putting together say React Router
and just having the ability
to navigate between these different components
would be a great place to start.
Now, React Router has already been installed
inside of this project.
So we can just immediately start making use of it
inside of our index.js file, the top-level index.js.
Inside of this top-level index.js,
we will start setting up our React Router
by importing at the top and hopefully by now,
some of this is gonna become pretty well-memorized code.
We will import our Router, our Route,
we'll probably need an IndexRoute
and the browserHistory object as well.
This is all gonna come from react-router.
We'll set up our router
by placing a router tag inside of the provider.
Remember, the provider right here
is what communicates with our connected components.
I'll place my router
and we'll assign it a history of browserHistory.
Make sure we close the tag appropriately.
And then we're just gonna put our app inside of a route.
So whenever someone goes to the root route,
show them the component App, like so.
And then I'm gonna remove this App tag standing
by itself right here.
All right, humble beginnings, right?
It's gotta start somewhere.
I'm gonna save this document.
Pop open my browser.
Go to localhost:8080.
Looks like we don't immediately have anything on the screen.
I probably just made a quick typo.
Remember, if you ever have a typo,
I highly encourage you to pop open to your terminal,
see if you have an error message,.
And sure enough, it looks like I never closed
the router tag.
Something which I seem to do all the time.
And so on line 14 right here,
sure enough, I left it open.
Let's close it.
I can verify in my terminal
that my bundle is now valid.
Refresh the page.
And I still get React simple starter on the page.
Exactly what I wanted.
So again, nice, simple, humble belongings so to speak.
Let's go ahead and continue in the next section
where we're going to continue by scaffolding out some more
of the different components inside of our application.
I'll see you there.