Amplify Framework simplifies configuration for OAuth flows and the hosted UI

Written by Kurt Kemple, Sr. Developer Advocate & Gerard Sans, Sr. Developer Advocate

The Amplify Framework is an open-source project for building cloud-enabled applications. Today, we’re happy to announce new features in the authentication, storage, and API categories. It’s now possible to configure OAuth 2.0 authorization flows and enable the Amazon Cognito hosted UI from the Amplify command line interface (CLI) (part of the Amplify Framework). Previously, you had to go to the Amazon Cognito console to set this up and construct the proper application configurations manually in the web or mobile application.

In addition, the Amplify Framework now supports setting up fine-grained CRUD-style permissions for the storage and API (REST) categories. This works for both authenticated and unauthenticated workflows.

Setting up the hosted UI and OAuth from the Amplify CLI

In this release of Amplify, you can now set up the Amazon Cognito hosted UI and OAuth from the Amplify CLI. This enables you to use Amazon Cognito user pools to set up federation between various identity providers (such as Amazon, Google, and Facebook) from the Amplify CLI. You use OAuth flows for the federation—either through the hosted UI or your application code, by using the endpoints directly.

Let’s look at setting up OAuth for Facebook in a React app. The first step is to create a new project.

Setting up the project

We will be using npx to create the React application. To learn more about npx, click here.

Use the following command to create a new React app project:

npx create-react-app my-project

Next you need to set up Amplify:

cd my-project
amplify init
npm i aws-amplify aws-amplify-react

Setting up OAuth with Facebook

After Amplify is set up, the next step is to create a Facebook app to enable authentication. For instructions on how to set up a Facebook app, see Adding Social Identity Providers to a User Pool.

Adding the authentication category with the Amplify CLI

Now that you have a Facebook app, it’s time to add authentication to your app with the Amplify CLI. Make sure to enter the values in the snippet below.

amplify add auth

// Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
// How do you want end users to be able to sign up? Username
// What attributes are required for signing up? Email
// What domain name prefix you want us to create for you? <enter-a-unique-domain>
// Enter your redirect signin URI: http://localhost:3000/
// Do you want to add another redirect signin URI? No
// Enter your redirect signout URI: http://localhost:3000/
// Do you want to add another redirect signout URI? No
// Select the identity providers you want to configure for your user pool: Facebook
// Enter your Facebook App ID: <facebook_app_id>
// Enter your Facebook App Secret: <facebook_app_secret>

After the command completes, you need to run amplify push to create your Amazon Cognito user pool and get your endpoints for your hosted UI. You get the domain URL from the output of the “amplify push” command.

You need the endpoints to finish configuring your Facebook app.

To finish setting up your Facebook app go back to the documentation linked in the “Setting Up OAuth With Facebook” section and follow the steps for adding your app domain. You get the domain URL from the output of the amplify push command.

Add OAuth to React

The next step is to configure Amplify and the authentication category in your app. Update src/App.js with the following:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Amplify from "aws-amplify";
import { withOAuth } from "aws-amplify-react";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <button onClick={this.props.OAuthSignIn}>
            Sign in with Facebook
          </button>
        </header>
      </div>
    );
  }
}

export default withOAuth(App);

The withOAuth higher-order component (HOC) provides the property OAuthSignIn that takes the user to the hosted UI for authenticating. If you don’t want to use the HOC and instead want to handle sending users to the hosted UI, see the instructions in Launching the Hosted UI.

Try it out!

After you’ve updated App.js, it’s time to run the app and test the login. You should see a screen like the following when you choose the Sign in with Facebook button.

We hope you like these new features! As always, let us know how we’re doing, and submit any requests in the Amplify Framework GitHub Repository. You can read more about AWS Amplify on the AWS Amplify website.