1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:03,530
And once we're done with submit BTN functionality.

3
00:00:03,560 --> 00:00:05,990
Now let's set up a test user.

4
00:00:05,990 --> 00:00:11,390
So essentially I want to create a functionality where someone can come to the application and take it

5
00:00:11,390 --> 00:00:15,320
for a test drive without creating the account.

6
00:00:15,420 --> 00:00:19,400
Now of course you can use whichever values you feel comfortable with.

7
00:00:19,430 --> 00:00:24,700
Just make sure that you remember them because we'll have to use them on the front end.

8
00:00:24,710 --> 00:00:32,000
But if you're interested, you'll find some options that I generated with ChatGPT in the Readme.

9
00:00:32,000 --> 00:00:33,930
And in my case, I'm going to go with this one.

10
00:00:33,950 --> 00:00:39,590
Now, of course we can use the front end in order to create that user, but I think in order to speed

11
00:00:39,590 --> 00:00:41,780
this up, I'll go with Thunderclan.

12
00:00:41,780 --> 00:00:44,360
So author Routes Register User.

13
00:00:45,220 --> 00:00:47,710
And essentially I just want to use these values.

14
00:00:47,710 --> 00:00:49,240
So name is going to be Zippy.

15
00:00:49,270 --> 00:00:56,710
Then I have test at Test.com, then secret one, two, three, last name, shake and bake and the location

16
00:00:56,710 --> 00:00:58,500
is going to be a code wheel.

17
00:00:58,510 --> 00:01:00,390
So we create the user.

18
00:01:00,420 --> 00:01:01,390
That's awesome.

19
00:01:01,390 --> 00:01:08,230
Now we want to go to a front end and effectively remember where we have that Explore the app button.

20
00:01:08,810 --> 00:01:14,390
Once we click the button, we want to send a request to login the user.

21
00:01:14,660 --> 00:01:16,580
So let's try that one out.

22
00:01:16,610 --> 00:01:20,210
We're going to go to client source then.

23
00:01:21,110 --> 00:01:22,730
We're looking for two pages.

24
00:01:23,360 --> 00:01:25,490
More specifically, a login one.

25
00:01:26,330 --> 00:01:31,040
And then, like I said, we have here this explore the app button.

26
00:01:31,040 --> 00:01:37,100
So now in the component I want to set up the functionality where once we click on a button, we send

27
00:01:37,100 --> 00:01:42,890
a request to a login one and of course we provide the correct values.

28
00:01:42,890 --> 00:01:46,910
So in my case test that this.com and then secret one, two, three.

29
00:01:46,940 --> 00:01:53,420
Now since in this case we're going to navigate in the actual function.

30
00:01:54,050 --> 00:01:58,430
We'll also need to use, use, navigate instead of the redirect.

31
00:01:58,430 --> 00:02:03,290
So again, when we're talking about redirect, we're using it in the action or in the loader.

32
00:02:03,290 --> 00:02:07,070
But when it comes to the component we want to use navigate.

33
00:02:07,070 --> 00:02:10,850
So for starters, let's create the instance.

34
00:02:11,540 --> 00:02:13,100
I'm going to call this navigate.

35
00:02:13,880 --> 00:02:16,070
And let's set it equal to use.

36
00:02:16,100 --> 00:02:16,940
Navigate.

37
00:02:16,970 --> 00:02:18,230
Let's invoke that.

38
00:02:18,680 --> 00:02:20,170
I believe I'm importing that.

39
00:02:20,180 --> 00:02:21,410
Yep, that's correct.

40
00:02:21,410 --> 00:02:23,300
And now let's set up the function.

41
00:02:23,780 --> 00:02:27,860
In my case, I'm going to call this login demo or test user.

42
00:02:28,520 --> 00:02:31,520
It's going to be async function.

43
00:02:31,970 --> 00:02:35,390
And inside of it we'll set up the try and catch.

44
00:02:35,480 --> 00:02:39,830
Now above the try block, let's create the data.

45
00:02:39,830 --> 00:02:41,660
So this is what we're going to be sending.

46
00:02:41,660 --> 00:02:46,310
And remember, when it comes to login, what are the two values that we want to provide?

47
00:02:46,310 --> 00:02:47,870
The email and a password?

48
00:02:47,870 --> 00:02:48,440
Correct?

49
00:02:48,440 --> 00:02:51,590
So I'll set up here an object.

50
00:02:51,590 --> 00:02:55,820
First value will be email test at test.com.

51
00:02:55,820 --> 00:03:02,030
And again, they need to match whatever you set up over here, otherwise it's not going to make sense.

52
00:03:02,150 --> 00:03:04,460
And then the second one will be password.

53
00:03:04,490 --> 00:03:11,270
Now if you're wondering how safe it is to set it up on the front end, well, keep in mind that in following

54
00:03:11,270 --> 00:03:19,670
video, we'll restrict access to this demo user so this user can view the application only so he won't

55
00:03:19,670 --> 00:03:24,740
be able to delete the job or mess with the profile or anything like that.

56
00:03:24,740 --> 00:03:28,970
So let's set up over here proper password in my case, secret.

57
00:03:29,000 --> 00:03:29,930
One, two, three.

58
00:03:29,960 --> 00:03:34,700
So I have my data in place and then we pretty much want to repeat the logic.

59
00:03:35,260 --> 00:03:40,170
So again, it's going to be custom fetch post and we'll provide data over here.

60
00:03:40,180 --> 00:03:48,580
If we're successful, we want to set up post and if there is an error, same deal we'll have post and

61
00:03:48,580 --> 00:03:49,100
error.

62
00:03:49,150 --> 00:03:51,430
Now here's the gotcha again.

63
00:03:51,430 --> 00:03:53,380
We don't want to use redirect.

64
00:03:53,410 --> 00:03:54,790
We want to use navigate.

65
00:03:54,790 --> 00:04:00,010
So in order to speed this up, let me take these lines of code again.

66
00:04:00,010 --> 00:04:02,620
Same deal custom fetch post to a login one.

67
00:04:02,620 --> 00:04:05,100
This doesn't change if we're successful.

68
00:04:05,110 --> 00:04:06,910
Maybe let's change the message.

69
00:04:07,120 --> 00:04:13,960
Let's say take a test drive or test the application, whatever you feel like it.

70
00:04:13,960 --> 00:04:20,529
And then as far as navigate, we want to invoke it and then forward slash and then dashboard.

71
00:04:20,560 --> 00:04:27,850
Now if there is an error, let's scroll up, let's select this and then let's pass it in the catch block.

72
00:04:27,880 --> 00:04:31,420
Let's save it here and then where we have the button.

73
00:04:32,050 --> 00:04:39,040
We want to set up the on click and we want to set it equal to login demo user.

74
00:04:39,100 --> 00:04:41,620
And now let's navigate to the front end.

75
00:04:41,860 --> 00:04:43,060
I'll log out.

76
00:04:43,990 --> 00:04:46,060
And then click on the login page.

77
00:04:46,060 --> 00:04:53,650
And essentially once I click on Explore the app, I'm able to access my application as the test user.