1 00:00:01,110 --> 00:00:03,480 ‫The last feature that we're going to implement 2 00:00:03,480 --> 00:00:08,130 ‫in this section will be to add a fake authentication. 3 00:00:08,130 --> 00:00:11,913 ‫And I'm going to explain what I mean by fake in a minute. 4 00:00:13,530 --> 00:00:16,890 ‫So in a typical front end application 5 00:00:16,890 --> 00:00:19,530 ‫like a typical React application, 6 00:00:19,530 --> 00:00:23,670 ‫user authentication usually works in three steps. 7 00:00:23,670 --> 00:00:26,580 ‫First we get the user's email and password 8 00:00:26,580 --> 00:00:30,180 ‫from a login form and check with an API endpoint 9 00:00:30,180 --> 00:00:34,260 ‫if the password for the given user is correct. 10 00:00:34,260 --> 00:00:36,030 ‫Then in the second step, 11 00:00:36,030 --> 00:00:38,820 ‫if the credentials are actually correct, 12 00:00:38,820 --> 00:00:42,540 ‫we then redirect the user to our main application 13 00:00:42,540 --> 00:00:46,320 ‫and we save the user object in our state. 14 00:00:46,320 --> 00:00:48,960 ‫And finally, as a third step 15 00:00:48,960 --> 00:00:53,250 ‫we need to protect the application from unauthorized access, 16 00:00:53,250 --> 00:00:57,030 ‫so from users who are not currently logged in. 17 00:00:57,030 --> 00:01:00,180 ‫And so we're going to implement these three steps 18 00:01:00,180 --> 00:01:02,430 ‫over these three lectures. 19 00:01:02,430 --> 00:01:06,240 ‫Now the part where the fake authentication comes into place 20 00:01:06,240 --> 00:01:08,640 ‫is basically in the first step, 21 00:01:08,640 --> 00:01:12,960 ‫because we will not ask for the user credentials from an API 22 00:01:12,960 --> 00:01:16,140 ‫but instead we're going to have a hard coded user object 23 00:01:16,140 --> 00:01:18,870 ‫in our application and we'll simply check 24 00:01:18,870 --> 00:01:22,350 ‫if the user and passwords are correct. 25 00:01:22,350 --> 00:01:24,000 ‫So we're basically going to only have 26 00:01:24,000 --> 00:01:26,310 ‫one user in this example. 27 00:01:26,310 --> 00:01:28,710 ‫But this is just to demonstrate you early on 28 00:01:28,710 --> 00:01:30,420 ‫how authentication works. 29 00:01:30,420 --> 00:01:32,760 ‫But then of course in a later project 30 00:01:32,760 --> 00:01:35,700 ‫we will implement some real authentication, 31 00:01:35,700 --> 00:01:39,060 ‫so where the data actually comes from a real database 32 00:01:39,060 --> 00:01:41,460 ‫with real users. 33 00:01:41,460 --> 00:01:42,293 ‫All right. 34 00:01:43,200 --> 00:01:45,660 ‫So remember how I said earlier 35 00:01:45,660 --> 00:01:47,700 ‫that we're going to store the user 36 00:01:47,700 --> 00:01:50,430 ‫that is logged in into state 37 00:01:50,430 --> 00:01:52,380 ‫and we will also store into state 38 00:01:52,380 --> 00:01:55,860 ‫whether the user is currently logged in or not, 39 00:01:55,860 --> 00:01:58,050 ‫so that we can protect our application 40 00:01:58,050 --> 00:02:00,210 ‫from unauthorized access. 41 00:02:00,210 --> 00:02:02,190 ‫And so in order to do that, 42 00:02:02,190 --> 00:02:04,260 ‫let's create another context 43 00:02:04,260 --> 00:02:06,720 ‫where we can store that state 44 00:02:06,720 --> 00:02:10,803 ‫and give the entire application tree access to that state. 45 00:02:12,810 --> 00:02:16,170 ‫So let's come here to our context folder 46 00:02:16,170 --> 00:02:18,043 ‫and here I will create 47 00:02:18,043 --> 00:02:19,443 ‫a FakeAuthContext.jsx. Okay. 48 00:02:25,830 --> 00:02:27,183 ‫And let's get started. 49 00:02:28,290 --> 00:02:31,620 ‫And here, let's actually just call it "AuthContext" 50 00:02:31,620 --> 00:02:33,483 ‫and drop the, "fake", part. 51 00:02:35,610 --> 00:02:38,580 ‫So create context. 52 00:02:38,580 --> 00:02:41,493 ‫And here we don't pass in any initial value. 53 00:02:42,840 --> 00:02:46,590 ‫And then let's also add our custom provider. 54 00:02:46,590 --> 00:02:51,590 ‫So AuthProvider, which will as always receive the children 55 00:02:53,760 --> 00:02:56,160 ‫and so really notice how this is 56 00:02:56,160 --> 00:02:59,310 ‫basically always the same recipe that we follow 57 00:02:59,310 --> 00:03:03,240 ‫when we implement a new context in this way. 58 00:03:03,240 --> 00:03:07,500 ‫So right here, let's also immediately return 59 00:03:07,500 --> 00:03:11,320 ‫the AuthContext.Provider 60 00:03:14,010 --> 00:03:16,503 ‫and then place the children right here. 61 00:03:17,700 --> 00:03:22,500 ‫And let's also immediately create our custom hook. 62 00:03:22,500 --> 00:03:23,333 ‫So useAuth. 63 00:03:25,800 --> 00:03:29,190 ‫So this is basically all the boiler plate code here 64 00:03:29,190 --> 00:03:30,750 ‫that we are writing right now, 65 00:03:30,750 --> 00:03:33,810 ‫which again is basically almost the same, 66 00:03:33,810 --> 00:03:36,390 ‫almost always the same, I mean. 67 00:03:36,390 --> 00:03:39,990 ‫So use context with the AuthContext 68 00:03:39,990 --> 00:03:43,353 ‫and then we check if that value is undefined. 69 00:03:44,880 --> 00:03:47,560 ‫So if it is, then we throw that new error 70 00:03:52,500 --> 00:03:53,500 ‫saying that this 71 00:03:54,390 --> 00:03:56,140 ‫context was used 72 00:03:57,630 --> 00:03:58,880 ‫outside the AuthProvider. 73 00:04:02,820 --> 00:04:04,140 ‫Now, okay. 74 00:04:04,140 --> 00:04:05,490 ‫And so with this in place, 75 00:04:05,490 --> 00:04:08,373 ‫let's now actually think about what we need to do. 76 00:04:09,270 --> 00:04:11,940 ‫So let's just come back here to our application 77 00:04:11,940 --> 00:04:16,470 ‫and then here we already have the login form, right? 78 00:04:16,470 --> 00:04:18,150 ‫So basically what we want to happen 79 00:04:18,150 --> 00:04:20,400 ‫when the user clicks on this button here 80 00:04:20,400 --> 00:04:24,090 ‫is for our application to call a login function. 81 00:04:24,090 --> 00:04:27,330 ‫And so that login function is where we will then check 82 00:04:27,330 --> 00:04:30,690 ‫if the user's credentials are correct. 83 00:04:30,690 --> 00:04:33,000 ‫So we need a login function, probably here, 84 00:04:33,000 --> 00:04:34,380 ‫which will do that. 85 00:04:34,380 --> 00:04:37,890 ‫And also we can see here in our final application 86 00:04:37,890 --> 00:04:40,080 ‫that we have a logout button. 87 00:04:40,080 --> 00:04:41,703 ‫And so we also need that. 88 00:04:42,840 --> 00:04:45,630 ‫So clicking those two buttons will then 89 00:04:45,630 --> 00:04:48,720 ‫create the actions that I mentioned earlier. 90 00:04:48,720 --> 00:04:51,240 ‫So setting the user to authenticate it 91 00:04:51,240 --> 00:04:53,580 ‫and storing the user in state. 92 00:04:53,580 --> 00:04:55,030 ‫So let's now create 93 00:04:56,160 --> 00:04:59,013 ‫first these functions and then the state itself. 94 00:05:00,420 --> 00:05:02,520 ‫So let's just call this one here login 95 00:05:02,520 --> 00:05:07,323 ‫and it will need the email and the password. 96 00:05:09,330 --> 00:05:13,230 ‫And then we also need the logout function, 97 00:05:13,230 --> 00:05:15,570 ‫which doesn't need any input. 98 00:05:15,570 --> 00:05:19,680 ‫And then we need those two state variables 99 00:05:19,680 --> 00:05:21,870 ‫where one contains the user object 100 00:05:21,870 --> 00:05:24,420 ‫and the other one stores whether the user 101 00:05:24,420 --> 00:05:26,973 ‫is currently authenticated or not. 102 00:05:27,930 --> 00:05:31,260 ‫So let's actually do that again using a reducer 103 00:05:31,260 --> 00:05:33,120 ‫because these two state variables 104 00:05:33,120 --> 00:05:36,270 ‫will always be updated at the same time. 105 00:05:36,270 --> 00:05:40,020 ‫So I really like to use a reducer in this situation, 106 00:05:40,020 --> 00:05:43,353 ‫even though if it's a really small reducer. 107 00:05:44,280 --> 00:05:47,880 ‫So let's call those user and is authenticated. 108 00:05:50,280 --> 00:05:54,033 ‫And then we also get the dispatch function. 109 00:05:55,080 --> 00:05:57,360 ‫So use reducer 110 00:05:57,360 --> 00:06:02,100 ‫with the reducer function and the initial state. 111 00:06:02,100 --> 00:06:03,513 ‫So let's create those. 112 00:06:05,400 --> 00:06:06,783 ‫Initial state. 113 00:06:08,400 --> 00:06:11,430 ‫So our user will be null in the beginning 114 00:06:11,430 --> 00:06:15,033 ‫and is authenticated, will be false. 115 00:06:17,340 --> 00:06:18,840 ‫And finally the reducer 116 00:06:18,840 --> 00:06:23,840 ‫who gets access to the current state and the action. 117 00:06:23,880 --> 00:06:28,880 ‫And here we can immediately create our two only types, 118 00:06:30,480 --> 00:06:33,450 ‫so there are only going to be really two actions here. 119 00:06:33,450 --> 00:06:35,950 ‫So that's the login action 120 00:06:37,689 --> 00:06:39,003 ‫and then later the logout. 121 00:06:40,500 --> 00:06:42,220 ‫So here we want to return 122 00:06:43,680 --> 00:06:48,610 ‫the user that should be set to the action.payload. 123 00:06:50,400 --> 00:06:55,400 ‫And of course is authenticated set to true. 124 00:06:55,470 --> 00:06:58,470 ‫Now since here we are actually setting 125 00:06:58,470 --> 00:07:01,260 ‫both the user and he is authenticated 126 00:07:01,260 --> 00:07:05,220 ‫you might think that we don't even need this part, right? 127 00:07:05,220 --> 00:07:07,410 ‫So that this would be exactly the same. 128 00:07:07,410 --> 00:07:11,070 ‫And actually it is because we are indeed. 129 00:07:11,070 --> 00:07:15,720 ‫When we do this, replacing both user and is authenticated. 130 00:07:15,720 --> 00:07:18,810 ‫However, we should always, always keep this here 131 00:07:18,810 --> 00:07:22,410 ‫because this makes our code more future proof. 132 00:07:22,410 --> 00:07:24,300 ‫So imagine that in the future 133 00:07:24,300 --> 00:07:26,507 ‫we add some other state variable here 134 00:07:26,507 --> 00:07:30,030 ‫and so then we would have everywhere to remember 135 00:07:30,030 --> 00:07:31,890 ‫to then add this back. 136 00:07:31,890 --> 00:07:33,510 ‫And so with this, 137 00:07:33,510 --> 00:07:35,610 ‫there will never be any problem with that. 138 00:07:37,230 --> 00:07:38,463 ‫But anyway, 139 00:07:39,960 --> 00:07:41,920 ‫now our second action here 140 00:07:45,390 --> 00:07:48,180 ‫and here the user, when we logout, 141 00:07:48,180 --> 00:07:50,580 ‫will simply be back to null 142 00:07:50,580 --> 00:07:54,420 ‫and is authenticated back to false. 143 00:07:54,420 --> 00:07:56,770 ‫So we could even return the initial state here. 144 00:07:58,980 --> 00:08:00,423 ‫And now our defaults, 145 00:08:01,260 --> 00:08:04,443 ‫let's just throw new error, 146 00:08:06,330 --> 00:08:07,593 ‫like this. 147 00:08:08,760 --> 00:08:13,050 ‫Okay. And so now we are ready to pass everything here 148 00:08:13,050 --> 00:08:15,240 ‫into our context value. 149 00:08:15,240 --> 00:08:19,320 ‫So that's going to be the user, 150 00:08:19,320 --> 00:08:21,480 ‫the is authenticated state, 151 00:08:21,480 --> 00:08:24,510 ‫the login function 152 00:08:24,510 --> 00:08:27,000 ‫and the logout function. 153 00:08:27,000 --> 00:08:29,610 ‫And again, we could actually also pass 154 00:08:29,610 --> 00:08:32,670 ‫the dispatch function here instead of these two. 155 00:08:32,670 --> 00:08:34,410 ‫But the login function here 156 00:08:34,410 --> 00:08:38,070 ‫will actually have some functionality and some logic 157 00:08:38,070 --> 00:08:39,780 ‫and so let's keep it here. 158 00:08:39,780 --> 00:08:43,860 ‫And also in the real world, it would make an API call. 159 00:08:43,860 --> 00:08:45,930 ‫So right here, that's not going to happen 160 00:08:45,930 --> 00:08:48,120 ‫and so this is actually a showcase 161 00:08:48,120 --> 00:08:51,450 ‫that a context actually doesn't have to do anything 162 00:08:51,450 --> 00:08:53,040 ‫with data fetching. 163 00:08:53,040 --> 00:08:56,400 ‫So this one will simply contain these two state variables 164 00:08:56,400 --> 00:08:57,900 ‫and will then broadcast them 165 00:08:57,900 --> 00:09:01,140 ‫to our entire application tree. 166 00:09:01,140 --> 00:09:02,160 ‫All right? 167 00:09:02,160 --> 00:09:04,980 ‫And now here we can check whether the 168 00:09:04,980 --> 00:09:08,370 ‫coming in email and password are correct. 169 00:09:08,370 --> 00:09:10,890 ‫And so again, this is where we would 170 00:09:10,890 --> 00:09:12,750 ‫typically have an API call 171 00:09:12,750 --> 00:09:16,560 ‫but now we will just compare them to a fake user. 172 00:09:16,560 --> 00:09:19,170 ‫So let's get that fake user object, 173 00:09:19,170 --> 00:09:22,470 ‫and I have it actually here in the components 174 00:09:22,470 --> 00:09:26,943 ‫in the user component that is part of the starter files. 175 00:09:27,990 --> 00:09:29,730 ‫So let's copy this 176 00:09:29,730 --> 00:09:32,430 ‫and not cut because that will break 177 00:09:32,430 --> 00:09:34,170 ‫this component here for now, 178 00:09:34,170 --> 00:09:35,313 ‫so let's just copy it. 179 00:09:37,890 --> 00:09:41,673 ‫So placing that right here outside the component. 180 00:09:42,540 --> 00:09:46,500 ‫And so what we can do now is to just say, 181 00:09:46,500 --> 00:09:50,250 ‫if the email is equal to fakeuser.email 182 00:09:52,830 --> 00:09:57,720 ‫and the received password is equal 183 00:09:57,720 --> 00:10:01,053 ‫to fakeuser.password, 184 00:10:02,220 --> 00:10:04,263 ‫then we can dispatch our action. 185 00:10:06,840 --> 00:10:10,173 ‫So the action of login, 186 00:10:11,550 --> 00:10:15,240 ‫with the payload of the fake user then, 187 00:10:15,240 --> 00:10:19,290 ‫so that's going to become our logged in user. 188 00:10:19,290 --> 00:10:21,570 ‫And then here, all we have to do 189 00:10:21,570 --> 00:10:24,130 ‫is to dispatch the 190 00:10:25,020 --> 00:10:27,333 ‫logout event. 191 00:10:29,280 --> 00:10:30,510 ‫All right. 192 00:10:30,510 --> 00:10:34,320 ‫And so now all we have to do here is to export these two 193 00:10:34,320 --> 00:10:36,873 ‫and then we're ready to use them. 194 00:10:37,770 --> 00:10:39,810 ‫So of course not function 195 00:10:39,810 --> 00:10:43,517 ‫but export the AuthProvider and useAuth. 196 00:10:46,650 --> 00:10:47,850 ‫All right. 197 00:10:47,850 --> 00:10:50,970 ‫And so with this, we have our context in place 198 00:10:50,970 --> 00:10:54,000 ‫and are ready to connect it with this form, 199 00:10:54,000 --> 00:10:55,800 ‫so with this button right here. 200 00:10:55,800 --> 00:10:57,510 ‫And so let's quickly move on 201 00:10:57,510 --> 00:10:59,883 ‫to the next lecture and do that.