How to use Amazon Cognito user pools with custom UI and also OIDC Kenichiro Kimura [AWS Community Builders] [JAWS-UG Fukuoka]

Who am I Name: Kenichiro Kimura Country: Japan / Fukuoka Occupation: Technical Architect Company: Alterbooth,INC Award: - AWS APJ Community Leaders Award 2023 - AWS Samurai 2019 Community: - JAWS-UG Fukuoka(organizer) - AWS Community Builders @show_m001 kenichirou.kimura 2

Conclusion -You can use OIDC endpoint for Amazon Cognito user pools with custom UI, by using AWS Amplify Identity broker -There are some limitations: - Missing functions need to be developed by yourself - Cannot use fully OIDC functions -If you want to use custom UI and OIDC at the same time in Cognito user pools, please try it. 3

What is Cognito user pools? An Amazon Cognito user pool is a user directory for web and mobile app authentication and authorization. From the perspective of your app, an Amazon Cognito user pool is an OpenID Connect (OIDC) identity provider (IdP). (https://docs.aws.amazon.com/en_us/cognito/latest/developerguide/cognito-user-identity-pools.html) 4

OIDC Authorization flow with Cognito user pools 5 GET /oauth2/authorize?redirect_uri={redirect_uri}.. Location: /login?redirect_uri={redirect_uri}… GET /login?redirect_uri={redirect_uri}… (hosted UI Page) (Sign in) Location: {redirect_uri}?id_token=eyXXXXX

About hosted UI What is hosted UI? -UI prepared in Cognito User pools for flows such as sign- in and sign-up. -You can customize hosted UI, but limited looks only - Upload logo image - Use custom css 6

Customize login flow(sign-up/sign-in...) To customize your login flow(sign-up/sign-in/forgot password/reset-password…), - Develop UI using Cognito SDK - Cognito user pools’ OIDC endpoints are not available What should we do to use OIDC endpoints with custom UI ? - Develop your own OIDC endpoints? 7

AWS Amplify Identity Broker A code sample provided as an illustration of how to achieve and identity broker and SSO on top of Amazon Cognito by awslabs. https://github.com/awslabs/aws-amplify-identity-broker/ 8

Features -Login flows: sign-in, sign-up, forgot password, reset- password -Is a standard OIDC Identity Provider -PKCE and Implicit Oauth2 flows -100% UI customizable(React + Amplify JS) -I18n -Federations: Social login, SAML, OIDC 9

Architecture 10

OIDC Authorization flow with Identity Broker(1) 11 GET /oauth2/authorize?redirect_uri={redirect_uri}.. Location: /?redirect_uri={redirect_uri}… GET /?redirect_uri={redirect_uri}… (React UI Page) (Sign in) Tokens or code Check session API Call POST /storage Location: {redirect_uri}?id_token=eyXXXXX

OIDC Authorization flow with Identity Broker(2) 12 GET /oauth2/authorize?redirect_uri={redirect_uri}.. Location: https://server/?redirect_uri={redirect_uri}… GET /some-uri?redirect_uri={redirect_uri}… (Original UI Page) (Sign in) Tokens or code Check session API Call Redirect with Tokens or code Location: {redirect_uri}?id_token=eyXXXXX POST /storage

Features which not implemented -Authorization endpoint - HTTP POST - scope parameter - response_type(only id_token and code, currently) - Other OPITONAL features - display, prompt, id_token_hint,… -Token endpoint - http response header(Cache-control: no-store) 13

Limitation You can’t use nonce parameter -Nonce is OPTIONAL function in oidc documents - But it is REQUIRED if you use implicit flow -Nonce must be in id token signed by idp - Only idp can manipulates id token -Cognito API does not allow the providing of a nonce - Hosted UI can provide a nonce - Use PKCE flow instead of implicit flow 14

Conclusion -You can use OIDC endpoint for Amazon Cognito user pools with custom UI, by using AWS Amplify Identity broker. -There are some limitations: - Missing functions need to be developed by yourself - Cannot use fully OIDC functions, such as nonce parameter -Limited Support by AWS -If you want to use custom UI and OIDC at the same time in Cognito user pools, please try it out. 15

Thank you! Thank you for your attention 16