1
00:00:00,920 --> 00:00:06,690
Our last stop was focused on learning more about the styling and building of basic components for our

2
00:00:06,690 --> 00:00:11,730
next application we're going to focus on something that is required by nearly every single mobile app

3
00:00:11,730 --> 00:00:12,600
out there.

4
00:00:12,780 --> 00:00:19,320
Authentication or the process of signing in and signing out users to your application will be wary of

5
00:00:19,350 --> 00:00:21,880
authentication using the popular data service.

6
00:00:21,880 --> 00:00:26,290
Firebase which we'll use later on for some other interesting apps as well.

7
00:00:26,580 --> 00:00:31,560
So given that this is a new application we are going to want to generate a new re-act native project

8
00:00:31,560 --> 00:00:37,050
as well so that my terminal inside of my you know kind of general project directory here.

9
00:00:37,200 --> 00:00:39,670
So Ive got my albums project right here.

10
00:00:39,770 --> 00:00:44,350
I'm going to generate a new project by using the re-act native CLID.

11
00:00:44,490 --> 00:00:50,690
So if you recall re-act dash native in it and I call this project off.

12
00:00:51,570 --> 00:00:54,740
So this is going to start up our new project and install the Penzeys.

13
00:00:54,870 --> 00:00:56,070
It's going to take a little bit.

14
00:00:56,070 --> 00:01:00,390
So let's talk a little bit more about the app that we're going to build and just kind of let this installation

15
00:01:00,390 --> 00:01:01,910
run.

16
00:01:01,940 --> 00:01:06,920
So let's check out a diagram of what we're going to be making.

17
00:01:07,420 --> 00:01:07,810
All right.

18
00:01:07,810 --> 00:01:08,280
Here we go.

19
00:01:08,280 --> 00:01:10,720
So this is a mockup of the app that we're making.

20
00:01:10,820 --> 00:01:13,990
We're going to very purposefully keep it pretty limited in scope.

21
00:01:14,000 --> 00:01:17,910
So we're just going to be signing a user in and allowing them to sign out.

22
00:01:18,290 --> 00:01:23,200
So when our first app first starts up we're going to be on this Left-Hand kind of state over here.

23
00:01:23,960 --> 00:01:29,540
These are really prompted with a signed form that will ask them for their email and password after they

24
00:01:29,540 --> 00:01:31,620
press the logging button right here.

25
00:01:31,850 --> 00:01:35,340
We'll then consider them to be like signed in or logged in.

26
00:01:35,450 --> 00:01:38,170
At which point in time they'll see the screen on the right hand side.

27
00:01:38,450 --> 00:01:41,280
So again when the users sign then they won't have too much to do.

28
00:01:41,270 --> 00:01:42,650
They're just going to be able to sign out.

29
00:01:42,660 --> 00:01:47,180
We're going to get this the absolute basics of authentication for now.

30
00:01:47,180 --> 00:01:49,970
Now there is one interesting aspect to this flow.

31
00:01:50,060 --> 00:01:53,840
You'll notice that we've only got kind of the sign in screen right here and there's nothing about sign

32
00:01:53,840 --> 00:01:56,140
up right there's no ability to create an account.

33
00:01:56,390 --> 00:02:01,620
So we're going to do to keep the lowest amount of friction for getting users sign a true application.

34
00:02:01,760 --> 00:02:06,620
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

35
00:02:06,620 --> 00:02:10,940
never seen before we're going to assume that they're trying to create an account and we'll just create

36
00:02:10,940 --> 00:02:11,950
an account for them.

37
00:02:11,960 --> 00:02:19,790
So we are going to have this kind of dual purpose log in and sign up screen all in one right here before

38
00:02:19,790 --> 00:02:20,760
ever starting an app.

39
00:02:20,780 --> 00:02:25,400
I like to always have a good idea of the different components I'll need to create and also figure out

40
00:02:25,400 --> 00:02:27,550
what the biggest challenge is that the app will be.

41
00:02:27,560 --> 00:02:29,060
So let's do that right now.

42
00:02:30,430 --> 00:02:34,530
So for this application I think that we're going to be able to reuse a lot of the components that we've

43
00:02:34,530 --> 00:02:35,390
just made.

44
00:02:35,590 --> 00:02:42,040
So we'll have a better component will have a card with some card sections and then a button to actually

45
00:02:42,040 --> 00:02:43,090
do to log in.

46
00:02:43,090 --> 00:02:47,320
So I'm kind of thinking that perhaps the only component that we might need to make will be this log

47
00:02:47,320 --> 00:02:48,490
and form component.

48
00:02:48,730 --> 00:02:55,210
And the purpose of log in form will be just to hold the sign of fields and the button and all that kind

49
00:02:55,210 --> 00:02:57,740
of good stuff.

50
00:02:58,130 --> 00:03:01,760
As far as the challenges in the south we're definitely to have quite a few.

51
00:03:01,790 --> 00:03:07,210
So we need to figure out how to use firebase to authenticate a user or an application.

52
00:03:07,310 --> 00:03:12,020
That means we're going to sign up for the firebase service and enable authentication and install the

53
00:03:12,020 --> 00:03:14,240
library to our project.

54
00:03:14,240 --> 00:03:19,670
Speaking of firebase especially is a library once we install it we're going to need to figure out how

55
00:03:19,670 --> 00:03:26,330
to integrate it into react so we have firebase did have a reactive integration library called re-act

56
00:03:26,330 --> 00:03:32,170
fire but it's not very well maintained and not really kind of up to date with react in general.

57
00:03:32,630 --> 00:03:35,720
So also our next challenge will be for the log in form itself.

58
00:03:35,840 --> 00:03:38,060
We need to figure out how to handle user input.

59
00:03:38,060 --> 00:03:43,040
So there's going to be like a type of ball field right here that users need to press on and then enter

60
00:03:43,040 --> 00:03:43,730
some input.

61
00:03:43,730 --> 00:03:46,800
So we need to figure out how to handle input.

62
00:03:47,540 --> 00:03:53,110
Also close related to input we need to figure out how to validate whatever data the user enters.

63
00:03:53,270 --> 00:03:58,820
So if the user enters a email right here that does not exist or excuse me if they entered email and

64
00:03:58,820 --> 00:04:04,470
password combination that is incorrect we should give them a nice big error message to display.

65
00:04:04,670 --> 00:04:10,830
Finally to make a usable application we want to give a reasonable amount of feedback to our users.

66
00:04:11,090 --> 00:04:17,750
So in this context we want to make sure that when ever we are attempting to log a user in like so when

67
00:04:17,750 --> 00:04:23,420
they type in the email and password and then click log in we shouldn't show a spinner to let the user

68
00:04:23,420 --> 00:04:27,350
know that we are attempting to verify their email and password so that they know that you know we're

69
00:04:27,350 --> 00:04:29,260
actually doing something.

70
00:04:29,270 --> 00:04:31,290
So definitely a lot of challenges with this app.

71
00:04:31,340 --> 00:04:37,250
You know deceptively it looks like there's not a lot going on here but trust me we're going to cover

72
00:04:37,250 --> 00:04:41,330
a lot of content just to get the sign up form put together.

73
00:04:41,360 --> 00:04:45,110
So let's continue the next section and start working on this application.