Destroying Backends with Serverless — Introduction, and Authentication

5 min readFeb 10, 2019

Part 1 of 3: Introduction and Authentication. This is the first part of a three-part series for integrating Amplify into your application with Authentication. This part also includes a short bonus step to add hosting with Amplify.

What is the goal here?

The word ‘serverless’ has a mean ring to it. When developers hear it, they cringe, knowing that no production application can be truly serverless. Well, that’s the name that hype gave it. ‘It’ refers to the fact that we use no backend language writing serverless applications. Not node, not Java, not .Net! Well, not quite true, considering the fact that Cloud Functions (Lambda) can use all of those, plus Python, Go and so on.

What I’m trying to do with this article series, is shoot myself in the foot. Burn bridges with our fellow backend developers. Start a war. Or just set up for discussion of a topic coming in hot in the future life of developers. We simply can’t overlook this architecture, providing easy available, feature rich, easy maintained and cheap development process.

I’m going to do something widely unpopular here. I’m going to talk about destroying backends. And a fair warning, you might actually enjoy this.

Technology

I have worked my fair share with AWS and Serverless solutions. Both with clients and with my hobby projects. That is Firebase, Google Cloud, AWS and now… AWS Amplify! I’ve been using the Javascript node package AWS Amplify for every hobby project lately which needed a backend.

This almost seems like a hidden trick to create apps which are very quick in both developer time-spent, and app performance. It provides secured AWS servers (as long as you follow best practices for key-pair management). It also gives you cutting edge technology.

Get up and running

Installing and using Amplify is not hard if you have some experience with Javascript libraries. To make things even easier, the documentation is very good for all well-used frameworks (Vanilla JS, React, React Native, Vue, Angular). The following guide is taken directly from the AWS Amplify docs

The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage the AWS cloud services for your app.

Install Node.js® and npm if they are not already on your machine.
Register for the Free-Tier AWS: https://aws.amazon.com/console/

Verify that you are running at least Node.js version 8.x or greater and npm version 5.x or greater by running node -v and npm -v in a terminal/console window.

Install and configure the Amplify CLI.

npm install -g @aws-amplify/cli
amplify configure

Configuring includes setting up an IAM user with credentials etc. Luckily, this is all very easy through the CLI, which guides you through everything and opens the correct links in your default browser.

Also, fair warning for Windows users: It is recommended to use the Windows Subsystem for Linux. In my experience, issues with windows terminals have been fixed in the last 6 months, so there’s really no need.

Keep in mind, Amplify has some learning curve, understanding how AWS Services builds together, but it is very straight forward to create the application infrastructure with the Amplify CLI.

Authentication with AWS Cognito

In my examples, I’ll use React and the Amplify docs for React, which takes advantage of the amplify-react library. Start by entering your application, which can e.g. be a new React project

npx create-react-app my-project
cd my-project
amplify init

The application has been initiated with Amplify, and now have a new folder amplify/. Every time you add a new Amplify feature it is added here with all AWS config.

You also have a new file my-project/src/aws-exports.js with the credentials to connect the frontend client with Amplify.

Also, make sure package.json has included aws-amplify and aws-amplify-react (or your chosen framework, packages are found in the respective api docs under framwork support). If these packages are not automatically installed, npm i aws-amplify aws-amplify-react.

Add Auth in the /amplify folder

In your terminal of choice, go to the root of the project where you did amplify init. Run

amplify add auth

and run default in most of the configurations. If you want to do something else than defaults, I recommend reading the docs for Authentication.

Add Authentication to your application

This is a complete designed login page wrapper including registration and verification. It wraps your application. The following image is straight from the documentation:

Notice that we import the aws-exports.js and set it up with Amplify.configure(awsmobile); This file is automatically updated each time you update, publish or push your application.

If you’ve checked out the documentation, you might start to notice how few steps are required to get to the final goal, which is a full featured Auth system. To add your local Amplify changes, run amplify push.

To exclude phone number in the registration process, replace

with

export default withAuthenticator(App, {
  signUpConfig: {
    hiddenDefaults: ["phone_number"],
  },
});

Bonus

Adding web hosting to your application is this easy. In the terminal, from root, run these lines:

amplify add hosting
amplify publish

This creates an S3 bucket with an open URL for your web application and returns a URL for you to use. It can also be set up with a custom domain name using AWS Route 53 or CloudFront.

Developer Experience has never been better

If you want to customize these things, you can. Follow the doc step-by-step to learn many more features: https://aws-amplify.github.io/docs/js/react

Notice all the pre-made components made by the Amplify team, e.g. the S3 image upload etc. There’s tons of potential here made for your client applications!

I’ll provide 2 more articles in this series, showing you the absolutely easiest way to add GraphQL to your application. GraphCool, Prisma and other services can’t compete with this. Join me in my next article “Destroying Backends with Serverless — AppSync GraphQL API”.