AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers.
Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service.
Notice:
Amplify@1.x.x has structural changes. For details please check Amplify Modularization.
AWS Amplify is available as aws-amplify package on npm.
Web
$ npm install aws-amplify --saveor you could install the module you want to use individually:
$ npm install @aws-amplify/auth --saveReact
If you are developing a React app, you can install an additional package aws-amplify-react containing Higher Order Components:
$ npm install aws-amplify --save
$ npm install aws-amplify-react --saveAngular
If you are developing an Angular app, you can install an additional package aws-amplify-angular. This package contains an Angular module with a provider and components:
$ npm install aws-amplify --save
$ npm install aws-amplify-angular --saveVisit our Installation Guide for Web to start building your web app.
Vue
If you are developing a Vue app, you can install an additional package aws-amplify-vue. This package contains a Vue plugin for the Amplify library along with Vue components:
$ npm install aws-amplify --save
$ npm install aws-amplify-vue --saveVisit our Installation Guide for Web to start building your Vue app.
React Native
For React Native development, install aws-amplify:
$ npm install aws-amplify --saveIf you are developing a React Native app, you can install an additional package aws-amplify-react-native containing Higher Order Components:
$ npm install aws-amplify-react-native --saveVisit our Installation Guide for React Native to start building your web app.
Somewhere in your app, preferably at the root level, configure Amplify with your resources.
Using AWS Resources
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
// or if you don't want to install all the categories
import Amplify from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';
import aws_exports from './aws-exports';
// in this way you are only importing Auth and configuring it.
Amplify.configure(aws_exports);Without AWS
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint',
},
});AWS Amplify supports many category scenarios such as Auth, Analytics, APIs and Storage as outlined in the Developer Guide. A couple of samples are below:
By default, AWS Amplify can collect user session tracking data with a few lines of code:
import Analytics from '@aws-amplify/analytics';
Analytics.record('myCustomEvent');See our Analytics Developer Guide for detailed information.
Add user sign up and sign in using two of the many methods available to the Auth class:
import Auth from '@aws-amplify/auth';
Auth.signUp({
username: 'AmandaB',
password: 'MyCoolPassword1!',
attributes: {
email: 'someemail@example.com',
},
});
Auth.signIn(username, password)
.then(success => console.log('successful sign in'))
.catch(err => console.log(err));See our Authentication Developer Guide for detailed information.
React / React Native
Adding authentication to your React or React Native app is as easy as wrapping your app's main component with our withAuthenticator higher order component. AWS Amplify will provide you customizable UI for common use cases such as user registration and login.
// For React
import { withAuthenticator } from 'aws-amplify-react';
// For React Native
import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);Angular
To add authentication to your Angular app you can also use the built-in service provider and components:
// app.component.ts
import { AmplifyService } from 'aws-amplify-angular';
...
constructor( public amplify:AmplifyService ) {
// handle auth state changes
this.amplify.authStateChange$
.subscribe(authState => {
this.authenticated = authState.state === 'signedIn';
if (!authState.user) {
this.user = null;
} else {
this.user = authState.user;
}
});
}
// app.component.html
<amplify-authenticator></amplify-authenticator>
See our Angular Guide for more details on Angular setup and usage.
AWS Amplify automatically signs your REST requests with AWS Signature Version 4 when using the API module:
import API from '@aws-amplify/api';
let apiName = 'MyApiName';
let path = '/path';
let options = {
headers: {...} // OPTIONAL
}
API.get(apiName, path, options).then(response => {
// Add your code here
});See our API Developer Guide for detailed information.
To access a GraphQL API with your app, you need to make sure to configure the endpoint URL in your app’s configuration.
// configure a custom GraphQL endpoint
Amplify.configure({
API: {
graphql_endpoint: 'https://www.example.com/my-graphql-endpoint',
},
});
// Or configure an AWS AppSync endpoint.
let myAppConfig = {
// ...
aws_appsync_graphqlEndpoint:
'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
aws_appsync_region: 'us-east-1',
aws_appsync_authenticationType: 'API_KEY',
aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
// ...
};
Amplify.configure(myAppConfig);queries
import API, { graphqlOperation } from '@aws-amplify/api';
const ListEvents = `query ListEvents {
listEvents {
items {
id
where
description
}
}
}`;
const allEvents = await API.graphql(graphqlOperation(ListEvents));mutations
import API, { graphqlOperation } from '@aws-amplify/api';
const CreateEvent = `mutation CreateEvent($name: String!, $when: String!, $where: String!, $description: String!) {
createEvent(name: $name, when: $when, where: $where, description: $description) {
id
name
where
when
description
}
}`;
const eventDetails = {
name: 'Party tonight!',
when: '8:00pm',
where: 'Ballroom',
description: 'Coming together as a team!',
};
const newEvent = await API.graphql(graphqlOperation(CreateEvent, eventDetails));subscriptions
import API, { graphqlOperation } from '@aws-amplify/api';
const SubscribeToEventComments = `subscription subscribeToComments {
subscribeToComments {
commentId
content
}
}`;
const subscription = API.graphql(
graphqlOperation(SubscribeToEventComments)
).subscribe({
next: eventData => console.log(eventData),
});See our GraphQL API Developer Guide for detailed information.
AWS Amplify provides an easy-to-use API to store and get content from public or private storage folders:
Storage.put(key, fileObj, { level: 'private' })
.then(result => console.log(result))
.catch(err => console.log(err));
// Store data with specifying its MIME type
Storage.put(key, fileObj, {
level: 'private',
contentType: 'text/plain',
})
.then(result => console.log(result))
.catch(err => console.log(err));See our Storage Developer Guide for detailed information.
Time in milleseconds to wait for GQL_CONNECTION_INIT message
Default Time in milleseconds to wait for GQL_CONNECTION_KEEP_ALIVE message
Time in milleseconds to wait for GQL_START_ACK message
This Symbol is used to reference an internal-only PubSub provider that is used for AppSync/GraphQL subscriptions in the API category.
provide an object as the in-memory cache
Converts blob to array buffer
Organizes blocks from Rekognition API to each of the categories and and structures their data accordingly.
Organizes blocks from Textract API to each of the categories and and structures their data accordingly.
Gets the closest parent element that matches the passed selector.
The element whose parents to check.
The CSS selector to match against.
True if the selector should test against the passed element itself.
The matching element or undefined.
Constructs a key value object from its children key and value blocks.
Maps block Ids to blocks.
Constructs a table object using data from its children cells.
Table block that has references (Relationships) to its cells
Maps block Ids to blocks.
Delegates the handling of events for an element matching a selector to an ancestor of the matching element.
The ancestor element to add the listener to.
The event type to listen to.
A CSS selector to match against child elements.
A function to run any time the event happens.
A configuration options object. The available options:
- useCapture
The delegate object. It contains a destroy method.
Dispatches an event on the passed element.
The DOM element to dispatch the event on.
The type of event to dispatch.
The return value of element.dispatchEvent, which will
be false if any of the event listeners called preventDefault.
Extracts text and selection from input block's children.
Block that we want to extract contents from.
Maps block Ids to blocks.
Gets all attributes of an element as a plain JavaScriot object.
The element whose attributes to get.
An object whose keys are the attribute keys and whose values are the attribute values. If no attributes exist, an empty object is returned.
return the byte size of the string
get current time
check if passed value is an integer
Changes object keys to camel case. If optional parameter keys is given, then we extract only the
keys specified in keys.
Given an array of object, call makeCamelCase(...) on each option.
Tests if a DOM elements matches any of the test DOM elements or selectors.
The DOM element to test.
A DOM element, a CSS selector, or an array of DOM elements or CSS selectors to match against.
True of any part of the test matches.
Tests whether a DOM element matches a selector. This polyfills the native Element.prototype.matches method across browsers.
The DOM element to test.
The CSS selector to test element against.
True if the selector matches.