1 00:00:00,200 --> 00:00:04,780 And once we have covered that, we are going to use off zero course. 2 00:00:04,860 --> 00:00:07,170 Hopefully you have signed up for account. 3 00:00:07,590 --> 00:00:09,000 If you don't have already. 4 00:00:09,680 --> 00:00:10,980 Now, we just need to log in. 5 00:00:11,460 --> 00:00:18,270 Now, just keep in mind, though, of in the read me, you'll find all the steps that we're going to 6 00:00:18,270 --> 00:00:18,780 be taking. 7 00:00:19,120 --> 00:00:26,200 So just in case you get hung up, some of the steps, just come back and you can always do that. 8 00:00:26,640 --> 00:00:31,410 So I'm going to log in online once you log in. 9 00:00:31,560 --> 00:00:35,340 The first thing that we want to do, if you follow the read me that I provided. 10 00:00:35,760 --> 00:00:37,890 We want to create a application. 11 00:00:38,250 --> 00:00:38,880 Well, that's a start. 12 00:00:39,330 --> 00:00:40,930 So we'll go with the application notice, of course. 13 00:00:40,950 --> 00:00:45,450 This is the testing GitHub user that I use to create the application. 14 00:00:45,870 --> 00:00:48,180 And then they also provide the old one. 15 00:00:48,630 --> 00:00:50,940 So in this case, of course, we would want to create a new one. 16 00:00:51,410 --> 00:00:52,530 We are looking for a name. 17 00:00:53,280 --> 00:00:58,840 We must, must, must, must, must go with a single page web application online. 18 00:00:58,890 --> 00:01:03,910 Let's come up with a name in my case is going to be geared hub users work. 19 00:01:04,050 --> 00:01:07,020 So we're going to create a new application. 20 00:01:07,650 --> 00:01:13,380 And once you create an app, they offer a quick start where you can pick, for example, which option 21 00:01:13,470 --> 00:01:15,350 you're going to use, which of course is react. 22 00:01:15,690 --> 00:01:22,530 So if you want, they provide a ton of useful information how you can set up authentication. 23 00:01:22,770 --> 00:01:25,980 But of course, we'll cover that in the next few days as well. 24 00:01:26,070 --> 00:01:26,730 So it's up to you. 25 00:01:27,060 --> 00:01:33,060 If you get stuck, you can either read, read me or I provide it or you can fall along with official 26 00:01:33,060 --> 00:01:33,780 documentation. 27 00:01:34,450 --> 00:01:41,940 And we're looking for the settings tab because we would want to have the domain and the client I.D. 28 00:01:42,480 --> 00:01:46,380 And he has these ones you can show publicly. 29 00:01:46,890 --> 00:01:49,950 So as you want, you can set them up as Ian Re variables. 30 00:01:50,490 --> 00:01:51,210 That's up to you. 31 00:01:51,720 --> 00:01:54,990 But I purposely made them publicly available. 32 00:01:54,990 --> 00:01:59,490 So it's not like just because you expose them, something's bad is going to happen. 33 00:01:59,760 --> 00:02:01,200 But it's always up to you if you want. 34 00:02:01,230 --> 00:02:06,630 You can, of course, store them in the EMV variables as well, because, of course, if you're pushing 35 00:02:06,630 --> 00:02:11,820 up to a get up, you don't want maybe other people to use your credentials. 36 00:02:12,360 --> 00:02:14,250 Now, what do you are looking for? 37 00:02:14,700 --> 00:02:22,030 Like I said, is the domain and client I.D. and what I would want is to navigate to a indexed chance. 38 00:02:22,860 --> 00:02:29,310 So I'm going to navigate back to an address and I'll set up two comments, one for Domain and the second 39 00:02:29,310 --> 00:02:35,740 one for the client I.D., because this is where we'll wrap our application with the author provider. 40 00:02:36,550 --> 00:02:41,340 And you can kind of already see, because I import it already from our packages. 41 00:02:41,460 --> 00:02:44,870 And yes, all the dependencies have been entirely installed. 42 00:02:44,880 --> 00:02:46,230 So you don't have to do that. 43 00:02:46,920 --> 00:02:48,870 Then once we set this one up. 44 00:02:49,080 --> 00:02:56,100 Very, very important part is to show, well, what is going to be our domain. 45 00:02:56,580 --> 00:03:01,600 Now, keep in mind, though, it is going to change once we deploy our application to identify. 46 00:03:02,190 --> 00:03:05,580 So at the moment, we're just talking about the local setup. 47 00:03:06,870 --> 00:03:09,210 We have three places where we would need to add that. 48 00:03:09,630 --> 00:03:11,700 So now we navigate back to read me. 49 00:03:12,090 --> 00:03:15,920 And what you're looking for is, of course, the HTP local host, 3000. 50 00:03:16,590 --> 00:03:22,560 Now, if you have a different port or different domain, I don't know why, but just in case you would 51 00:03:22,560 --> 00:03:22,860 have it. 52 00:03:23,190 --> 00:03:26,760 Of course, police set that up for your particular domain. 53 00:03:26,890 --> 00:03:30,770 Now, in my case, I'm just using the default setup with create or yacked up. 54 00:03:30,810 --> 00:03:34,360 So that's why I have as GDP local host 3000. 55 00:03:34,860 --> 00:03:41,460 So either grab from the read me or type it out in the application in the all the zero application. 56 00:03:41,820 --> 00:03:48,360 But I wouldn't suggest copying pasting from the URL bar because it's gonna add one more forward slash. 57 00:03:48,820 --> 00:03:52,230 And once in a while you might run into some glitches. 58 00:03:52,620 --> 00:03:55,550 So just make sure that is definitely issue. 59 00:03:55,570 --> 00:04:00,000 DP and call on them to force lushes local host and then three thousand. 60 00:04:00,450 --> 00:04:03,030 So I'm going to take this sucker. 61 00:04:03,540 --> 00:04:08,010 Then I'm going to navigate back to my application online. 62 00:04:08,160 --> 00:04:12,720 Allowed callback one than logout another one. 63 00:04:13,110 --> 00:04:15,810 And then also we have web origins. 64 00:04:16,140 --> 00:04:18,450 So copy paste and all these three places. 65 00:04:18,870 --> 00:04:21,830 And then just make sure that you save. 66 00:04:22,110 --> 00:04:22,980 That is a must. 67 00:04:23,340 --> 00:04:29,820 Now, in a second, I'm going to show you how I set up the other application where eventually, of course, 68 00:04:29,850 --> 00:04:37,320 once we push through production, we also need to add the you are all the domain that represents our 69 00:04:37,320 --> 00:04:42,790 production application because of course, this is just now for testing for localhost. 70 00:04:43,170 --> 00:04:47,940 But eventually, of course, we push our application to production and then we would need to set it 71 00:04:47,940 --> 00:04:51,420 up where we also share that domain as well. 72 00:04:52,200 --> 00:04:53,400 I'll show you that in a second. 73 00:04:53,790 --> 00:04:59,550 But for now, just make sure, make sure make sure that you say the changes again otherwise. 74 00:04:59,910 --> 00:05:00,900 You will be dealing. 75 00:05:00,920 --> 00:05:02,390 We had a bunch of Irish. 76 00:05:02,640 --> 00:05:06,200 Now let me quickly show you with my other app. 77 00:05:06,230 --> 00:05:10,090 The testing one, it looks like, as far as the setup. 78 00:05:10,540 --> 00:05:11,420 So notice here. 79 00:05:12,630 --> 00:05:15,050 I have the real Zen karma. 80 00:05:15,240 --> 00:05:17,750 So that's the syntax and then I have a local one. 81 00:05:18,300 --> 00:05:21,060 So this is my domain. 82 00:05:21,770 --> 00:05:24,810 I'll notify and then this is my local one. 83 00:05:25,320 --> 00:05:31,350 So once you do that, then we just need to worry about the connections and we have multiple options. 84 00:05:31,830 --> 00:05:34,230 So we have an option for email and password. 85 00:05:34,810 --> 00:05:36,660 So is going to be with a database. 86 00:05:36,840 --> 00:05:38,500 So you're going to have to create a database. 87 00:05:38,970 --> 00:05:40,650 And then we have the social one. 88 00:05:40,940 --> 00:05:44,130 The social one would be Google, Twitter and all that. 89 00:05:44,550 --> 00:05:45,330 So let's try that. 90 00:05:45,630 --> 00:05:48,340 We have our applications online. 91 00:05:48,600 --> 00:05:51,660 We also have the connections sorry, in the connections. 92 00:05:51,720 --> 00:05:52,920 Look for database. 93 00:05:53,370 --> 00:05:57,540 Now, of course I already have one or I'm sorry, I already created actually two. 94 00:05:58,080 --> 00:06:00,300 Let me quickly delete the testing one. 95 00:06:00,720 --> 00:06:04,170 I was just trying to see what is going to happen. 96 00:06:04,800 --> 00:06:06,660 So we're going to go testing DBI. 97 00:06:06,670 --> 00:06:07,890 I'll delete this one. 98 00:06:08,520 --> 00:06:12,180 So that's of course, how you can delete if you have the database. 99 00:06:12,630 --> 00:06:14,190 But we're going to create a new one. 100 00:06:14,610 --> 00:06:23,310 So what do you want right now is to head to database, so connections database and then create DB connection. 101 00:06:24,030 --> 00:06:26,360 And we're gonna come up, we connection name. 102 00:06:26,360 --> 00:06:29,070 We're gonna say get hub users. 103 00:06:30,540 --> 00:06:34,950 Now you can click requires user name, but I'm just going to leave it off. 104 00:06:35,320 --> 00:06:41,730 And that essentially just means that once you log in that the user name is going to be your password. 105 00:06:42,120 --> 00:06:48,670 So if you're paying attention when the user logs in, the user name essentially is D.M. some had to 106 00:06:48,670 --> 00:06:49,380 leave that option. 107 00:06:49,410 --> 00:06:50,880 But of course, it's up to you. 108 00:06:51,300 --> 00:06:55,620 Then we now the length, whatever you would want, of course we can create. 109 00:06:55,800 --> 00:07:03,510 So we're creating a database and then we have all kinds of configuration options so we can decide what 110 00:07:03,510 --> 00:07:06,390 kind of password policy are we're going to have. 111 00:07:06,570 --> 00:07:09,510 Then, of course, we can set up a custom database and all that. 112 00:07:09,960 --> 00:07:12,480 But for us, we're not going to care about that. 113 00:07:12,510 --> 00:07:16,770 We only want a default setup because in my opinion, it's good enough. 114 00:07:17,400 --> 00:07:19,920 And then we're looking for applications. 115 00:07:20,010 --> 00:07:28,680 And what you want is to click or toggle, I guess, the application that you'd want to connect the database 116 00:07:28,680 --> 00:07:28,890 to. 117 00:07:29,370 --> 00:07:31,320 So my guess again, I have three. 118 00:07:31,320 --> 00:07:35,970 I have Devall, the one I have the one that I built the application with, and I have the one that I 119 00:07:36,270 --> 00:07:39,840 just created for the project that we're currently working on. 120 00:07:40,110 --> 00:07:44,360 So, of course, what I'm going to do is click on the gate of users because that's the application out 121 00:07:44,360 --> 00:07:44,900 one at yours. 122 00:07:45,330 --> 00:07:47,650 So this is going to be a e mail. 123 00:07:48,840 --> 00:07:50,340 The password set up. 124 00:07:50,820 --> 00:07:53,170 But then also we have an option on the social one. 125 00:07:53,640 --> 00:07:55,350 So I just removed the social connection. 126 00:07:55,350 --> 00:08:02,340 So now I'm going to set the Mac where we go with create social connection and then we have tons of options. 127 00:08:02,640 --> 00:08:07,500 Now, I'm going to go just with Google and Twitter because I personally don't use the Facebook. 128 00:08:08,640 --> 00:08:15,420 Yeah, I don't see the point of adding ten of them because I only need to show you the main setup. 129 00:08:15,420 --> 00:08:17,730 And then, of course, you can add yours ones later. 130 00:08:18,210 --> 00:08:24,510 Where we're going to click onto Google and then keep in mind that eventually when you go to production, 131 00:08:25,350 --> 00:08:29,700 you probably want to use your own client I.D. and client secrets. 132 00:08:29,820 --> 00:08:36,660 But for development and for just showcasing Europe, of course, they nicely provide their own keys. 133 00:08:37,020 --> 00:08:42,750 But again, it is expected that once you go fully in production with some kind of authentication app, 134 00:08:42,780 --> 00:08:48,030 then yes, you'd, of course, provide your own client I.D. and they show you where you can get them 135 00:08:48,030 --> 00:08:50,040 as far as Google, Twitter and all that. 136 00:08:50,430 --> 00:08:53,250 So we'll just bravely click on a label. 137 00:08:53,790 --> 00:08:54,570 So create ALM. 138 00:08:54,570 --> 00:08:55,570 Sorry, create. 139 00:08:55,980 --> 00:08:58,470 And then again, we need to connect to our application. 140 00:08:58,800 --> 00:09:03,330 So in my case, I'm going to go with two because I removed it from the testing one, the one that's 141 00:09:03,330 --> 00:09:03,810 showing. 142 00:09:03,990 --> 00:09:09,190 And since I would still want to show it once in a while, I'm going to toggle it and I'm going to go 143 00:09:09,360 --> 00:09:12,660 course for the one that we just created, the get up users. 144 00:09:13,230 --> 00:09:18,810 And if you want, you can try the connection that is always an option where essentially they'll just 145 00:09:18,810 --> 00:09:21,270 tell you that you need to sign it into an account. 146 00:09:21,670 --> 00:09:27,370 And then once you do, once you sign into account, essentially they'll send it back here. 147 00:09:27,930 --> 00:09:29,450 You successfully locked in. 148 00:09:29,740 --> 00:09:31,350 Now I can go back to that dashboard. 149 00:09:31,710 --> 00:09:34,800 So just keep that in mind that you can always try the connection. 150 00:09:35,310 --> 00:09:38,730 Now, if I would want to set up more connections, I just go back. 151 00:09:39,080 --> 00:09:40,230 I want to create connection. 152 00:09:40,620 --> 00:09:44,940 And then in this case, I'm going to go for Twitter again, the same deal. 153 00:09:45,300 --> 00:09:46,140 Nothing changes. 154 00:09:46,140 --> 00:09:47,040 We create one. 155 00:09:47,940 --> 00:09:52,230 And then again, we need to decide which apps we'd want to connect it to. 156 00:09:52,620 --> 00:09:56,580 So in my case, I'm going to go with Michael Abuser's as well as does Thing Get Up user. 157 00:09:56,940 --> 00:10:02,080 And again, I would want to right away tried to connection just in case something goes bananas. 158 00:10:02,460 --> 00:10:04,800 So I'm being redirected and everything works. 159 00:10:05,100 --> 00:10:11,580 So now of course, I can display the information and you can already kind of see that this is where 160 00:10:11,580 --> 00:10:12,000 we are going. 161 00:10:12,080 --> 00:10:13,070 To get our data. 162 00:10:13,730 --> 00:10:19,670 So essentially, this is what we're going to have to name the picture and all that and wants if this 163 00:10:19,760 --> 00:10:20,360 works. 164 00:10:20,690 --> 00:10:26,210 Of course, we would just need to decide how we can set up our application using the off zero. 165 00:10:26,530 --> 00:10:30,950 And for that, we're gonna have to look through the docs now in the read me. 166 00:10:31,010 --> 00:10:37,520 I do provide to resources so wires for the main docs off off react. 167 00:10:37,920 --> 00:10:44,830 And the second one is for react as the K API docs and you'll see the differences between the two. 168 00:10:45,370 --> 00:10:51,410 And the way it works is we navigate to a site, to the main site again, where we were setting up our 169 00:10:51,410 --> 00:10:52,490 application and all that. 170 00:10:52,850 --> 00:10:54,470 We click on docs. 171 00:10:54,920 --> 00:10:57,410 Then we look for the libraries. 172 00:10:58,380 --> 00:11:02,470 And then in libraries, they have an option for single page apps. 173 00:11:02,880 --> 00:11:08,670 But I went directly with a reaction because I found I want to be more straightforward. 174 00:11:09,060 --> 00:11:16,770 So we go with Ortho, React, STK, and then in here, notice there's a separate link for the API one. 175 00:11:16,980 --> 00:11:19,080 Once in a while, we'll toggle back and forth. 176 00:11:19,440 --> 00:11:22,140 So I'll show you where I was getting the information. 177 00:11:22,320 --> 00:11:23,640 Some specific information. 178 00:11:24,090 --> 00:11:26,460 But in most cases, you can just follow this one along. 179 00:11:26,850 --> 00:11:30,240 And I got it just started by installing the application and all that. 180 00:11:30,720 --> 00:11:32,130 Which, of course, we already have. 181 00:11:32,520 --> 00:11:38,790 And then the first thing you want to do is wrap our whole application in that auth provider. 182 00:11:39,330 --> 00:11:40,530 So let's do that one first. 183 00:11:40,890 --> 00:11:42,240 Let's wrap the provider. 184 00:11:43,110 --> 00:11:48,580 And next videos, of course, we are going to set up these log-in functionality, logout and all that. 185 00:11:48,750 --> 00:11:52,970 So we're going to navigate back to a index. 186 00:11:53,450 --> 00:11:57,210 And we'll just follow the exact steps that they suggest. 187 00:11:57,660 --> 00:12:03,840 So we need to import as a name, import off provider from off ortho react. 188 00:12:04,020 --> 00:12:04,240 OK. 189 00:12:04,380 --> 00:12:04,770 Awesome. 190 00:12:05,250 --> 00:12:06,810 And then I'll wrap everything. 191 00:12:06,840 --> 00:12:08,820 I'll also wrap my get a provider. 192 00:12:09,120 --> 00:12:13,890 So I'm going to go with my off provider, make sure I wrap my whole application. 193 00:12:14,370 --> 00:12:20,520 And then we need to provide three things domain client I.D. as well as this redirect. 194 00:12:20,940 --> 00:12:21,750 You are I. 195 00:12:22,290 --> 00:12:24,150 And of course, I'm going to grab all of them. 196 00:12:24,570 --> 00:12:27,420 So we're going to navigate back health provider. 197 00:12:27,750 --> 00:12:29,530 And then let's just get these vouchers. 198 00:12:29,760 --> 00:12:31,200 That's why we're copying pasting. 199 00:12:31,650 --> 00:12:34,110 So now first I'm going to get my domain. 200 00:12:34,520 --> 00:12:37,920 Of course, this domain reflects the auto mind that we're getting. 201 00:12:38,660 --> 00:12:41,250 Then this is gonna represent our client. 202 00:12:41,970 --> 00:12:46,200 Like I said, if you want, you can set up the EMV variables. 203 00:12:46,470 --> 00:12:47,160 That's up to you. 204 00:12:47,520 --> 00:12:50,660 Because remember, you might be pushing this up to get up. 205 00:12:50,660 --> 00:12:55,590 So, of course, it would make sense if you'd set them up as an entry variables. 206 00:12:56,010 --> 00:12:57,980 And then we have our redirect one. 207 00:12:58,410 --> 00:12:59,730 So once we save. 208 00:13:00,800 --> 00:13:01,590 The indexation. 209 00:13:02,600 --> 00:13:04,310 Then everything should work. 210 00:13:05,270 --> 00:13:14,220 We should start moving along slowly by connecting to our off line, of course, having the logging log 211 00:13:14,220 --> 00:13:15,950 out functionalities and all that. 212 00:13:16,250 --> 00:13:17,390 So try to refresh. 213 00:13:17,480 --> 00:13:21,230 If you don't get any egregious errors, everything should be fine. 214 00:13:21,560 --> 00:13:26,990 So we can move along, of course, set up everything as far as the authentication.