Okay so back in the Atom IDE. We'll have a look at this sign-in process. So what 1
we've got to do it's going to have two components to it here we'll have a sign 2
in using the Cognito JavaScript SDK and once we have done that process we will 3
receive a JSON web token or JWT file from the Cognito identity 4
service we can use that Cognito token or that JWT token, we can pass it over to the 5
AWS JavaScript SDK and that can create federated credentials for us to access 6
other AWS services such as Amazon s3 if we have defined a role that allows that 7
to happen which we have which we will be doing now, so first of all I'll just jump 8
into that app final and copy the sign-in process first and put that in here 9
okay so let's have a look at that so first thing we need to do is we need to 10
collect that information being the username and password from the form on 11
the user interface and then we need to create a authentication details object 12
and put that authentication data inside of it 13
then we need to define our user pool and that will be the pool data which we do 14
in a Cognito user pool object and then we create user data which would be a 15
combination of the user name and our user pool and then what we also do is 16
that we create then create a Cognito user or a Cognito user object with that 17
user data then once we've got all that done and we've got all that information 18
in that Cognito user object we can then call 19
authenticate user and pass the authentication details to that now one 20
of three things will happen so we will get a success and everything 21
is fine and we will receive our Jarvis or s or our JSON web token which we can 22
then use to pass over to the JavaScript SDK to get our federated content tools 23
even that doesn't occur and we get an error it doesn't always mean that 24
everything went wrong it might just be something minor that is that that is not 25
perfect that hasn't got you the full success and giving you your your JWT 26
token back so if you get a 200 message back that means that you have signed in 27
but there is some minor issue at stake there so what you need to do is then if 28
you get that error message of 200 then you need to call user pool got get 29
current user now if that's no it means that that person is not signed in if it 30
is then you are signed in to conk nito successfully in that process has 31
actually worked so then what you need to do is to call the correct crate 32
credentials function that we're just about to make and we need to pass that 33
JSON web token over to the AWS JavaScript SDK to create those federated 34
those federated credentials so let's now create these Craig credentials function 35
okay so now that we've got our JWT token from the Cognito ID service we can now 36
pass it over to the AWS JavaScript SDK so we do that with AWS config dot 37
credentials we create a new object and we will pass that identity pool ID and 38
then we'll pass a login information which will be a URL there followed by 39
our user pool i.d so what we need to do is go back into our user pool not our ID 40
pool our user pool click on general settings and we'll get our pool ID up 41
here we just copy that over and we'll put that in there and so then all we 42
need to do is pass with that user ID pass our ID token which we got our JWT 43
token and that is enough information for AWS to create those federated 44
credentials for us but just because we've created this object here doesn't 45
mean that we now have credentials available to use we need to actually now 46
refresh those credentials so we do AWS config dot credentials dot refresh and 47
if everything is fine then we'll get a message saying we have successfully 48
logged in or we are now signed in and then we have credentials available for 49
us that we can use to access other AWS services so let's have a look at that 50
we'll just save that now and we'll jump back into s3 and again will apply the 51
new fjs we'll make sure that we have public access on that object upload that 52
and we'll make sure that we clear our braid our browser cache so clear all our 53
browser data and then we can go back to our website we can refresh that and see 54
what happens 55
so again we're downloading the JavaScript SDK okay so we will sign in 56
first and see what happens so we'll just use we can use either our username or 57
our email but that will be fine I'll just use the username now I think that 58
was the password or use or hopefully it is I'll just click on f12 to see what's 59
happening okay so I've got an error message there saying incorrect username 60
or password so I just must have used the wrong password so I'll just try it again 61
sign-in I'll try that okay so that one worked okay make sure you don't forget 62
your password like I just did then so we've got there in the end so you are 63
now signed in so signed in successfully and successfully logged in so that all 64
worked so we are now signed into the Cognito service and we are also signed 65
in and have federated credentials to AWS config so what we need to do now is to 66
implement a sign out process so it's the out that works okay so now back in the 67
Adam ID let's have a look at this sign out function so again I'll just copy it 68
over from the final 69
okay let's have a look and see what's going on here so the first thing we need 70
to do is that we need to check whether or not we actually have someone signed 71
in on that device otherwise it doesn't make much point in doing a sign out so 72
first thing we can do is we can see whether there is a valid a Cognito user 73
that is signed in if there is that's fine otherwise we'll just send a message 74
and safely get out of that function now we need to ask our user a question 75
because there are two types of sign out process so we can sign out locally on 76
that device and invalidate that token for that device or we can sign out 77
across all devices and that will require the Cognito service to invalidate all 78
tokens that have been issued for that user across all devices so there's two 79
options there you may just want to just sign out locally if you you know if you 80
don't want to ask this question or you may want to sano globally for more 81
security for the user or whatever it's up to you but I've just basically got 82
the two options there for you and you can make the decision yourself in your 83
own applications so if you decide to or the user decides to sign out across all 84
devices and that will call the global sign out function off at Cognito user 85
and if they decide to just sign out locally then that is the sign out now 86
there is a callback on the global sign out and there will be an error if 87
there's an error there but we don't have that that function with the normal site 88
there's no callback function on that on that sign out as such but with global 89
sign out there is there will be an unsuccessful on fire you call back there 90
so we'll just save that and we'll upload it again to Amazon s3 91
and again make sure that we've got public permissions on that object 92
uploaded will clear our browser cache and then we'll refresh our application 93
okay so we'll just sign-in 94
okay so we're successfully signed in so let's try these sign out method okay do 95
we want to also invalidate all user data on all that we might as well because 96
that seems to be the most complicated of the options okay successfully signed out 97
and invalidated all app records wonderful so we are signed out has been 98
implemented quite good now what if our user wants to change some of the details 99
in their profile so we'll look at the up they'll update profile application 100
section now okay back in the Adam IDE again I'm just going to copy over the 101
update profile function and put that in there and let's have a look at it so the 102
first thing that we need to do is make sure that we have someone logged in if 103
not then we safely exit the the function so if Cognito user is null then we just 104
send a message saying that there's no it you know actually no one's signed in now 105
then we actually have to get the attributes from a form and that form 106
will be similar to the registration form but it'll only have the attributes on 107
there of given name family name website gender birth date and the custom one 108
there for a linked in once we've got that then we can add those to a Cognito 109
user attribute one by one and then what we do is we push them out to the 110
attribute list so we create a Cognito user attribute and then we create an 111
array of those by pushing those through one by one after we've created that 112
Cognito user attribute okay so once we've got that that attribute 113
list then we can pass that over to update attributes which is again a 114
function of the Cognito JavaScript SDK once we've done that we've got a 115
callback and it'll either give an error or or not and if it's successful we just 116
do an alert how they're saying successfully updated so we'll just save 117
that and we'll upload that and see how we go 118
and again public permissions and again we clear out our browser cache and we 119
refresh our replication 120
okay well sign in 121
okay so I need okay let's update their profile so on leave that the same maybe 122
change the website to whatever that'll do whatever comm that'll do 123
okay let's update that successively updated wonderful I'm just going to 124
press if to open see what happened on the console so what we got was a cool 125
result is success that's all that's returned from that so 126
that's that's pretty good okay next thing we need to do is to start using 127
our credentials that we've got from Cognito to start using the Cognito sync 128
database and what that will enable us to do is to store more information on our 129
on our user for this application in the form of a key and value so let's have a 130
look at that okay before we get into Cognito sync there's just one more 131
function that we need to sort out with our signup process and that is if the 132
user has forgotten their password which happens quite often we all know so again 133
we'll just copy that over from the final and put that into here let's have a look 134
at it so what we've got is that the first thing that happens is that we need 135
to create a user pool with that user pool data and we also need to get from 136
the user their user name or email and then we can put that in user data being 137
the user name and the pool which is a user pool ID so then once we've got that 138
information we can then create a another Cognito user object now we we don't use 139
Cognito user well they won't be a Cognito user as yet because this user 140
has not signed in so we need to create a Cognito user object using the java 141
script SDK and then once that then we can run the forgot password function of 142
the Cognito user, so we will have a non success callback or a on failure 143
callback but optically optionally in there we can have a input verification 144
code callback so what that enables us to do that not only do we start the process 145
have forgot password where it sends out a verification code via email we can 146
also have it so that when this function occurs that it 147
actually asks for that code to be inputted in and then we can import them 148
all the user can input that code and then they can put in their their new 149
password if we don't do it that way then we need to actually have a second button 150
there for inputting the verification code so this is a lot cleaner that we do 151
it all in one function and in with one you call two to the Cognito JavaScript 152
SDK as well so what we got there is that the input verification code will come 153
back with a a callback and it will will ask for that input verification code and 154
we will pass that over to the Cognito user confirm password, so if we 155
didn't have that in here in this part of the callback we would have to have this 156
as a separate button where you would say you know confirm your new password or 157
whatever and we would call confirm password and pass that verification code 158
in there and along with our new password and then again we'll have a non success 159
callback or a failure callback, so that's how that works it's quite a bit 160
involved in in that but it works quite well so we'll save that and we'll apply 161
that again to our our bucket 162
and again make sure that we've got public access to that and again we will 163
delete our browser data and then we can refresh our website 164
okay so we'll sign in actually no he won't sign in because we've forgotten 165
our password so let's click on the forgot password link enter your username 166
or email, So I am just going to use my username that will be fine okay so it's 167
asking for that verification code so what we need to do is go to our email 168
and put that in there so I'm just going to grab it from my email and put in a 169
new password that'll do ok the new password has been confirmed, So that's 170
done now we'll just jump back in and start doing our synced database function