1 00:00:02,150 --> 00:00:09,140 So let's get started with implementing authentication and one very important step towards that is that 2 00:00:09,140 --> 00:00:16,370 we add a new screen, the auth screen which is the screen that should present a login or sign up form which 3 00:00:16,370 --> 00:00:19,910 the user can use to login or sign up 4 00:00:20,130 --> 00:00:24,080 and therefore here in the auth screen, I'll import react from react 5 00:00:24,260 --> 00:00:31,070 and I'll also import some things from React Native because from there, from React Native, I want to have 6 00:00:31,070 --> 00:00:36,740 the scroll view because we'll build a form and I want to make sure that users on all device sizes 7 00:00:36,740 --> 00:00:38,420 can interact with it. 8 00:00:38,480 --> 00:00:42,290 I will add a stylesheet here and that should be it for now, 9 00:00:42,290 --> 00:00:44,690 we can always add more if we need more. 10 00:00:44,960 --> 00:00:50,990 We can also already include a view and the keyboard avoiding view I guess to make sure that all inputs 11 00:00:51,050 --> 00:00:52,970 are always reachable. 12 00:00:52,970 --> 00:00:58,160 Now speaking of inputs, of course we'll add a form and therefore I will reuse the input component we built 13 00:00:58,160 --> 00:01:02,630 in the forms section which I can find in the components UI folder. 14 00:01:02,720 --> 00:01:07,670 So make sure you watch this section to know what this component does and how we can manage a form with 15 00:01:07,670 --> 00:01:09,620 it. 16 00:01:09,620 --> 00:01:17,650 With that, we can create the auth screen component here which receives props and we can also create that 17 00:01:17,650 --> 00:01:22,140 styles object with the stylesheet, the create method there 18 00:01:22,150 --> 00:01:27,510 and of course export the auth screen, like this. 19 00:01:27,540 --> 00:01:33,150 Now obviously the question now also is, how do we present this auth screen? How do we make sure that we 20 00:01:33,150 --> 00:01:35,520 see this if we're not logged in? 21 00:01:35,520 --> 00:01:40,620 Now that's something we'll refine throughout this module but to get started, we can go to the navigator and 22 00:01:40,620 --> 00:01:46,200 make sure that when the app launches, we see that auth screen and for this we can use a special new navigator 23 00:01:46,200 --> 00:01:51,930 which we haven't used before which is specifically built for, you could almost say for this authentication 24 00:01:51,930 --> 00:01:56,950 use case and that the create switch navigator function that helps us there, 25 00:01:56,970 --> 00:02:02,550 so it creates such a switch navigator. The special thing about this navigator is that it always displays 26 00:02:02,550 --> 00:02:08,160 exactly one screen and you can't go back to another screen if you then navigate to a different one. 27 00:02:08,160 --> 00:02:13,710 So going back is explicitly not allowed which is exactly what we want because you shouldn't be able 28 00:02:13,890 --> 00:02:18,040 to go back to the login screen if you did just login. 29 00:02:18,090 --> 00:02:24,750 So therefore here at the bottom of the file, I'll create a new navigator, maybe my main navigator, the 30 00:02:24,750 --> 00:02:31,770 name is totally up to you of course, with create switch navigator and just as before, this navigator 31 00:02:31,920 --> 00:02:38,670 takes an argument where we configure it, so an object where we configure it and there, I want to bind 32 00:02:38,880 --> 00:02:46,260 my auth screen and also of course my shop stack thereafter. Now to have a nice header, I will also create 33 00:02:46,260 --> 00:02:55,560 my auth navigator here which is a stack navigator created with create stack navigator and in there, I'll 34 00:02:55,560 --> 00:03:00,430 just map the auth screen which I just started working on and for this of course, we need to import it, 35 00:03:00,450 --> 00:03:09,210 so in that ShopNavigator.js file, we can import auth screen from user auth screen like 36 00:03:09,210 --> 00:03:10,060 this 37 00:03:10,180 --> 00:03:16,880 and with that import added, if we go down, we map this here to auth in the auth navigator and the auth navigator 38 00:03:16,880 --> 00:03:23,640 is then mapped to auth here in the switch navigator and shop is of course mapped to the shop navigator 39 00:03:23,640 --> 00:03:28,770 and now it's the main navigator which we wrap with create app container and therefore with that if we 40 00:03:28,770 --> 00:03:34,110 save this, we will actually render the auth screen as the first screen which right now will not render 41 00:03:34,140 --> 00:03:35,820 any valid jsx, 42 00:03:36,060 --> 00:03:43,980 so we get an error but we can work on that of course because there the goal now is to render this authentication 43 00:03:43,980 --> 00:03:53,880 screen where we can login and do our thing. So here, I want to present these inputs and I'll actually 44 00:03:53,880 --> 00:04:02,750 also import the card component from components UI card to have this nice card look here and have my 45 00:04:02,750 --> 00:04:07,400 inputs in there and of course this is totally optional but here, I'll add it, here I'll add the card and 46 00:04:07,400 --> 00:04:14,030 in the card, we can add the scroll view so that we can scroll inside of that card, of course you could 47 00:04:14,030 --> 00:04:19,100 also add the scroll view around the card so that you can scroll on the overall screen but I'll do it 48 00:04:19,100 --> 00:04:27,650 like this, also add my own style here to the card which I'll name auth container maybe, name is totally 49 00:04:27,650 --> 00:04:36,540 up to you and I'll also wrap a view around all of that here as a wrapping view where I will add a 50 00:04:36,540 --> 00:04:46,880 style which I'll name screen. Actually here we can already use the keyboard avoiding view I guess with 51 00:04:46,940 --> 00:04:56,730 a behavior of padding and then this keyboard vertical offset off let's say 50. So now inside 52 00:04:56,730 --> 00:05:04,720 of that scroll view here which we have in our card, we can start adding the inputs, the custom input 53 00:05:04,720 --> 00:05:11,590 we built earlier in the course. For example here, an input with the ID email and a label of email because 54 00:05:11,590 --> 00:05:19,780 there I want to fetch the user email address and therefore the keyboard type of email-address 55 00:05:19,810 --> 00:05:22,750 which is supported both on iOS and Android. 56 00:05:22,750 --> 00:05:28,980 It should also be required and I want to use the email validator, these are two of the validation functionalities 57 00:05:28,990 --> 00:05:36,540 I built into the input earlier in this course, also auto capitalized should be turned off so I'll set 58 00:05:36,540 --> 00:05:42,630 it to none because capitalized in the email address is really not helpful and the error message I want to 59 00:05:42,630 --> 00:05:52,190 show if we have something wrong in there is please enter a valid email address, something like that. 60 00:05:53,210 --> 00:05:58,460 Now when the value changes, so on value change, we want to do something but for now I'll not do anything 61 00:05:58,460 --> 00:05:58,670 here, 62 00:05:58,670 --> 00:06:04,790 just provide an empty function so that we don't get an error and the initial value which I want to show 63 00:06:04,790 --> 00:06:05,120 here, 64 00:06:05,840 --> 00:06:08,260 well that's just an empty string 65 00:06:08,270 --> 00:06:12,530 in the end because I don't want to provide any other initial value. 66 00:06:12,530 --> 00:06:17,420 Now of course, it's not the only input, so I'll repeat this because I also need a password input here 67 00:06:17,900 --> 00:06:26,810 with a label of password and the keyboard type here should be default because I want to have the normal 68 00:06:26,810 --> 00:06:27,500 text keyword 69 00:06:27,500 --> 00:06:31,490 but I want to obscure the input so that we can't see it 70 00:06:31,490 --> 00:06:34,630 and that can be done by adding to secure text entry here. 71 00:06:34,640 --> 00:06:38,250 This is of course not a prop supported by my custom component 72 00:06:38,330 --> 00:06:44,000 but keep in mind that in this component, we forward all props to the built-in text input and the built 73 00:06:44,000 --> 00:06:48,710 in text input supports this secure text entry property here, 74 00:06:48,710 --> 00:06:51,050 so that's why I can set this. Here 75 00:06:51,100 --> 00:06:55,370 the validation should also not check for that being an email address but make sure that we have a min 76 00:06:55,370 --> 00:07:02,450 length of let's say five characters. Auto capitalization can be turned off here as well, 77 00:07:02,450 --> 00:07:08,660 error message would be please enter a valid password and with that, I just saw that here of course I 78 00:07:08,660 --> 00:07:14,510 have a typo, that should be email address, here password and I'll leave this here as it is. 79 00:07:17,440 --> 00:07:19,650 Now in order to be able to submit this, 80 00:07:19,660 --> 00:07:29,020 I also need a button, so here I will import button from React Native and add two buttons actually in 81 00:07:29,020 --> 00:07:29,790 the card 82 00:07:31,000 --> 00:07:38,370 and therefore also inside of the scroll view. The first button has a title of login let's say and we'll 83 00:07:38,370 --> 00:07:44,940 later switch this to be either login or sign up depending on the mode we're in and the color is imported 84 00:07:44,940 --> 00:07:52,570 or is added with the help of the colors constant which you should import and on these colors constant, 85 00:07:52,670 --> 00:08:01,190 I will use Colors.primary and onPress at the moment can simply point at an empty function and I 86 00:08:01,190 --> 00:08:06,320 will repeat this because I want to have a second button where I say switch to sign up and of course this 87 00:08:06,320 --> 00:08:13,550 will also then later say switch to login if we are in sign up mode and there we can maybe use our 88 00:08:13,550 --> 00:08:18,720 accent color. If we now save that, we should have a basic login screen, 89 00:08:18,720 --> 00:08:21,870 here it is, doesn't look the way it should look but we have our inputs here, 90 00:08:21,930 --> 00:08:23,580 we have these two buttons, 91 00:08:23,970 --> 00:08:26,970 also on Android once this is done loading, 92 00:08:26,970 --> 00:08:28,040 here we go 93 00:08:28,180 --> 00:08:31,360 and now of course I'll like to style this appropriately. 94 00:08:31,380 --> 00:08:33,570 So let's go down to the stylesheet 95 00:08:33,570 --> 00:08:40,550 and please note I have two styles in the end assigned - screen and auth container, so here in the styles I 96 00:08:40,550 --> 00:08:43,920 want to add both screen and auth container, 97 00:08:43,920 --> 00:08:50,390 these are the two styles I plan on working with. Now for the screen, I'll set flex to one and then justify 98 00:08:50,390 --> 00:08:57,050 my content in the center and align the items in the center to have centering both on the vertical and the 99 00:08:57,110 --> 00:08:58,730 horizontal axis 100 00:08:59,120 --> 00:09:04,090 and on the auth container, I want to set a width of let's say 80% to not take the full available 101 00:09:04,100 --> 00:09:10,100 width and a max width actually of 400 pixels in case 80% would be more than that, we restrict it 102 00:09:10,100 --> 00:09:22,710 to 400 pixels and maybe a height of let's say 50% but a max height of also 400. 103 00:09:22,800 --> 00:09:24,150 Let's see how that looks like. If 104 00:09:24,150 --> 00:09:25,950 we save this, 105 00:09:26,000 --> 00:09:27,230 this is what I get here. 106 00:09:27,230 --> 00:09:32,960 Now I can scroll in there because I set up such a scroll view and actually that's not the behavior I 107 00:09:32,960 --> 00:09:33,910 want. 108 00:09:34,160 --> 00:09:35,570 I'll not set a height here, 109 00:09:35,570 --> 00:09:39,620 I'll just add a max height so that this is capped at a certain height 110 00:09:39,620 --> 00:09:44,500 but by default it just takes as much height as required and therefore I rather instead 111 00:09:44,540 --> 00:09:49,820 add some padding so that we have some space around the inputs and it doesn't sit on the edge of the 112 00:09:49,820 --> 00:09:50,440 card, 113 00:09:50,450 --> 00:09:56,420 so this looks much nicer and let's see how that looks like on Android, yes 114 00:09:56,440 --> 00:09:57,870 looks generally OK. 115 00:09:58,690 --> 00:10:00,730 If I tap in there, this also scrolls up 116 00:10:00,730 --> 00:10:06,860 so the keyboard avoiding view is doing its job but of course, I still get an error here that on input change 117 00:10:07,040 --> 00:10:11,190 is causing an error because yes, I added on value change here, 118 00:10:11,200 --> 00:10:15,070 that should be on input change, not on value change. 119 00:10:15,070 --> 00:10:18,370 So that's a little fix but we're heading in the right direction. 120 00:10:18,430 --> 00:10:20,740 Now I'm not done though, I want to have a header title 121 00:10:20,740 --> 00:10:24,950 and how about some background color here, that would also be nice probably. 122 00:10:25,080 --> 00:10:32,680 So for that, regarding the header title of course we can add AuthScreen.navigationOptions and work 123 00:10:32,680 --> 00:10:39,070 with some static options for now because I just want to add a header title here and set this to please 124 00:10:41,480 --> 00:10:46,700 authenticate or just authenticate, something like that 125 00:10:46,700 --> 00:10:48,090 and for the background, 126 00:10:48,110 --> 00:10:53,680 well of course we could give our view here which holds everything a background color 127 00:10:54,380 --> 00:11:01,280 but I actually want to show you a new component which we haven't used thus far and for this, we need to install 128 00:11:01,280 --> 00:11:09,480 a brand new package and that's the expo-linear-gradient package which you installed with npm install 129 00:11:09,480 --> 00:11:12,480 --save expo-linear-gradient. 130 00:11:12,510 --> 00:11:16,190 This is a package which allows us to add a linear gradient with ease, 131 00:11:16,200 --> 00:11:18,270 so in a very simple way 132 00:11:18,570 --> 00:11:25,080 and after this has been installed, you just need to import from expo-linear-gradient 133 00:11:25,800 --> 00:11:32,760 and you do import a component which this exposes, the linear gradient component. 134 00:11:32,770 --> 00:11:39,730 Now that's a component which you can use in your page and here I'll use it inside of the keyboard avoiding 135 00:11:39,730 --> 00:11:47,770 view, linear gradient like this and wrap it around all the other content like this here and now you can 136 00:11:47,770 --> 00:11:48,600 configure that 137 00:11:49,240 --> 00:11:56,060 and there, I want to make sure that this has a colors key which allows us to set the colors between it 138 00:11:56,200 --> 00:12:02,080 should transition because a gradient is simply a gradient between multiple colors, at least two 139 00:12:02,080 --> 00:12:08,040 but you can add more and there you can now just add colors, like red or by adding the hex codes 140 00:12:08,230 --> 00:12:16,510 and I want to transition between #ffedff and let's say another hex code, #ffe3ff and of course 141 00:12:16,510 --> 00:12:19,020 you can experiment with different colors here. 142 00:12:19,030 --> 00:12:26,860 Now we also need to add a style here and I will name this styles gradient which we can now add down here 143 00:12:28,330 --> 00:12:36,040 and this gradient will take a width of 100% and a height of 100%, so it will take all the 144 00:12:36,040 --> 00:12:40,560 width and height it can get, this is therefore how it looks like 145 00:12:40,560 --> 00:12:41,890 but now we have a problem, 146 00:12:41,940 --> 00:12:46,300 of course our content isn't centered anymore. To ensure that this is the case, 147 00:12:46,440 --> 00:12:52,410 we now need to add justify content and align items again and therefore here on the surrounding 148 00:12:52,410 --> 00:12:53,010 screen, 149 00:12:53,010 --> 00:12:55,880 we can get rid of that. 150 00:12:55,960 --> 00:12:57,490 Now we have the same look as before, 151 00:12:57,820 --> 00:13:01,930 obviously we can therefore also achieve this by not setting width and height but just flex one. 152 00:13:02,200 --> 00:13:07,210 So now with this setup here and it's important that the screen doesn't try to center because otherwise 153 00:13:07,210 --> 00:13:08,610 the gradient will be centered 154 00:13:08,620 --> 00:13:15,510 but with this set up, we now have this look with this nice gradient and to see our header title here, we 155 00:13:15,510 --> 00:13:21,960 just need to make sure that in the navigation setup, in the shop navigator, we assign our default navigation 156 00:13:21,960 --> 00:13:23,850 props to the auth navigator. 157 00:13:23,970 --> 00:13:29,670 So I'll add the second argument to create stack navigator and default navigation options just points 158 00:13:29,670 --> 00:13:34,980 at default nav options which sets up the header colour, the header title color and so on. 159 00:13:39,730 --> 00:13:45,190 Of course, make sure you have no typo here in the auth screen navigation options in the auth screen as 160 00:13:45,190 --> 00:13:46,480 I do. 161 00:13:46,480 --> 00:13:50,950 So with that fixed, this is the setup we have here, of course you can experiment with the colors and use 162 00:13:50,950 --> 00:13:54,830 different colors if you prefer that, I'm happy with that 163 00:13:55,060 --> 00:14:01,480 and now the only remaining thing I want to fix here is my styling for the buttons, some spacing around 164 00:14:01,480 --> 00:14:09,650 them would be nice and that can easily be added by wrapping the buttons in views here, both buttons actually. 165 00:14:12,500 --> 00:14:22,640 So I'll do this here and now give each view a style here, maybe styles button container, do this on the first 166 00:14:22,760 --> 00:14:24,980 view and on the second view 167 00:14:24,980 --> 00:14:29,500 and now we can give that button container a styling down there in the stylesheet 168 00:14:29,750 --> 00:14:35,930 and here we can set a margin top for example of 10 to make sure that every button has a little margin 169 00:14:35,930 --> 00:14:40,760 to the top so that the buttons don't sit directly next to each other which I think really would help 170 00:14:40,790 --> 00:14:41,900 our buttons. 171 00:14:41,900 --> 00:14:43,350 So this looks good on iOS, 172 00:14:43,340 --> 00:14:45,280 let's also check it out on Android, 173 00:14:45,290 --> 00:14:46,910 yes this doesn't look too bad. 174 00:14:47,810 --> 00:14:53,090 So with that, we have that basic setup, now let's make sure that this also does something useful and that 175 00:14:53,090 --> 00:14:55,160 we do actually try to login with that.