Build a Web Authentication System with a Custom UI

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pop-up Loft
Build a Web Authentication System with a Custom UI
Speaker Name,
Speaker Title

Scenario: Web Authentication
We’ve got people interested in
our product, thanks to an
awesome email campaign. We
need to quickly capture these
people and get them to sign up
to the service!
Giddy Up!

User Identity from A to Z
An Introduction to Amazon Cognito

Identity: Mission Critical for Mobile
Authentication User ManagementAuthorization
§ Manage user lifecycles
§ Store and manage user
profile data
§ Monitor engagement
§ Protect data and
operations
§ Provide fine-grained
access control
§ Sign in users
§ Federation:
§ Enterprise
§ Social
User Identity

Amazon Cognito User Pools
Add user sign-up and sign-
in easily to your mobile and
web apps without worrying
about server infrastructure
Serverless Authentication
and User Management
1
Launch a simple, secure,
low-cost, and fully managed
service to create and
maintain a user directory
that scales to 100s of
millions of users
2
Managed User Directory
Verify phone numbers and
email addresses and offer
multi-factor authentication
Enhanced Security
Features
3

Comprehensive User Flows
Email or Phone Number
Verification
Forgot Password
User Sign-Up and Sign-In
Require users to verify their email address or phone number prior to activating their
account with a one-time password challenge
Provide users the ability to change their password when they forget it with a one-time
password challenge
Allow users to sign up and sign in using an email, phone number, or username (and
password) for your application.
User Profile Data Enable users to view and update their profile data – including custom attributes
SMS Multifactor
Authentication
Require users to complete a second factor of authentication by inputting a security
code received via SMS as part of the sign-in flow
Token Based
Authentication
Use JSON Web Tokens (JWTs) based on OpenID Connect (OIDC) and OAuth 2.0
standards for user authentication in your backend

Extensive Administration Capabilities
Define Custom Attributes
Set per-app Permissions
Set up Password Policies
Create and manage
User Pools
Define custom attributes for your user profiles
Set read and write permissions for each user attribute on a per-app basis
Enforce password policies like minimum length and requirement of certain types
of characters
Create, configure, and delete multiple user pools across AWS regions
Require Submission of
Attribute Data
Select which attributes must be provided by the user prior to completion of the
sign-up process
Search Users
Search users based on a full match or a prefix match of their attributes through
the console or Admin API
Manage Users
Conduct admin actions, such as reset user password, confirm user, enable MFA,
delete user, and global sign-out

Integrate with your mobile app
• AWS Amplify library integrates
with Amazon Cognito.
• Full support for sign-in, sign-up
and forgot-password with MFA
and/or TOTP.
• Pre-built components for React
and React Native
• Build your own UI
AWS Amplify

Amazon Cognito User Pools as an IdP
• Can be used standalone or
with federation
• Supports OpenID Connect
and Oauth 2.0 tokens
• Send token to your backend
to access resources
Username
Password
Sign In
Cognito User
Pool
Backend
resources
Authenticate with a user
pool via our SDK or
hosted UI (beta)
Access backend
resources
1
2
3

Business to Consumer with Cognito Federation
Sign in with
Facebook
Or
Username
Password
Sign In
FB Token
Cognito User
Pool
Exchange user tokens
for AWS credentials tied
to an IAM role
Cognito
Identity Pool
CUP/FB
Token
Authenticate with a user
pool via our SDK
DynamoDB
S3
API GW
Access backend
resources
1b
1a
23
CUP
Token
• Federation allows mix-
and-match providers:
• Social
• Enterprise
• Cognito User Pools
• Identity Pool provides
AWS credentials to
backend services

Workshop: Integrating Web Authentication

What we are going to do:
1. Update the mobile backend for user authentication
v Sign In with multi-factor authentication
v Sign Up with email address confirmation
v Self-service password reset
2. Integrate a custom UI for sign up and sign in
v The UI screens have been provided for us by the design agency

Update the backend
> awsmobile user-signin enable
• Default Configuration: 8 characters, complex passwords, MFA enabled
• Edit the configuration before publication
• awsmobilejs/backend/mobile-hub-project.yml
> awsmobile push
You cannot change the configuration of
Amazon Cognito with the awsmobile CLI after
you have published the backend
! !

Write the code: src/auth/SignUp.js
import { Auth } from ‘aws-amplify’;
async onSubmitForm(e) {
e.preventDefault();
try {
const params = {
username: this.state.email.replace(/[@.]/g, '|'),
password: this.state.password,
attributes: {
email: this.state.email,
phone_number: this.state.phone
},
validationData: []
};
const data = await Auth.signUp(params);
console.log(data);
this.setState({ stage: 1 });
} catch (err) {
alert(err.message);
console.error("Exception from Auth.signUp: ", err);
this.setState({ stage: 0, email: '', password: '', confirm: '' });
}
}
Username is required and cannot
look like an email address if you
are using email as a sign-in field
CODE IS IN THE README

Write the code: src/auth/SignUp.js
async onSubmitVerification(e) {
e.preventDefault();
try {
const data = await Auth.confirmSignUp(
this.state.email.replace(/[@.]/g, '|'),
this.state.code
);
console.log(data);
// Go to the sign in page
this.props.history.replace('/signin');
} catch (err) {
alert('Invalid Response from server');
console.error("Exception from Auth.confirmSignUp: ", err);
this.setStatate({ stage: 0, email: '', password: '', confirm: '', code: '' });
}
}
Uses the same transformation to
get the username as before

Write the code: src/auth/SignIn.js
import { Auth } from ‘aws-amplify’;
async onSubmitForm(e) {
e.preventDefault();
try {
const userObject = await Auth.signIn(
this.state.email.replace(/[@.]/g, '|'),
this.state.password
);
console.log('userObject = ', userObject);
this.setState({ userObject, stage: 1 });
} catch (err) {
alert(err.message);
console.error('Auth.signIn(): ', err);
}
}

Write the code: src/auth/SignIn.js
async onSubmitVerification(e) {
e.preventDefault();
try {
const data = await Auth.confirmSignIn(
this.state.userObject,
this.state.code
);
console.log('data = ', data);
this.setState({ stage: 0, email: '', password: '', code: '' });
this.props.history.replace('/app');
} catch (err) {
alert(err.message);
console.error('Auth.confirmSignIn(): ', err);
}
}

Write the code: src/index.js
const isAuthenticated = () => Amplify.Auth.user != null;
• Run app locally using ‘awsmobile run’
– Sign up for an account using Menu -> Apply
– Sign in afterwards to get the “MainApp” page
– Check the Developer Console for output associated with sign-in

Publish the front end code
> awsmobile publish –c –f -n
• -c – refresh the Cloud Front distributions
• -t – run tests on mobile devices in AWS Device Farm
• -n – don’t run tests on mobile devices in AWS Device Farm
• -f – only publish the front end. Don’t publish the backend.
• Check the code
– Click Giddy Up!, sign in and get the main app page.

Pop-up Loft
aws.amazon.com/mobile
@AWSforMobile
Everything you need to connect
Your mobile app to the cloud

Build a Web Authentication System with a Custom UI

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Build a Web Authentication System with a Custom UI

Semelhante a Build a Web Authentication System with a Custom UI (20)

Mais de Amazon Web Services

Mais de Amazon Web Services (20)

Build a Web Authentication System with a Custom UI