1
00:00:02,120 --> 00:00:07,130
Let's start with managing the loading state here on the auth screen because obviously I want to give

2
00:00:07,130 --> 00:00:10,570
the user some feedback when we're currently waiting for a response.

3
00:00:10,670 --> 00:00:17,060
For this, we can import the activity indicator which you already know and manage the loading state here

4
00:00:17,810 --> 00:00:26,990
by adding another state here, isLoading and set isLoading which we initialize to false because initially

5
00:00:26,990 --> 00:00:36,470
we aren't loading and now here when we are in this auth handler, I can add async here because of course

6
00:00:37,370 --> 00:00:39,860
sign up here returns a promise, the same for login,

7
00:00:39,920 --> 00:00:46,040
so these actions creator functions return promises. So we can await for the result of dispatch which

8
00:00:46,070 --> 00:00:52,820
ultimately uses these promises which we get and basically kicks off this entire process

9
00:00:52,820 --> 00:00:56,890
and before we await this, I can set isLoading to true,

10
00:00:56,900 --> 00:01:02,720
so when we start this whole process, before we sent a request and thereafter set isLoading to false

11
00:01:02,840 --> 00:01:06,480
once we're done with this request, no matter if it failed or not.

12
00:01:07,720 --> 00:01:10,320
And now isLoading can be used to display a loading spinner,

13
00:01:10,330 --> 00:01:15,760
it's up to you where you display this, for example you could say that you want to replace this sign up

14
00:01:15,760 --> 00:01:17,890
button with the loading spinner.

15
00:01:17,890 --> 00:01:21,420
So here we could say if isLoading is true,

16
00:01:21,490 --> 00:01:25,010
I want to show the activity indicator like that,

17
00:01:25,090 --> 00:01:27,520
otherwise I'll show the button,

18
00:01:27,520 --> 00:01:29,590
so this is the syntax we could use,

19
00:01:29,590 --> 00:01:38,510
set the size here to small and the color to Colors.primary let's say. Now if we give

20
00:01:38,510 --> 00:01:47,660
that a try and we go back, here on iOS if I try logging in, indeed I see the loading spinner and then

21
00:01:47,900 --> 00:01:48,410
I'm back,

22
00:01:48,410 --> 00:01:54,800
so that works, now for the error handling. For the error handling, you also learn how that works.

23
00:01:54,830 --> 00:01:58,900
You can of course manage your error state here as well,

24
00:01:58,940 --> 00:02:05,180
you could again also use use reducer to merge loading and error state into one object but I'll do

25
00:02:05,180 --> 00:02:06,250
it like this,

26
00:02:06,470 --> 00:02:11,540
error and set error with the help of use state which initially doesn't assign a value so that this is

27
00:02:11,570 --> 00:02:22,010
undefined initially and then here, we can wrap try catch around this dispatching here where we get a

28
00:02:22,010 --> 00:02:27,140
potential error and set our error to this

29
00:02:27,140 --> 00:02:34,640
error message we're getting back and before we send the request, I also want to set my error back

30
00:02:34,640 --> 00:02:41,420
to null. So now we're storing a potential error here in set error

31
00:02:41,610 --> 00:02:45,620
and I just want to throw an alert, show an alert to the user if we get an error.

32
00:02:45,630 --> 00:02:52,110
So for this you need to make sure that you import alert from React Native and also use effect from react

33
00:02:52,110 --> 00:02:58,860
because use effect allows us react to changes in the error state and show the error alert if we have

34
00:02:58,860 --> 00:03:09,340
an error. So maybe here after setting up the reducer, we can add use effect and my dependency here is

35
00:03:09,340 --> 00:03:14,620
the error state variable or constant and if we have an error,

36
00:03:14,620 --> 00:03:23,190
so if this is true-ish, then I want to show an alert with the alert API where I say an error occurred

37
00:03:23,910 --> 00:03:29,580
and my message is the error which should be a string and I will add a button where I have a text of

38
00:03:29,940 --> 00:03:34,840
OK and of course you could add more buttons where you do different things.

39
00:03:34,930 --> 00:03:41,950
Now we can simulate this in the action creator by going there and for logging in, let's say we remove

40
00:03:42,370 --> 00:03:49,350
that D here, so that this is an incorrect URL in the end. If we now try logging in here,

41
00:03:52,500 --> 00:03:54,790
I get this error.

42
00:03:54,810 --> 00:03:55,340
Now that's good

43
00:03:55,350 --> 00:04:01,920
but there also are other kind of errors which I want to handle, for example what if I login with an

44
00:04:01,920 --> 00:04:08,930
e-mail address that doesn't exist? Of course I want to show an error to the user too and I do but

45
00:04:08,930 --> 00:04:15,670
I only show something went wrong which is not exactly the error I would like to show.

46
00:04:15,700 --> 00:04:21,850
Now I'm showing this error because in the action creator here, if the response is not OK, I throw something

47
00:04:21,850 --> 00:04:22,690
went wrong.

48
00:04:22,690 --> 00:04:27,910
Now the problem is when we send an incorrect e-mail or an incorrect password, also by the way for signing

49
00:04:27,910 --> 00:04:35,410
up if we send something which isn't an email or a password which is too short, if that happens, then

50
00:04:35,410 --> 00:04:42,890
we'll get back a response with a status code of 400 something and we get some error details as part

51
00:04:42,890 --> 00:04:43,750
of the response

52
00:04:43,760 --> 00:04:46,490
and right now with our error handling, we don't see those,

53
00:04:46,740 --> 00:04:50,590
so we need to change this. Instead of immediately throwing an error here

54
00:04:50,600 --> 00:04:53,730
if the response is not okay, I still want to look into it.

55
00:04:53,870 --> 00:04:57,980
So I will have my error response data which I get by awaiting for response

56
00:04:57,980 --> 00:05:06,230
JSON here. So I do the same as in the success case but I extract it into a different field and now

57
00:05:06,250 --> 00:05:09,550
here I want to console log the error response data

58
00:05:09,580 --> 00:05:12,710
so that we get a feeling for how this looks like.

59
00:05:12,720 --> 00:05:20,680
So now let's try entering an e-mail address which doesn't exist again and now we get our strange error

60
00:05:20,680 --> 00:05:25,600
which you just saw but now we have this interesting output here and you see this is the error object

61
00:05:25,600 --> 00:05:26,870
Firebase returned to me

62
00:05:26,920 --> 00:05:30,130
and of course it depends on the API you're talking to,

63
00:05:30,130 --> 00:05:35,560
which kind of error you're getting and when you're getting it and what details it includes. This as you

64
00:05:35,560 --> 00:05:43,060
see is an object which has an error key which is yet another object which has an error code, some details

65
00:05:43,060 --> 00:05:48,490
about the errors and then this message which is for example email not found and that's the part I'm

66
00:05:48,490 --> 00:05:53,060
interested. In the official docs by the way, you'll find more potential error identifiers

67
00:05:53,080 --> 00:05:55,860
you could be getting. So in the end,

68
00:05:55,890 --> 00:06:04,800
that's what I want to check now. I want to get my error ID let's say from the error response data by

69
00:06:04,800 --> 00:06:11,160
accessing the error field there which is this field which gives me access to this object which then

70
00:06:11,160 --> 00:06:12,580
has this message field.

71
00:06:12,720 --> 00:06:19,470
So therefore here, I then access message to get this message and now we can check this, we can check if

72
00:06:20,040 --> 00:06:27,260
error ID is equal to email not found. If that's the case, I want to set my own customized message,

73
00:06:27,270 --> 00:06:33,090
so here I'll add a variable message which is just something went wrong by default

74
00:06:33,300 --> 00:06:38,580
but then here if we know the problem is that we didn't find an e-mail address, we could say this email

75
00:06:38,610 --> 00:06:44,550
could not be found and I'll add more if checks in a second.

76
00:06:44,550 --> 00:06:49,650
So this is something I want to check here and in the end therefore, I have a message which I now want

77
00:06:49,650 --> 00:06:50,100
to throw,

78
00:06:50,130 --> 00:06:55,860
so now I will throw a new error with my own customized message though. So another check

79
00:06:55,860 --> 00:07:03,890
I want to add with an else/if statement here is whether the error ID is for signing in invalid password

80
00:07:03,890 --> 00:07:15,050
let's say. So I can check for that and set the message equal to this password is not valid and now let's

81
00:07:15,050 --> 00:07:16,480
give this another try.

82
00:07:16,580 --> 00:07:23,240
Let's go back and enter an e-mail address which doesn't exist, quick login and we get this e-mail address

83
00:07:23,250 --> 00:07:26,210
could not be found or this e-mail could not be found.

84
00:07:26,430 --> 00:07:35,030
Now let's try a valid e-mail address but actually a password which is invalid, like this and we get this

85
00:07:35,030 --> 00:07:36,550
password is not valid,

86
00:07:36,590 --> 00:07:39,370
so now we give the user a better feedback.

87
00:07:39,410 --> 00:07:46,880
Now let's implement the same for signing up, so I'll copy that and go to my sign up case here and there

88
00:07:46,880 --> 00:07:49,310
I just have different error codes, there

89
00:07:49,310 --> 00:07:52,130
I have codes like email exists,

90
00:07:52,130 --> 00:07:54,270
if that e-mail address exists already.

91
00:07:54,560 --> 00:08:02,370
So I extract my error ID in the same way but then I check for email exists and if this is the error, I say this email

92
00:08:03,300 --> 00:08:04,740
exists already.

93
00:08:08,000 --> 00:08:09,710
Now this is actually the only thing I want to check here,

94
00:08:09,710 --> 00:08:15,830
there are other errors too which you could get and you can for example simply turn off your validation

95
00:08:15,830 --> 00:08:20,860
here and see which error you're getting if you're sending an invalid e-mail address by logging that error

96
00:08:20,870 --> 00:08:22,950
ID and then you can check for that too,

97
00:08:22,960 --> 00:08:28,850
here I'll just implement this message and therefore now if I try signing up here with an e-mail address

98
00:08:28,850 --> 00:08:37,070
which I already did use, like this, I get this e-mail exists already. On the other hand if I use a valid

99
00:08:37,100 --> 00:08:44,250
e-mail address of course, this just goes through and on Firebase then indeed, if you go to authentication

100
00:08:44,250 --> 00:08:47,530
and refresh this, you will see that second user.

101
00:08:47,580 --> 00:08:52,040
So this is how you can add a loading spinner and error handling with authentication.

102
00:08:52,080 --> 00:08:57,420
That's all nice but now it would finally be nice to also leave that screen and go to our app and then

103
00:08:57,420 --> 00:08:59,670
start working with that token which we're getting.