AWS Amplify React Extended

This package adds some additional functionality to the aws-amplify-react package. All documentation for the 'aws-amplify-react' package still applies to the 'aws-amplify-react-extended' package. See below for the extra features made available to you by choosing this package.

AWS Amplify Package - aws-amplify-react

AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications. The library is a declarative interface across different categories of operations in order to make common tasks easier to add into your application. The default implementation works with Amazon Web Services (AWS) resources but is designed to be open and pluggable for usage with other cloud services that wish to provide an implementation or custom backends.

aws-amplify-react is one of the AWS Amplify library packages, provide building blocks for React App development. Documentation is available here

Added Features

This package extends the functionality of the aws-amplify-react package in a few ways:

Theming and Images

See Default Theme for an example of how to style and change the images.

Additional 'withAuthenticator' options (usernameAttributes and uiFramework)

• 'usernameAttributes' specifies whether the username is a 'username' or 'email'.
• 'uiFramework' switches the default views to use Reactstrap (Bootstrap 4) or Material-UI (Material Design) components.
• 'autoSignIn' auto signs in after sign up (Default: true)

import { withAuthenticator } from 'aws-amplify-react-extended';

const autoSignIn = false;

// Default
export default withAuthenticator(App);

// Bootstrap (BS4 styles will need to be imported to your app)
export default withAuthenticator(App, false, [], null, null, null, "email", "bootstrap", autoSignIn);

// Material UI
export default withAuthenticator(App, false, [], null, null, null, "username", "material");

Sign up config (Conditionals and multi select)

Adds capability for conditional fields, helper text and multi selects during sign up.

// Custom sign up config 
const signUpConfig = {
  hideAllDefaults: true,
  signUpFields: [
      {
          label: 'Email',
          key: 'username',
          required: true,
          type: 'email',
          placeholder: 'Email',
          displayOrder: 1,
      },
      {
          label: 'Password',
          key: 'password',
          required: true,
          placeholder: 'Password',
          type: 'password',
          helperText: 'Password requirements are etc',
          displayOrder: 2,
      },
      {
          label: 'Role',
          key: 'role',
          custom: true,
          required: true,
          placeholder: 'consumer or contributor',
          displayOrder: 3,
          type: 'radio',
          options: [
              {
                  label: "I want to receive offers",
                  value: "consumer"                
              },
              {
                  label: "I want to provide great services",
                  value: "contributor",
              },                
          ]
      },
      {
          label: 'What services do you offer?',
          key: 'services',
          custom: true,
          required: false,
          conditions: {
              role: "contributor"
          },
          placeholder: '',
          displayOrder: 4,
          type: 'multi',
          options: [
              {
                  label: "Flight",
                  value: "flight"                
              },
              {
                  label: "Hotel",
                  value: "hotel",
              },
              {
                  label: "Car Hire",
                  value: "car",
              },
              {
                  label: "Transfers",
                  value: "transfers",
              },  
              {
                  label: "Activities",
                  value: "activities",
              },                  
          ]
      },
      
  ]
};

export default withAuthenticator(App, false, [], null, null, signUpConfig, "email", "material");

Link to Sign In, Sign up or Forgot Password

Use the 'action' querystring to overwrite the default auth state, for example '?action=signUp'.

Test locally

cd aws-amplify-react-extended
npm link
npm run build
cd examples/create-react-app
npm link aws-amplify-react-extended
npm link ../../node_modules/react
npm start