1
00:00:02,000 --> 00:00:03,000
Now for this course section

2
00:00:03,000 --> 00:00:07,000
I prepared another starting project for you.

3
00:00:07,000 --> 00:00:08,000
Which you find attached,

4
00:00:08,000 --> 00:00:09,000
which you can download

5
00:00:09,000 --> 00:00:14,000
run NPM install and start the dev server with NPM run dev

6
00:00:15,000 --> 00:00:17,000
and you will see something like this.

7
00:00:17,000 --> 00:00:18,000
That's the demo page,

8
00:00:18,000 --> 00:00:20,000
which I prepared

9
00:00:20,000 --> 00:00:22,000
here we got the starting page,

10
00:00:22,000 --> 00:00:23,000
a log in page,

11
00:00:23,000 --> 00:00:27,000
a profile page and a log out button

12
00:00:27,000 --> 00:00:29,000
at the moment the log out button doesn't do anything

13
00:00:29,000 --> 00:00:33,000
and these forums here also don't do anything.

14
00:00:33,000 --> 00:00:37,000
We are going to add some life to this application

15
00:00:37,000 --> 00:00:39,000
throughout this module.

16
00:00:39,000 --> 00:00:43,000
And we are going to make sure that for example

17
00:00:43,000 --> 00:00:47,000
only authenticated users can go to profile.

18
00:00:47,000 --> 00:00:49,000
And the log in page

19
00:00:49,000 --> 00:00:51,000
on the apprehend should not be accessible.

20
00:00:51,000 --> 00:00:53,000
If you are authenticated

21
00:00:53,000 --> 00:00:58,000
you should not even see that menu option in that case.

22
00:00:58,000 --> 00:01:00,000
So these are the various things we're going to do

23
00:01:00,000 --> 00:01:02,000
in this section,

24
00:01:02,000 --> 00:01:04,000
and definitely feel free to explore

25
00:01:04,000 --> 00:01:07,000
the different components I'm providing to you here.

26
00:01:08,000 --> 00:01:10,000
It's all pretty straight forward.

27
00:01:10,000 --> 00:01:11,000
Just a couple of forums

28
00:01:11,000 --> 00:01:15,000
a couple of standard components on the auth form.

29
00:01:15,000 --> 00:01:19,000
I have some state for switching between login and sign up

30
00:01:19,000 --> 00:01:22,000
when we click this button at the bottom

31
00:01:22,000 --> 00:01:24,000
and all I do here is toggled ,

32
00:01:24,000 --> 00:01:27,000
this is log in state and then use it

33
00:01:27,000 --> 00:01:29,000
to output content conditionally.

34
00:01:29,000 --> 00:01:32,000
When that bottom button is clicked.

35
00:01:32,000 --> 00:01:34,000
So fairly standard,

36
00:01:34,000 --> 00:01:36,000
nothing next JS specific here.

37
00:01:36,000 --> 00:01:40,000
And therefore let's now understand how authentication works

38
00:01:40,000 --> 00:01:43,000
before we then start implementing it.