Adding AWS Amplify to an Ember.js Application
UPDATE (9/2018): Now includes ember-cli plugin for bootstrapping your Amplify Application and the Amplify CLI,
AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based front-end workflow, and React Native for mobile developers. AWS Amplify is available Open Source on GitHub.
The default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and “pluggable” for any custom back-end or service.
The default implementation allows developers to immediately integrate AWS services like Amazon Cognito for user authentication, Amazon S3 for cloud storage and private user files. AWS Amplify also provides out-of-the-box support for Amazon API Gateway with automatic signature version 4 signing of requests as well as the ability to work with GraphQL queries.
Ember.js is a dependency injection JavaScript framework. It allows you to use handlebars templates and components along with an MVC type interface within your JavaScript application. It also has a great CLI experience for generating components, service, routes, as well as building and serving your application locally.
Typically, using the AWS JavaScript SDK, it can be difficult and complex configuring authentication, analytics, and utilizing other AWS services. The AWS Amplify CLI helps orchestrate this by automating your AWS back-end configuration with AWS CloudFormation and providing a JavaScript configuration file (aws-exports.js) to your client application for consumption.
AWS Amplify greatly simplifies the client programming when working with cloud services in JavaScript. It provides a declarative syntax and a categorical structure for interacting with cloud services.
import Amplify, { Auth, Analytics } from 'aws-amplify'
This works great in frameworks that support ECMAScript 2015 and node_modules. For frameworks that do not, web components, or plain script tags it can be challenging to include babel or similar for trans-piling to compliant browser code. In this post, i’ll describe how you can utilize AWS Amplify within an Ember.js application (which would also work for accessing when included in a <script> tag on a plain html page).
Requirements:
- Node.js LTS
- Ember.js
*this post uses 3.0 - ember-cli-amplify
- AWS Amplify CLI
*check the repository for configuration and installation instructions
Install and configure the requirements above, then bootstrap your Ember application:
$ ember new myAwsAmplifyApp
$ cd myAwsAmplifyApp
$ ember sAfter this, you should see the default Ember welcome component in your browser on http://localhost:4200. This component is installed by default and is rendered in app/templates/application.hbs. Next, we’ll configure our project with the Amplify CLI (Make sure you’ve installed and configured it based on the instructions outlined in the repository).
From within the root of your application:
$ amplify initChange the default options:
- Source code directory: app
- Build directory: dist
- Start command: ember s
- Build command: ember b
This will create an aws-exports.jsfile, placing it in your app/ directory. Once this is complete add authentication with Amazon Cognito:
$ amplify add auth
$ amplify pushWe now have authentication functionality with Amazon Cognito available for use within our Ember application and our configuration file is updated with the appropriate values.
Next, import the aws-amplify library from the node_modules folder. Ember works well with importing scripts from bower_components or files in the vendor/ folder. However, it does not easily import ES modules from the node_modules folder.
Installember-cli-amplify addon:
ember install ember-cli-amplify
Accept the defaults for all questions. You can now access AWS Amplify categories via an Ember component with dependency injection.
Generate an Ember component:
$ ember g component amplify-authenticator
Edit the app/components/amplify-authenticator.js file:
import Component from '@ember/component';
import { inject as service } from '@ember/service';export default Component.extend({
amplify:service(),
username: null,
password: null,
message: null,
error: null,
actions: {
signIn() {
const auth = this.get('amplify').Auth;
const username = this.get('username');
const password = this.get('password');
const that = this; auth.signIn(username, password)
.then((result) => {
that.set('error', null);
that.set('message', result);
})
.catch((error) => {
if (error.message) {
that.set('error', error.message);
} else {
that.set('error', error);
}
});
}
}
});
Next, edit the app/templates/components/amplify-authenticator.hbs file:
<section class="amplify-authenticator">
<h2>Amplify Ember Authenticator</h2>
<div>
{{input type="text" placeholder="Username" value=username}}
</div>
<div>
{{input type="password" placeholder="Password" value=password}}
</div>
<div>
<button onclick={{ action "signIn" }}>Sign In</button>
</div>{{#if message}}
<div class="amplify-message">
{{message}}
</div>
{{/if}}{{#if error}}
<div class="amplify-error">
{{error}}
</div>
{{/if}}
{{yield}}</section>
Add some style, edit the app/styles/app.cssfile:
* {
font-family: Arial;
}.amplify-authenticator {
padding: 1em;
}.amplify-authenticator input {
margin: 0.5em;
padding: 0.5em;
}.amplify-authenticator button {
margin: 0.5em;
padding: 0.5em;
}.amplify-message {
margin: 0.5em;
padding: 0.5em;
color: green;
}.amplify-error {
margin: 0.5em;
padding: 0.5em;
color: red;
}
Finally, generate a route:
$ ember g route login
This will generate a /login HTTP route and a handlebars template view file.
Edit the templates/application.hbs file and remove the welcome-page component. The file should now only contain:
{{outlet}}Edit the app/templates/login.hbs file:
{{outlet}}
{{amplify-authenticator}}Serve the app and visit the login page:
$ ember s
Change the address bar to point to /login and you should see the login form:
Open the developer inspector in your browser and switch to the network tab. You should also see network requests in your inspector that retrieve anonymous guest credentials from AWS. You should also see Analytics requests to Amazon Pinpoint for your session:
If you try to login you should see error messages from Amazon Cognito for example, “User does not exist”. You can add a user to your Amazon Cognito User Pool then you should be able to login with that user from this form. You can also now build a Sign Up form the same way and create users and utilize all the features of AWS Amplify within your Ember service. You can also enable more AWS services from the CLI. Visit the AWS Amplify documentation to see how you can utilize other categories within your Ember app.
Next Steps:
- Add a Sign Up form with MFA
- Initialize configuration in an initializer
- Check a signed in users session with an initializer
- Populate services in an instance-initializer
- Build and Deploy to Amazon S3 with the AWS Mobile CLI
