- 00:00:01 hi everyone so we are able to now send
- 00:00:05 our sign up and login requests from the
- 00:00:07 react app to the backend but we're not
- 00:00:10 doing anything with that token and with
- 00:00:12 that data there after and one of the
- 00:00:15 important reasons for not doing anything
- 00:00:17 is of course that we have no logic to
- 00:00:19 create events or do booking sends on so
- 00:00:22 we'll take our next steps towards that
- 00:00:24 goal and make sure that our UI changes a
- 00:00:27 little bit when we are logged in and
- 00:00:28 when we are not logged in in this video
- 00:00:34 so let's start with DUI maybe and how
- 00:00:38 can we determine whether we are locked
- 00:00:40 in or not well we got this token which
- 00:00:43 we get when we log in right so let's use
- 00:00:45 that token and store it somewhere in our
- 00:00:49 application and change other parts of
- 00:00:51 DUI based on that now in off J s here we
- 00:00:57 do get our token effectively here in the
- 00:01:00 van block after logging and not for
- 00:01:02 signing up but for logging in so in the
- 00:01:05 end our goal will be to store the token
- 00:01:07 somewhere so that we can use it in other
- 00:01:10 parts of the application – like in our
- 00:01:12 main navigation which mean the end send
- 00:01:14 up here set up here in AB Jas there now
- 00:01:18 how can we get data from inside a route
- 00:01:20 like our off route where we effectively
- 00:01:23 gets the token into that main navigation
- 00:01:26 well we could use read acts for that but
- 00:01:29 we can also use something which is
- 00:01:30 built-in to react which is the context
- 00:01:33 API and that is exactly what I want to
- 00:01:36 use here I'll create a new folder
- 00:01:38 context here and in there I'll add my
- 00:01:41 off context dot JS file now how do we
- 00:01:46 create this context and how does it work
- 00:01:48 well context in the end is something
- 00:01:50 which you can think of as a storage we
- 00:01:53 can set up in the react app which we can
- 00:01:56 then access from anywhere in our
- 00:01:58 component tree so instead of passing
- 00:02:01 props around manually across all levels
- 00:02:04 we can basically use the context as a
- 00:02:06 central storage to bypass our entire
- 00:02:09 elements or a component tree and just
- 00:02:12 get the data in the places where we need
- 00:02:14 them therefore here I will export a
- 00:02:18 default react create context result
- 00:02:22 which is basically an context object and
- 00:02:24 of course for that to be available I
- 00:02:27 need to import react from react now
- 00:02:30 create context here then also takes a
- 00:02:32 default value and this could also just
- 00:02:35 be a number or could be a string but
- 00:02:39 here it will be a JavaScript object and
- 00:02:41 in there I'll have a token field which
- 00:02:44 by default will be an empty string or
- 00:02:48 null even and I will have a login method
- 00:02:52 which here is just an empty method
- 00:02:54 that's that does nothing but adding it
- 00:02:56 here will help us with Auto completion
- 00:02:58 later and I'll do the same for logout so
- 00:03:01 I got a token a login and a logout and
- 00:03:04 actually I also want to have my user ID
- 00:03:07 in here which is also null initially now
- 00:03:11 we export this contexts now we can
- 00:03:13 import it into our files and we want to
- 00:03:16 import into that file which is the the
- 00:03:19 highest at the highest level of where we
- 00:03:22 wanna use that context we can then
- 00:03:25 access the context from our all child
- 00:03:27 components but not from any higher
- 00:03:30 components and my guess that would be
- 00:03:32 the app chess and I want to wrap the
- 00:03:34 main navigation and the entire main
- 00:03:36 block here with the same context so that
- 00:03:38 anywhere in these wrapped elements we
- 00:03:41 can access that context now what do I
- 00:03:43 mean with rap well let's first of all
- 00:03:45 import our context and then it will be
- 00:03:48 clearer I'll have my off context and you
- 00:03:51 can name this however you want because
- 00:03:53 it's a default export and I'll get this
- 00:03:56 from my context folder and there the off
- 00:04:00 context file and let's now use that like
- 00:04:07 a normal JSX element but actually not
- 00:04:10 off context itself but it does have a
- 00:04:12 consumer and the provider and here we
- 00:04:15 need to provider and now we wrap this
- 00:04:18 around all elements where we want to be
- 00:04:20 able to use that context so in my case
- 00:04:23 that would be these elements so now
- 00:04:27 anywhere in there and in their children
- 00:04:29 we can now access this context and we
- 00:04:31 can do this conveniently for example in
- 00:04:33 object since it's a class-based
- 00:04:36 component with this static context type
- 00:04:39 we can add static context type here so a
- 00:04:47 static property and set this equal to
- 00:04:50 and now import our context again of
- 00:04:52 context from context off context we can
- 00:04:58 now set this property equal to off
- 00:05:00 context and bhai
- 00:05:01 the scenes react will make the
- 00:05:03 connection and will now give us access
- 00:05:05 to our context data so basically to this
- 00:05:09 default data data right now in this
- 00:05:14 context property so now anywhere in here
- 00:05:16 we can access this context for example
- 00:05:20 here in this then block here I want to
- 00:05:23 check if this state is login so if we
- 00:05:26 are logging in then I know that this
- 00:05:28 response will have a token alternatively
- 00:05:31 I can also of course check rest data if
- 00:05:33 it has a token property because we know
- 00:05:35 it will have a data field a login field
- 00:05:37 and a token field so we could say rest
- 00:05:40 data does it have a data and then a
- 00:05:42 login and a token field if it does have
- 00:05:45 we know we can set this we can now
- 00:05:47 access this context which again is now a
- 00:05:50 property given to us by react which will
- 00:05:53 have essentially everything are off
- 00:05:56 context data has so here we set this
- 00:05:59 equal to off context in off context we
- 00:06:01 have login logout token user ID so now I
- 00:06:05 can call down there this context login
- 00:06:12 and now let's say there I wanna forward
- 00:06:15 rests data data login token and rest
- 00:06:19 data data login user ID one of forward
- 00:06:23 these two fields here token and user ID
- 00:06:27 maybe also our rest data data login
- 00:06:31 token expiration field so basically all
- 00:06:34 three fields are now forwarded here and
- 00:06:37 of course you would be correct if you
- 00:06:39 now think what would this do because in
- 00:06:42 our context these methods don't do
- 00:06:46 anything well we can add the arguments
- 00:06:50 we expect to get so the arguments in
- 00:06:52 passing here token user ID and token
- 00:06:54 expiration we can add it here user ID
- 00:06:57 token expiration but of course we still
- 00:07:00 don't do anything and we won't write the
- 00:07:02 logic for the login function here I just
- 00:07:04 do this so that I can get better Auto
- 00:07:07 completion and IDE support later what
- 00:07:10 I'm really interested in is the place
- 00:07:13 where we initialize this context
- 00:07:15 in the app JS file because provider here
- 00:07:18 also takes a value and this value allows
- 00:07:22 us to set the current value of this
- 00:07:25 context which is then distribute down to
- 00:07:27 all the children who are interested now
- 00:07:30 that means that here I can now set well
- 00:07:34 all the values which this context has so
- 00:07:37 all the fields which my off context here
- 00:07:40 has so token user ID and the two methods
- 00:07:43 can be set here now I will set token
- 00:07:48 here to an empty string still order to
- 00:07:50 null initially and it will set user ID
- 00:07:55 here to now but I can now also bind my
- 00:07:58 methods to methods which are add here
- 00:08:00 and there I will add a login method
- 00:08:03 which gets a token a user ID and token
- 00:08:06 expiration and which then can do
- 00:08:11 something with it
- 00:08:11 oops let's write it as an arrow function
- 00:08:14 and we can also add a logout method
- 00:08:17 which right now doesn't do anything but
- 00:08:18 which will soon do so and now we can
- 00:08:21 bind the login field in our context
- 00:08:25 value here to this login method and
- 00:08:28 suddenly when we call log in from
- 00:08:30 anywhere in our component tree it's this
- 00:08:33 global login method which will be called
- 00:08:35 in the same of course for a logout we
- 00:08:38 can call this logout here
- 00:08:40 now the interesting part is that we can
- 00:08:43 now manage our good old State in this
- 00:08:45 class here just as we always did totally
- 00:08:49 unrelated to the context in general and
- 00:08:51 there we can manage token set it to null
- 00:08:55 and the user ID and set this to null for
- 00:08:58 example and here in login in De Smet we
- 00:09:03 can now call this set State and set
- 00:09:06 whoops no login and set token to the
- 00:09:09 token we get as an argument and the same
- 00:09:11 for the user ID and I'll take care about
- 00:09:13 the token expiration at a later point of
- 00:09:15 time now this allows us to call
- 00:09:18 something on our context and implicitly
- 00:09:21 called this method which then in turn
- 00:09:23 changes the state of this class and now
- 00:09:26 we can use the same state to manipulate
- 00:09:29 the
- 00:09:29 context value which is then passed down
- 00:09:31 to all children again so here we can set
- 00:09:34 this token to this state token and the
- 00:09:38 user ID to this state user ID I hope you
- 00:09:42 can now see that circle of how we can
- 00:09:44 now use this state management app j/s
- 00:09:46 and make it globally available in all
- 00:09:49 child components through the context and
- 00:09:52 in logout we would call this set state
- 00:09:55 and simply set token to null and user ID
- 00:09:58 to null now with that we have a way of
- 00:10:03 managing our data here now in main
- 00:10:07 navigation which important is a child of
- 00:10:10 our context provider we can access this
- 00:10:13 context now this year is a functional
- 00:10:18 component therefore this static context
- 00:10:20 type thing won't work here but there
- 00:10:24 won't be a problem because a we could of
- 00:10:27 course pass our data with normal props
- 00:10:29 in app tray s main navigation is a
- 00:10:33 direct child's we could add a token or a
- 00:10:36 is auth prop and pass that down and that
- 00:10:38 would be a absolutely fine approach but
- 00:10:41 B just to practice this context thing a
- 00:10:43 bit more we can also just import our off
- 00:10:47 context here whoops from context off
- 00:10:54 context and use a different form of that
- 00:10:58 API we can now use the consumer now
- 00:11:02 consumer is also a JSX element and this
- 00:11:07 actually then gives us a function which
- 00:11:11 we call or which we pass as a child here
- 00:11:15 and then this function result we return
- 00:11:19 the JSX code which we actually want to
- 00:11:21 render like this and now this function
- 00:11:24 will receive our context value
- 00:11:27 essentially that is how it works so here
- 00:11:30 this context will have access to all
- 00:11:32 these context fields we used before or
- 00:11:34 like token and so on and therefore we
- 00:11:36 can use that to for example only render
- 00:11:38 this list item here authenticate if we
- 00:11:41 can authenticate
- 00:11:43 if we are not logged in only if it makes
- 00:11:45 sense so we can use that syntax here and
- 00:11:49 check context token and if that exists
- 00:11:54 then we'll render this list item
- 00:11:56 otherwise it will not be rendered and on
- 00:11:59 the same page
- 00:12:00 I will only render events in booking
- 00:12:01 let's say if we are actually locked in
- 00:12:07 or let me quickly check here on the back
- 00:12:11 end I think we actually have an events
- 00:12:14 route which we can use without being
- 00:12:16 authenticated yes this one so actually
- 00:12:19 I'll revert this events is always
- 00:12:23 rendered but bookings is not so here
- 00:12:27 bookings this will only be rendered if
- 00:12:29 the token is set and here I have an
- 00:12:32 error of fennekin is only rendered if it
- 00:12:34 is not set so now I'm using that token
- 00:12:37 here and if I save all of that now you
- 00:12:41 already see we have authenticated events
- 00:12:42 here if I do now login which should give
- 00:12:45 us a token this changes now I'm still on
- 00:12:48 the authentication page because I
- 00:12:50 haven't added logic to redirect but this
- 00:12:52 works that is great and if I reload will
- 00:12:55 lose our state and therefore we'll use
- 00:12:57 we lose the token and unlocked out again
- 00:12:59 and we can persist the session by
- 00:13:01 storing the token and local storage and
- 00:13:03 so on but I'll not do this for now now
- 00:13:05 of course it would be nice to get
- 00:13:07 redirected as well and in general on App
- 00:13:10 j/s we shouldn't be able to reach all
- 00:13:13 the routes as a default and I don't want
- 00:13:15 to redirect you off all the time only if
- 00:13:18 I'm not authenticated the good thing is
- 00:13:21 since we was routing here just as normal
- 00:13:23 JSX elements and in-app J's we of course
- 00:13:26 have access to state token we don't even
- 00:13:28 need to context here we can of course
- 00:13:30 render different route configurations
- 00:13:33 based on our state so for example here
- 00:13:37 this redirect route this only makes
- 00:13:40 sense if we are not locked in so we'll
- 00:13:43 check if this state token is set and
- 00:13:45 only if it is not set indicated by that
- 00:13:48 exclamation mark I will render this so
- 00:13:50 this redirection will only kick in if we
- 00:13:53 are not locked in now
- 00:13:57 this off page here should only be
- 00:13:59 reachable if this state token is not set
- 00:14:04 of course otherwise we don't need to
- 00:14:06 sign in because we already are and
- 00:14:08 bookings here on the other hand should
- 00:14:10 only be reachable if the token is set so
- 00:14:13 just as the navigation item should only
- 00:14:14 be rendered then the route should only
- 00:14:16 be reachable in this case I also want to
- 00:14:21 redirect the user from off to our events
- 00:14:27 page let's say and also from slash to
- 00:14:29 the events page if we are authenticated
- 00:14:31 so I can duplicate these this
- 00:14:33 redirection here and redirect from slash
- 00:14:36 to events if we do have a token and also
- 00:14:41 if we do have a token and of course
- 00:14:42 therefore we can also theoretically
- 00:14:45 group that but all do it one by one to
- 00:14:47 make it really clear to understand so if
- 00:14:49 we do have a token then I don't only
- 00:14:52 want to redirect from slash to events
- 00:14:54 but also from off to events let's say
- 00:14:59 now let's save all of that and let's try
- 00:15:04 this again let's log in here and I get
- 00:15:07 redirected to the events page if I now
- 00:15:10 try to go to slash nothing I get
- 00:15:14 redirected to off because this reloads
- 00:15:16 the page and therefore we get to
- 00:15:20 dispatch again but we can see that once
- 00:15:22 they do login will automatically get
- 00:15:24 redirected to events as we should
- 00:15:26 so our routing setup should not work the
- 00:15:29 navigation bar now all's behaves
- 00:15:31 correctly and therefore we are now
- 00:15:33 starting to use our authentication data
- 00:15:36 we are starting to use the token in the
- 00:15:38 react application and that is a default
- 00:15:41 pattern you would use for rendering the
- 00:15:44 different parts depending on your user
- 00:15:46 of indication state obviously you can't
- 00:15:48 get more sophisticated than that but
- 00:15:50 this is a great start now with that we
- 00:15:54 got everything prepared to finally start
- 00:15:56 working on the events page here and
- 00:15:58 create events and render events and
- 00:16:01 later all the book events in the next
- 00:16:04 videos