WEBVTT

1
00:00:00.240 --> 00:00:01.940
Hi and welcome back.

2
00:00:01.960 --> 00:00:05.820
Today we're going to be creating a new
navigation system where we're going to be

3
00:00:05.850 --> 00:00:08.780
controlling whether user
is authenticated or not.

4
00:00:08.800 --> 00:00:10.320
And according to that we're going

5
00:00:10.350 --> 00:00:14.460
to choose which navigation
system they should be accessing.

6
00:00:14.490 --> 00:00:20.260
So what we can do is create another stack
navigator here so we can say that the name

7
00:00:20.290 --> 00:00:27.820
is authenticated
and what we want to do is just copy this

8
00:00:27.850 --> 00:00:32.700
here and take out all the pages
that shouldn't be accessible

9
00:00:32.730 --> 00:00:37.460
to the authenticated user and that
should be login and registration.

10
00:00:37.490 --> 00:00:41.620
So let's make the initial root name home

11
00:00:41.650 --> 00:00:47.660
and the rest can stay the same and let's
rename this from main navigation to non

12
00:00:47.680 --> 00:00:54.600
authenticated
and let's make both of these exportable.

13
00:00:56.440 --> 00:01:00.500
So now that we have these,
what we want to do is make sure that we

14
00:01:00.530 --> 00:01:05.100
use non authenticated
and authenticated flows accordingly.

15
00:01:05.130 --> 00:01:08.480
And also for the non authenticated users we

16
00:01:08.510 --> 00:01:13.540
don't want them to have access to the home
and single donation item pages.

17
00:01:13.570 --> 00:01:16.570
So let's make sure that we
get rid of that from there.

18
00:01:16.600 --> 00:01:24.540
And then what we want to do is create a
root navigator in our navigation system.

19
00:01:24.570 --> 00:01:32.540
So let's create
a new file called root navigation JS.

20
00:01:32.570 --> 00:01:36.290
It's going to import react from react

21
00:01:36.320 --> 00:01:39.570
and then it is going to be
named root navigation.

22
00:01:39.600 --> 00:01:42.140
It's going to be a functional component

23
00:01:42.170 --> 00:01:49.290
that is going to grab the user state using
useselector state state

24
00:01:49.320 --> 00:01:58.660
user and then it is going to return if
user is logged in we're going to return

25
00:01:58.690 --> 00:02:05.540
authenticated flow, otherwise we're going
to return non authenticated flow so we can

26
00:02:05.570 --> 00:02:09.660
state this and export
default root navigation.

27
00:02:09.690 --> 00:02:12.860
And then what we can do is go to our app

28
00:02:12.890 --> 00:02:19.300
file and here instead of main navigation
we're going to use root navigation.

29
00:02:19.330 --> 00:02:20.940
So let's save this.

30
00:02:20.970 --> 00:02:23.800
And now if we want to go back I'm trying

31
00:02:23.830 --> 00:02:27.730
to slide, we are not going
to be able to do that.

32
00:02:27.760 --> 00:02:33.940
So that's great because
if the user is already logged in their go

33
00:02:33.970 --> 00:02:37.260
stack page definitely
shouldn't be the login page.

34
00:02:37.290 --> 00:02:42.780
But we're going to be working on how
to log the user out in the next video.

35
00:02:42.810 --> 00:02:45.800
So stay tuned and I'll see
you in the next video.