aws-amplify/amplify-js


A declarative JavaScript library for application development using cloud services.

https://aws-amplify.github.io/

License: Apache-2.0

Language: TypeScript

Keywords: amazon-cognito, analytics, aws, aws-apigateway, aws-cognito, aws-mobile, aws-mobilehub, aws-s3, cloud-service, cognito, javascript, metrics, mobile-analytics, pinpoint, pwa, react, react-native, storage


AWS Amplify

Gitter Chat build:started

AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications.

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.

Features / APIs

  • Authentication: APIs and building blocks for developers who want to create user authentication experiences.
  • Analytics: Easily collect analytics data for your app. Analytics data includes user sessions and other custom events that you want to track in your app.
  • API: Provides a simple solution when making HTTP requests. It provides an automatic, lightweight signing process which complies with AWS Signature Version 4.
  • GraphQL Client: Interact with your GraphQL server or AWS AppSync API with an easy-to-use & configured GraphQL client.
  • Storage: Provides a simple mechanism for managing user content for your app in public, protected or private storage buckets.
  • Push Notifications: Allows you to integrate push notifications in your app with Amazon Pinpoint targeting and campaign management support.
  • Interactions: Create conversational bots powered by deep learning technologies..
  • PubSub: Provides connectivity with cloud-based message-oriented middleware.
  • Internationalization: A lightweight internationalization solution.
  • Cache: Provides a generic LRU cache for JavaScript developers to store data with priority and expiration settings.

Visit our Web Site to learn more about AWS Amplify.

Installation

AWS Amplify is available as aws-amplify package on npm

Web

$ npm install aws-amplify --save

or you could install the module you want to use individually:

$ npm install @aws-amplify/auth --save

React

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 --save

Angular

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 --save

Visit 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 --save

Visit our Installation Guide for Web to start building your Vue app.

React Native

For React Native development, install aws-amplify

$ npm install aws-amplify --save

If 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 --save

Visit our Installation Guide for React Native to start building your web app.

Configuration

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 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'
  }
});

Examples

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:

1. Collect user session metrics

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.

2. Add Authentication to your App

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.

3. Sign HTTP requests

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.

4. GraphQL API Operations

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.

5. Upload and Download public or private content

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.

Project Statistics

Sourcerank 18
Repository Size 117 MB
Stars 6,161
Forks 1,099
Watchers 167
Open issues 537
Dependencies 4,946
Contributors 168
Tags 3,856
Created
Last updated
Last pushed

Top Contributors See all

Zhuo wen Michael Labieniec Dustin Noyes Jordan Ranz Richard Zhang Murat Bahar elorzafe Manuel Iglesias Rich Buggy Nidhi Sharma Kaustav Ghosh Richard Threlkeld seang96 Iurii Kucherov Sam Martinez yuntuowang tommypraeger Yathi raj Ryan Martin UnleashedMind

Packages Referencing this Repo

warpfox-aws-amplify
<img src="https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png" alt="AWS Amplify" ...
Latest release 0.1.30 - Published - 6.16K stars
aws-amplify-monorepo-test-chanaka
<img src="https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png" alt="AWS Amplify" ...
Latest release 0.1.30 - Published - 6.16K stars
@lonespear/aws-amplify-monorepo
<img src="https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png" alt="AWS Amplify" ...
Latest release 0.1.31 - Updated - 6.16K stars
@aws-amplify/datastore
AppSyncLocal support for aws-amplify
Latest release 1.0.2 - Updated - 6.16K stars
@warpfox/aws-amplify-monorepo
<img src="https://s3.amazonaws.com/aws-mobile-hub-images/aws-amplify-logo.png" alt="AWS Amplify" ...
Latest release 0.1.30 - Published - 6.16K stars
aws-amplify-ch
AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled app...
Latest release 1.2.2 - Published - 6.16K stars
@moixa-energy/core
Core category of aws-amplify
Latest release 1.0.23-unstable.3 - Updated - 6.16K stars
@moixa-energy/xr
XR category of aws-amplify
Latest release 0.1.13-unstable.0 - Published - 6.16K stars
@moixa-energy/pushnotification
Push notifications category of aws-amplify
Latest release 1.0.23-unstable.0 - Published - 6.16K stars
amazon-cognito-identity-js-with-node-fetch
Amazon Cognito Identity Provider JavaScript SDK
Latest release 3.0.13 - Updated - 6.16K stars
hackathon-aws-amplify-react
AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled app...
Latest release 1.1.1 - Updated - 6.16K stars
@moixa-energy/storage
Storage category of aws-amplify
Latest release 1.0.26-unstable.0 - Published - 6.16K stars
@moixa-energy/cache
Cache category of aws-amplify
Latest release 1.0.23-unstable.0 - Published - 6.16K stars
@stephankaag/aws-amplify-react
AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled app...
Latest release 2.3.12 - Published - 6.16K stars
amazon-cognito-identity-js-with-node-fetch-with-node-fetch
Amazon Cognito Identity Provider JavaScript SDK
Latest release 3.0.13 - Published - 6.16K stars
@moixa-energy/auth
Auth category of aws-amplify
Latest release 1.2.16-unstable.3 - Published - 6.16K stars
@moixa-energy/aws-amplify
AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled app...
Latest release 1.1.20-unstable.7 - Updated - 6.16K stars
aws-amplify-react-jz
AWS Amplify is a JavaScript library for Frontend and mobile developers building cloud-enabled app...
Latest release 2.4.4 - Updated - 6.16K stars
@moixa-energy/pubsub
Pubsub category of aws-amplify
Latest release 1.0.23-unstable.0 - Published - 6.16K stars
@moixa-energy/interactions
Interactions category of aws-amplify
Latest release 1.0.26-unstable.0 - Published - 6.16K stars

Recent Tags See all

@aws-amplify/datastore@1.0.2 December 04, 2019
@aws-amplify/xr@1.1.1 December 03, 2019
aws-amplify-vue@1.1.1 December 03, 2019
@aws-amplify/storage@2.1.1 December 03, 2019
aws-amplify-react@3.1.1 December 03, 2019
@aws-amplify/pushnotification@2.1.1 December 03, 2019
@aws-amplify/pubsub@2.1.1 December 03, 2019
@aws-amplify/predictions@2.1.1 December 03, 2019
@aws-amplify/interactions@2.1.1 December 03, 2019
@aws-amplify/datastore@1.0.1 December 03, 2019
@aws-amplify/core@2.2.0 December 03, 2019
@aws-amplify/cache@2.1.1 December 03, 2019
@aws-amplify/auth@2.1.1 December 03, 2019
@aws-amplify/api@2.1.1 December 03, 2019
aws-amplify-angular@4.1.1 December 03, 2019

Something wrong with this page? Make a suggestion

Last synced: 2019-05-14 15:45:14 UTC

Login to resync this repository