Our last stop was focused on learning more about the styling and building of basic components for our
next application we're going to focus on something that is required by nearly every single mobile app
out there.
Authentication or the process of signing in and signing out users to your application will be wary of
authentication using the popular data service.
Firebase which we'll use later on for some other interesting apps as well.
So given that this is a new application we are going to want to generate a new re-act native project
as well so that my terminal inside of my you know kind of general project directory here.
So Ive got my albums project right here.
I'm going to generate a new project by using the re-act native CLID.
So if you recall re-act dash native in it and I call this project off.
So this is going to start up our new project and install the Penzeys.
It's going to take a little bit.
So let's talk a little bit more about the app that we're going to build and just kind of let this installation
run.
So let's check out a diagram of what we're going to be making.
All right.
Here we go.
So this is a mockup of the app that we're making.
We're going to very purposefully keep it pretty limited in scope.
So we're just going to be signing a user in and allowing them to sign out.
So when our first app first starts up we're going to be on this Left-Hand kind of state over here.
These are really prompted with a signed form that will ask them for their email and password after they
press the logging button right here.
We'll then consider them to be like signed in or logged in.
At which point in time they'll see the screen on the right hand side.
So again when the users sign then they won't have too much to do.
They're just going to be able to sign out.
We're going to get this the absolute basics of authentication for now.
Now there is one interesting aspect to this flow.
You'll notice that we've only got kind of the sign in screen right here and there's nothing about sign
up right there's no ability to create an account.
So we're going to do to keep the lowest amount of friction for getting users sign a true application.
We're going to just show them log in screen and if they try to sign in with an e-mail address that we've
never seen before we're going to assume that they're trying to create an account and we'll just create
an account for them.
So we are going to have this kind of dual purpose log in and sign up screen all in one right here before
ever starting an app.
I like to always have a good idea of the different components I'll need to create and also figure out
what the biggest challenge is that the app will be.
So let's do that right now.
So for this application I think that we're going to be able to reuse a lot of the components that we've
just made.
So we'll have a better component will have a card with some card sections and then a button to actually
do to log in.
So I'm kind of thinking that perhaps the only component that we might need to make will be this log
and form component.
And the purpose of log in form will be just to hold the sign of fields and the button and all that kind
of good stuff.
As far as the challenges in the south we're definitely to have quite a few.
So we need to figure out how to use firebase to authenticate a user or an application.
That means we're going to sign up for the firebase service and enable authentication and install the
library to our project.
Speaking of firebase especially is a library once we install it we're going to need to figure out how
to integrate it into react so we have firebase did have a reactive integration library called re-act
fire but it's not very well maintained and not really kind of up to date with react in general.
So also our next challenge will be for the log in form itself.
We need to figure out how to handle user input.
So there's going to be like a type of ball field right here that users need to press on and then enter
some input.
So we need to figure out how to handle input.
Also close related to input we need to figure out how to validate whatever data the user enters.
So if the user enters a email right here that does not exist or excuse me if they entered email and
password combination that is incorrect we should give them a nice big error message to display.
Finally to make a usable application we want to give a reasonable amount of feedback to our users.
So in this context we want to make sure that when ever we are attempting to log a user in like so when
they type in the email and password and then click log in we shouldn't show a spinner to let the user
know that we are attempting to verify their email and password so that they know that you know we're
actually doing something.
So definitely a lot of challenges with this app.
You know deceptively it looks like there's not a lot going on here but trust me we're going to cover
a lot of content just to get the sign up form put together.
So let's continue the next section and start working on this application.