(upbeat music)
- Hello.
I'm Elton, a support engineer here at AWS in Cape town.
Sometimes customers ask me,
"How do I configure Cognito's hosted UI,
and also why is Cognito not returning the tokens?"
I tell them they need to check their configuration.
Let me walk you through how to properly set up
Cognito's hosted UI.
After login into the AWS management console,
navigate to the Cognito console.
Choose Manage User Pools.
Select the user pool
you want to configure the hosted UI for.
On the left hand side,
select domain name on the navigation pane.
Choose a name for user pool domain
and then select check availability.
Save changes if the domain is available.
If the domain is not available,
try to find another name for your domain.
On the left navigation pane,
select App client settings.
On Enabled Identity Providers, check Cognito User Pool.
On Callback URLs,
provide the your URL where you want
your users to be redirected to.
Ideally, this URL points your website.
On Sign out URLs,
provide the URL where your users
will be redirected to when they sign out.
For Oauth 2 flows, you can mark both.
I'll explain how these work.
Authorization code grant.
With this flow, when users authenticate,
they get only an authorization code.
This code can then be used to request for the ID,
access and refresh tokens.
We advise our customers to use this flow,
because it's considered secure.
To get the tokens back,
you can make a request to Cognito's token endpoint.
That request must include authorization code grant.
The implicit grant.
This flow returns only the ID and the access tokens,
but you don't get the refresh token back.
This means that if the session of the user expires,
which occurs after an hour,
the user must authenticate again.
For the purpose of this tutorial,
we'll be enabling both flows for our user pool.
Under Allowed OAuth Scopes,
select all the auth scopes that one could need
to add in the tokens when the user authenticates.
When you're done, choose Save changes.
We've completed the configuration.
Now, if you want, you can also customize your UI,
but we'll not be focusing on that in this video.
We'll construct the URL to access our hosted UI
so that we can log in.
I've constructed two URLs.
The first one
will be using the authorization code grant flow
and the second one
will be using the implicit grant flow.
If you have a look at the URL,
the first part is the domain name
that we created for our user pool.
Since Cognito host the UI for us,
we created the domain associated with our user pool
which allows us to log in and access the hosted UI.
This then is followed by an endpoint,
which is the login endpoint,
accompanied by a couple of parameters,
such as the response time, client ID
and the redirect url.
For response type for the authorization code grant flow,
we'll be using the word code.
For the implicit grant flow,
we'll be using the word token for the response type.
I'll be logging in to show the differences between the two.
Since we're using the authorization code grant,
Cognito returns the authorization code.
This is a website I've built and included some logic
to extract authorization code and the access tokens.
The reason why we didn't have anything for the tokens
is because we're using the authorization code
and not the implicit grant flow.
I'll be logging in again,
but this time I'll be using the implicit grant
to show how it differs from the authorization code grant.
Now I'm back at the hosted UI.
We'll be logging in using the implicit grant.
So, Cognito return the ID and access tokens.
I've also included some logic in my website
to decode the tokens.
If you can have a look at the the auth code,
we don't have any value there.
That's because we're using the implicit grant
and not the authorization code grant.
Thanks for watching
and happy cloud computing from all of us here at AWS.
(upbeat music)