0
1
00:00:00,230 --> 00:00:06,270
Okay so back in the Atom IDE. We'll have
a look at this sign-in process. So what
1

2
00:00:06,270 --> 00:00:10,469
we've got to do it's going to have two
components to it here we'll have a sign
2

3
00:00:10,469 --> 00:00:17,760
in using the Cognito JavaScript SDK and
once we have done that process we will
3

4
00:00:17,760 --> 00:00:27,359
receive a JSON web token or JWT file from the Cognito identity
4

5
00:00:27,359 --> 00:00:34,559
service we can use that Cognito token or that
JWT token, we can pass it over to the
5

6
00:00:34,559 --> 00:00:42,030
AWS JavaScript SDK and that can create
federated credentials for us to access
6

7
00:00:42,030 --> 00:00:48,989
other AWS services such as Amazon s3 if
we have defined a role that allows that
7

8
00:00:48,989 --> 00:00:54,840
to happen which we have which we will be
doing now, so first of all I'll just jump
8

9
00:00:54,840 --> 00:01:04,670
into that app final and copy the sign-in
process first and put that in here
9

10
00:01:04,670 --> 00:01:11,010
okay so let's have a look at that so
first thing we need to do is we need to
10

11
00:01:11,010 --> 00:01:15,540
collect that information being the
username and password from the form on
11

12
00:01:15,540 --> 00:01:21,900
the user interface and then we need to
create a authentication details object
12

13
00:01:21,900 --> 00:01:24,689
and put that authentication data inside
of it
13

14
00:01:24,689 --> 00:01:30,869
then we need to define our user pool and
that will be the pool data which we do
14

15
00:01:30,869 --> 00:01:36,720
in a Cognito user pool object and then
we create user data which would be a
15

16
00:01:36,720 --> 00:01:45,450
combination of the user name and our
user pool and then what we also do is
16

17
00:01:45,450 --> 00:01:54,119
that we create then create a Cognito
user or a Cognito user object with that
17

18
00:01:54,119 --> 00:01:59,189
user data then once we've got all that
done and we've got all that information
18

19
00:01:59,189 --> 00:02:03,750
in that Cognito
user object we can then call
19

20
00:02:03,750 --> 00:02:09,869
authenticate user and pass the
authentication details to that now one
20

21
00:02:09,869 --> 00:02:18,100
of three things will happen
so we will get a success and everything
21

22
00:02:18,100 --> 00:02:25,300
is fine and we will receive our Jarvis
or s or our JSON web token which we can
22

23
00:02:25,300 --> 00:02:32,110
then use to pass over to the JavaScript
SDK to get our federated content tools
23

24
00:02:32,110 --> 00:02:39,210
even that doesn't occur and we get an
error it doesn't always mean that
24

25
00:02:39,210 --> 00:02:44,680
everything went wrong it might just be
something minor that is that that is not
25

26
00:02:44,680 --> 00:02:49,780
perfect that hasn't got you the full
success and giving you your your JWT
26

27
00:02:49,780 --> 00:02:55,650
token back so if you get a 200 message
back that means that you have signed in
27

28
00:02:55,650 --> 00:03:02,380
but there is some minor issue at stake
there so what you need to do is then if
28

29
00:03:02,380 --> 00:03:08,770
you get that error message of 200 then
you need to call user pool got get
29

30
00:03:08,770 --> 00:03:15,610
current user now if that's no it means
that that person is not signed in if it
30

31
00:03:15,610 --> 00:03:20,080
is then you are signed in to conk nito
successfully in that process has
31

32
00:03:20,080 --> 00:03:27,010
actually worked so then what you need to
do is to call the correct crate
32

33
00:03:27,010 --> 00:03:33,330
credentials function that we're just
about to make and we need to pass that
33

34
00:03:33,330 --> 00:03:40,680
JSON web token over to the AWS
JavaScript SDK to create those federated
34

35
00:03:40,680 --> 00:03:50,250
those federated credentials so let's now
create these Craig credentials function
35

36
00:04:01,950 --> 00:04:12,370
okay so now that we've got our JWT token
from the Cognito ID service we can now
36

37
00:04:12,370 --> 00:04:20,320
pass it over to the AWS JavaScript SDK
so we do that with AWS config dot
37

38
00:04:20,320 --> 00:04:27,150
credentials we create a new object and
we will pass that identity pool ID and
38

39
00:04:27,150 --> 00:04:35,860
then we'll pass a login information
which will be a URL there followed by
39

40
00:04:35,860 --> 00:04:42,820
our user pool i.d so what we need to do
is go back into our user pool not our ID
40

41
00:04:42,820 --> 00:04:47,230
pool our user pool click on general
settings and we'll get our pool ID up
41

42
00:04:47,230 --> 00:04:54,550
here we just copy that over and we'll
put that in there and so then all we
42

43
00:04:54,550 --> 00:05:00,190
need to do is pass with that user ID
pass our ID token which we got our JWT
43

44
00:05:00,190 --> 00:05:06,460
token and that is enough information for
AWS to create those federated
44

45
00:05:06,460 --> 00:05:11,260
credentials for us but just because
we've created this object here doesn't
45

46
00:05:11,260 --> 00:05:16,090
mean that we now have credentials
available to use we need to actually now
46

47
00:05:16,090 --> 00:05:21,750
refresh those credentials so we do AWS
config dot credentials dot refresh and
47

48
00:05:21,750 --> 00:05:26,620
if everything is fine then we'll get a
message saying we have successfully
48

49
00:05:26,620 --> 00:05:31,780
logged in or we are now signed in and
then we have credentials available for
49

50
00:05:31,780 --> 00:05:38,200
us that we can use to access other AWS
services so let's have a look at that
50

51
00:05:38,200 --> 00:05:44,770
we'll just save that now and we'll jump
back into s3 and again will apply the
51

52
00:05:44,770 --> 00:05:52,870
new fjs we'll make sure that we have
public access on that object upload that
52

53
00:05:52,870 --> 00:05:58,480
and we'll make sure that we clear our
braid our browser cache so clear all our
53

54
00:05:58,480 --> 00:06:02,860
browser data and then we can go back to
our website we can refresh that and see
54

55
00:06:02,860 --> 00:06:05,280
what happens
55

56
00:06:06,790 --> 00:06:15,110
so again we're downloading the
JavaScript SDK okay so we will sign in
56

57
00:06:15,110 --> 00:06:23,240
first and see what happens so we'll just
use we can use either our username or
57

58
00:06:23,240 --> 00:06:34,970
our email but that will be fine I'll
just use the username now I think that
58

59
00:06:34,970 --> 00:06:40,310
was the password or use or hopefully it
is I'll just click on f12 to see what's
59

60
00:06:40,310 --> 00:06:46,820
happening okay so I've got an error
message there saying incorrect username
60

61
00:06:46,820 --> 00:06:49,970
or password so I just must have used the
wrong password so I'll just try it again
61

62
00:06:49,970 --> 00:07:00,890
sign-in I'll try that okay so that one
worked okay make sure you don't forget
62

63
00:07:00,890 --> 00:07:04,370
your password like I just did then so
we've got there in the end so you are
63

64
00:07:04,370 --> 00:07:08,870
now signed in so signed in successfully
and successfully logged in so that all
64

65
00:07:08,870 --> 00:07:14,390
worked so we are now signed into the
Cognito service and we are also signed
65

66
00:07:14,390 --> 00:07:23,060
in and have federated credentials to AWS
config so what we need to do now is to
66

67
00:07:23,060 --> 00:07:31,070
implement a sign out process so it's the
out that works okay so now back in the
67

68
00:07:31,070 --> 00:07:36,110
Adam ID let's have a look at this sign
out function so again I'll just copy it
68

69
00:07:36,110 --> 00:07:40,090
over from the final
69

70
00:07:46,990 --> 00:07:51,320
okay let's have a look and see what's
going on here so the first thing we need
70

71
00:07:51,320 --> 00:07:58,250
to do is that we need to check whether
or not we actually have someone signed
71

72
00:07:58,250 --> 00:08:04,550
in on that device otherwise it doesn't
make much point in doing a sign out so
72

73
00:08:04,550 --> 00:08:08,570
first thing we can do is we can see
whether there is a valid a Cognito user
73

74
00:08:08,570 --> 00:08:13,130
that is signed in if there is that's
fine otherwise we'll just send a message
74

75
00:08:13,130 --> 00:08:19,430
and safely get out of that function now
we need to ask our user a question
75

76
00:08:19,430 --> 00:08:24,200
because there are two types of sign out
process so we can sign out locally on
76

77
00:08:24,200 --> 00:08:29,690
that device and invalidate that token
for that device or we can sign out
77

78
00:08:29,690 --> 00:08:35,599
across all devices and that will require
the Cognito service to invalidate all
78

79
00:08:35,599 --> 00:08:40,460
tokens that have been issued for that
user across all devices so there's two
79

80
00:08:40,460 --> 00:08:45,290
options there you may just want to just
sign out locally if you you know if you
80

81
00:08:45,290 --> 00:08:49,550
don't want to ask this question or you
may want to sano globally for more
81

82
00:08:49,550 --> 00:08:53,510
security for the user or whatever it's
up to you but I've just basically got
82

83
00:08:53,510 --> 00:08:57,290
the two options there for you and you
can make the decision yourself in your
83

84
00:08:57,290 --> 00:09:04,280
own applications so if you decide to or
the user decides to sign out across all
84

85
00:09:04,280 --> 00:09:09,740
devices and that will call the global
sign out function off at Cognito user
85

86
00:09:09,740 --> 00:09:19,130
and if they decide to just sign out
locally then that is the sign out now
86

87
00:09:19,130 --> 00:09:25,280
there is a callback on the global sign
out and there will be an error if
87

88
00:09:25,280 --> 00:09:29,900
there's an error there but we don't have
that that function with the normal site
88

89
00:09:29,900 --> 00:09:34,010
there's no callback function on that on
that sign out as such but with global
89

90
00:09:34,010 --> 00:09:37,370
sign out there is there will be an
unsuccessful on fire you call back there
90

91
00:09:37,370 --> 00:09:45,280
so we'll just save that and we'll upload
it again to Amazon s3
91

92
00:09:47,830 --> 00:09:52,510
and again make sure that we've got
public permissions on that object
92

93
00:09:52,510 --> 00:10:02,640
uploaded will clear our browser cache
and then we'll refresh our application
93

94
00:10:10,350 --> 00:10:14,490
okay so we'll just sign-in
94

95
00:10:24,449 --> 00:10:30,220
okay so we're successfully signed in so
let's try these sign out method okay do
95

96
00:10:30,220 --> 00:10:33,639
we want to also invalidate all user data
on all that we might as well because
96

97
00:10:33,639 --> 00:10:39,910
that seems to be the most complicated of
the options okay successfully signed out
97

98
00:10:39,910 --> 00:10:45,040
and invalidated all app records
wonderful so we are signed out has been
98

99
00:10:45,040 --> 00:10:50,019
implemented quite good now what if our
user wants to change some of the details
99

100
00:10:50,019 --> 00:10:54,779
in their profile so we'll look at the up
they'll update profile application
100

101
00:10:54,779 --> 00:11:02,620
section now okay back in the Adam IDE
again I'm just going to copy over the
101

102
00:11:02,620 --> 00:11:09,699
update profile function and put that in
there and let's have a look at it so the
102

103
00:11:09,699 --> 00:11:14,889
first thing that we need to do is make
sure that we have someone logged in if
103

104
00:11:14,889 --> 00:11:21,240
not then we safely exit the the function
so if Cognito user is null then we just
104

105
00:11:21,240 --> 00:11:26,740
send a message saying that there's no it
you know actually no one's signed in now
105

106
00:11:26,740 --> 00:11:31,449
then we actually have to get the
attributes from a form and that form
106

107
00:11:31,449 --> 00:11:35,620
will be similar to the registration form
but it'll only have the attributes on
107

108
00:11:35,620 --> 00:11:41,019
there of given name family name website
gender birth date and the custom one
108

109
00:11:41,019 --> 00:11:49,660
there for a linked in once we've got
that then we can add those to a Cognito
109

110
00:11:49,660 --> 00:11:57,579
user attribute one by one and then what
we do is we push them out to the
110

111
00:11:57,579 --> 00:12:03,189
attribute list so we create a Cognito
user attribute and then we create an
111

112
00:12:03,189 --> 00:12:08,139
array of those by pushing those through
one by one after we've created that
112

113
00:12:08,139 --> 00:12:13,120
Cognito user attribute okay
so once we've got that that attribute
113

114
00:12:13,120 --> 00:12:19,149
list then we can pass that over to
update attributes which is again a
114

115
00:12:19,149 --> 00:12:25,420
function of the Cognito JavaScript SDK
once we've done that we've got a
115

116
00:12:25,420 --> 00:12:31,329
callback and it'll either give an error
or or not and if it's successful we just
116

117
00:12:31,329 --> 00:12:35,769
do an alert how they're saying
successfully updated so we'll just save
117

118
00:12:35,769 --> 00:12:41,040
that
and we'll upload that and see how we go
118

119
00:12:45,690 --> 00:12:57,940
and again public permissions and again
we clear out our browser cache and we
119

120
00:12:57,940 --> 00:13:01,170
refresh our replication
120

121
00:13:14,040 --> 00:13:17,880
okay well sign in
121

122
00:13:33,250 --> 00:13:43,490
okay so I need okay let's update their
profile so on leave that the same maybe
122

123
00:13:43,490 --> 00:13:52,450
change the website to whatever that'll
do whatever comm that'll do
123

124
00:13:52,450 --> 00:13:58,280
okay let's update that successively
updated wonderful I'm just going to
124

125
00:13:58,280 --> 00:14:04,130
press if to open see what happened on
the console so what we got was a cool
125

126
00:14:04,130 --> 00:14:07,760
result is success
that's all that's returned from that so
126

127
00:14:07,760 --> 00:14:13,190
that's that's pretty good okay next
thing we need to do is to start using
127

128
00:14:13,190 --> 00:14:21,710
our credentials that we've got from
Cognito to start using the Cognito sync
128

129
00:14:21,710 --> 00:14:27,230
database and what that will enable us to
do is to store more information on our
129

130
00:14:27,230 --> 00:14:34,130
on our user for this application in the
form of a key and value so let's have a
130

131
00:14:34,130 --> 00:14:41,020
look at that okay before we get into
Cognito sync there's just one more
131

132
00:14:41,020 --> 00:14:45,470
function that we need to sort out with
our signup process and that is if the
132

133
00:14:45,470 --> 00:14:50,750
user has forgotten their password which
happens quite often we all know so again
133

134
00:14:50,750 --> 00:14:56,330
we'll just copy that over from the final
and put that into here let's have a look
134

135
00:14:56,330 --> 00:15:02,300
at it so what we've got is that the
first thing that happens is that we need
135

136
00:15:02,300 --> 00:15:09,230
to create a user pool with that user
pool data and we also need to get from
136

137
00:15:09,230 --> 00:15:14,630
the user their user name or email and
then we can put that in user data being
137

138
00:15:14,630 --> 00:15:20,810
the user name and the pool which is a
user pool ID so then once we've got that
138

139
00:15:20,810 --> 00:15:30,890
information we can then create a another
Cognito user object now we we don't use
139

140
00:15:30,890 --> 00:15:37,520
Cognito user well they won't be a
Cognito user as yet because this user
140

141
00:15:37,520 --> 00:15:44,310
has not signed in so we need to create a
Cognito user object using the java
141

142
00:15:44,310 --> 00:15:50,180
script SDK and then once that then we
can run the forgot password function of
142

143
00:15:50,180 --> 00:15:57,480
the Cognito user, so we will have a non
success callback or a on failure
143

144
00:15:57,480 --> 00:16:04,140
callback but optically optionally in
there we can have a input verification
144

145
00:16:04,140 --> 00:16:08,370
code callback so what that enables us to
do that not only do we start the process
145

146
00:16:08,370 --> 00:16:14,520
have forgot password where it sends out
a verification code via email we can
146

147
00:16:14,520 --> 00:16:20,670
also have it so that when this function occurs that it
147

148
00:16:20,670 --> 00:16:25,350
actually asks for that code to be
inputted in and then we can import them
148

149
00:16:25,350 --> 00:16:29,070
all the user can input that code and
then they can put in their their new
149

150
00:16:29,070 --> 00:16:33,360
password if we don't do it that way then
we need to actually have a second button
150

151
00:16:33,360 --> 00:16:37,170
there for inputting the verification
code so this is a lot cleaner that we do
151

152
00:16:37,170 --> 00:16:43,230
it all in one function and in with one
you call two to the Cognito JavaScript
152

153
00:16:43,230 --> 00:16:47,850
SDK as well so what we got there is that
the input verification code will come
153

154
00:16:47,850 --> 00:16:55,040
back with a a callback and it will will
ask for that input verification code and
154

155
00:16:55,040 --> 00:17:02,910
we will pass that over to the 
Cognito user confirm password, so if we
155

156
00:17:02,910 --> 00:17:06,720
didn't have that in here in this part of
the callback we would have to have this
156

157
00:17:06,720 --> 00:17:11,910
as a separate button where you would say
you know confirm your new password or
157

158
00:17:11,910 --> 00:17:15,780
whatever and we would call confirm
password and pass that verification code
158

159
00:17:15,780 --> 00:17:21,540
in there and along with our new password
and then again we'll have a non success
159

160
00:17:21,540 --> 00:17:27,750
callback or a failure callback, so
that's how that works it's quite a bit
160

161
00:17:27,750 --> 00:17:34,679
involved in in that but it works quite
well so we'll save that and we'll apply
161

162
00:17:34,679 --> 00:17:38,660
that again to our our bucket
162

163
00:17:42,630 --> 00:17:47,960
and again make sure that we've got
public access to that and again we will
163

164
00:17:47,960 --> 00:17:57,470
delete our browser data and then we can
refresh our website
164

165
00:18:03,620 --> 00:18:08,549
okay so we'll sign in actually no he
won't sign in because we've forgotten
165

166
00:18:08,549 --> 00:18:13,830
our password so let's click on the
forgot password link enter your username
166

167
00:18:13,830 --> 00:18:21,179
or email, So I am just going to use my
username that will be fine okay so it's
167

168
00:18:21,179 --> 00:18:24,690
asking for that verification code so
what we need to do is go to our email
168

169
00:18:24,690 --> 00:18:29,730
and put that in there so I'm just going
to grab it from my email and put in a
169

170
00:18:29,730 --> 00:18:45,059
new password that'll do ok the new
password has been confirmed, So that's
170

171
00:18:45,059 --> 00:18:53,690
done now we'll just jump back in and
start doing our synced database function