1
00:00:00,000 --> 00:00:01,000
So let's now make sure

2
00:00:01,000 --> 00:00:05,000
that users can actually also log into our application

3
00:00:05,000 --> 00:00:09,000
and not just create new accounts.

4
00:00:09,000 --> 00:00:11,000
For that, we first of all must make sure

5
00:00:11,000 --> 00:00:16,000
that we can switch from signup to login mode,

6
00:00:17,000 --> 00:00:19,000
so that users can click this button,

7
00:00:19,000 --> 00:00:21,000
this link here,

8
00:00:21,000 --> 00:00:23,000
and they then stay on this page.

9
00:00:23,000 --> 00:00:27,000
But we somehow change the mode behind the scenes,

10
00:00:27,000 --> 00:00:29,000
so that when the form is submitted,

11
00:00:29,000 --> 00:00:33,000
we actually don't trigger the signup action

12
00:00:33,000 --> 00:00:36,000
as we currently always do,

13
00:00:36,000 --> 00:00:39,000
but that we instead either trigger that action

14
00:00:39,000 --> 00:00:41,000
or the login action,

15
00:00:41,000 --> 00:00:44,000
which we have yet to add to this application

16
00:00:44,000 --> 00:00:47,000
depending on which mode the user selected.

17
00:00:48,000 --> 00:00:52,000
And therefore, let's start by switching that mode

18
00:00:52,000 --> 00:00:56,000
when that button or that link here is clicked.

19
00:00:56,000 --> 00:00:59,000
And there would be different ways of handling this.

20
00:00:59,000 --> 00:01:00,000
We could, for example,

21
00:01:00,000 --> 00:01:04,000
use the useState Hook offered by React

22
00:01:04,000 --> 00:01:07,000
to keep track of some mode state

23
00:01:07,000 --> 00:01:11,000
that's either login or signup, let's say.

24
00:01:11,000 --> 00:01:13,000
And we could then change that mode

25
00:01:13,000 --> 00:01:16,000
whenever that link below the form is clicked.

26
00:01:17,000 --> 00:01:20,000
But I'll not use that hook here,

27
00:01:20,000 --> 00:01:23,000
instead, I'll use search params,

28
00:01:23,000 --> 00:01:26,000
query params, for managing that mode.

29
00:01:26,000 --> 00:01:30,000
My idea is that when we click that login

30
00:01:30,000 --> 00:01:32,000
with existing account link,

31
00:01:32,000 --> 00:01:36,000
I lead to user to the page they're already on.

32
00:01:36,000 --> 00:01:40,000
But I add a query parameter called mode here,

33
00:01:41,000 --> 00:01:44,000
which I'll set to login.

34
00:01:45,000 --> 00:01:46,000
And with Next.js,

35
00:01:46,000 --> 00:01:50,000
we can then easily extract any query parameters,

36
00:01:50,000 --> 00:01:53,000
any search parameters that might have been set

37
00:01:53,000 --> 00:01:55,000
on that page we're currently on

38
00:01:55,000 --> 00:01:57,000
by using a special prop

39
00:01:57,000 --> 00:02:02,000
that's added to all page components in Next.js applications.

40
00:02:03,000 --> 00:02:07,000
So for that, I'll go to that root page.js file here,

41
00:02:07,000 --> 00:02:08,000
that homepage,

42
00:02:08,000 --> 00:02:12,000
and there we can use object destructuring

43
00:02:12,000 --> 00:02:15,000
to get hold of the searchParams prop.

44
00:02:17,000 --> 00:02:20,000
That's a special prop that's added automatically

45
00:02:20,000 --> 00:02:23,000
to all page components in Next.js,

46
00:02:23,000 --> 00:02:25,000
and it will contain an object

47
00:02:25,000 --> 00:02:29,000
that has one key for any query parameter

48
00:02:29,000 --> 00:02:32,000
that might've been set on the currently active URL.

49
00:02:33,000 --> 00:02:36,000
So if I redirect a user to the currently active page

50
00:02:36,000 --> 00:02:41,000
with a mode query parameters set to login,

51
00:02:41,000 --> 00:02:44,000
there will be a mode property

52
00:02:44,000 --> 00:02:46,000
on that searchParams object here.

53
00:02:47,000 --> 00:02:49,000
So I can get my formMode

54
00:02:49,000 --> 00:02:51,000
or however we wanna call it

55
00:02:51,000 --> 00:02:56,000
by accessing searchParams.mode.

56
00:02:56,000 --> 00:02:59,000
Now of course, this might not be set at all

57
00:02:59,000 --> 00:03:01,000
if no query parameters were added,

58
00:03:01,000 --> 00:03:06,000
and therefore, I'll add an initial state of login here.

59
00:03:06,000 --> 00:03:09,000
So formMode is login

60
00:03:09,000 --> 00:03:12,000
if searchParams.mode doesn't have a value.

61
00:03:13,000 --> 00:03:16,000
Now we can pass this through a prop

62
00:03:16,000 --> 00:03:19,000
that could be called mode to the AuthForm.

63
00:03:20,000 --> 00:03:22,000
And in the AuthForm,

64
00:03:22,000 --> 00:03:24,000
we can, and should therefore accept

65
00:03:24,000 --> 00:03:27,000
and destructure a prop called mode,

66
00:03:27,000 --> 00:03:32,000
which will be a string with the word login or signup.

67
00:03:32,000 --> 00:03:33,000
That's the plan.

68
00:03:35,000 --> 00:03:38,000
So we can now use this mode prop,

69
00:03:38,000 --> 00:03:40,000
which will contain such a string down here

70
00:03:40,000 --> 00:03:43,000
and check if mode is login.

71
00:03:44,000 --> 00:03:49,000
In which case, I actually wanna render a different link

72
00:03:50,000 --> 00:03:54,000
that says create an account.

73
00:03:55,000 --> 00:03:57,000
Because if the mode is login,

74
00:03:57,000 --> 00:03:59,000
I want to offer the user a link

75
00:03:59,000 --> 00:04:03,000
to go to the account creation mode instead.

76
00:04:03,000 --> 00:04:06,000
Therefore the query parameter mode should be set

77
00:04:06,000 --> 00:04:08,000
to signup, in that case.

78
00:04:10,000 --> 00:04:12,000
On the other hand,

79
00:04:12,000 --> 00:04:14,000
if mode is equal to signup,

80
00:04:16,000 --> 00:04:20,000
I want to render that link I had there originally,

81
00:04:20,000 --> 00:04:22,000
where I say login with existing account.

82
00:04:24,000 --> 00:04:26,000
So that I got either this link

83
00:04:26,000 --> 00:04:30,000
or this link depending on the mode value,

84
00:04:30,000 --> 00:04:33,000
and these links can then be used to switch the mode.

85
00:04:34,000 --> 00:04:38,000
Now it's not just the links that depend on the modes,

86
00:04:38,000 --> 00:04:41,000
instead, it's also the text on this button, for example.

87
00:04:41,000 --> 00:04:46,000
Here we can also check if the mode is login, let's say.

88
00:04:46,000 --> 00:04:51,000
In which case, I wanna give the button a caption of Login.

89
00:04:51,000 --> 00:04:54,000
And otherwise, if it's not login,

90
00:04:54,000 --> 00:04:55,000
if it's signup,

91
00:04:55,000 --> 00:04:59,000
it should have a caption of Create Account, let's say.

92
00:05:01,000 --> 00:05:04,000
And if you save that all you should be able to reload,

93
00:05:04,000 --> 00:05:07,000
and if you click on Create an account,

94
00:05:07,000 --> 00:05:09,000
and then on login with existing account,

95
00:05:09,000 --> 00:05:13,000
you should be able to switch between these different modes.

96
00:05:13,000 --> 00:05:16,000
And that's now the important first step.

97
00:05:17,000 --> 00:05:21,000
The next step now is to add a login server action

98
00:05:21,000 --> 00:05:24,000
and to dynamically change that server action

99
00:05:24,000 --> 00:05:26,000
that's assigned to the form

100
00:05:26,000 --> 00:05:28,000
or that's assigned to use formState,

101
00:05:28,000 --> 00:05:31,000
to be precise, based on the mode.

102
00:05:31,000 --> 00:05:33,000
That's what we'll do next.