How to setup customize Amplify Authentication UI using Hooks?

AWS Amplify is a development platform for building secure, scalable mobile and web applications. Thanks to AWS Amplify which has saved a good amount of time who wanted to do development at our fingertips, it has provided the environment and automated the process in the background, so we are able to setup AWS services easily.

In this article, we’ll learn about -
1. How can we kick off the project using amplify?
2. How can we add auth amplify?
3. How can we push the changes to AWS services?
4. How can we show auth in UI?
5. How can we make own custom auth UI?

Prerequisites —

Follow these steps if your machine is not having any of these -

i) Install Node.js® and npm.

ii) Install Amplify CLI -

yarn add -g @aws-amplify/cli or npm install -g @aws-amplify/cli

iii) Sign up for an AWS account.

iv) Configure AWS CLI.

v) Install create-react-app

yarn add -g create-react-app or npm install -g create-react-app

Create a new project using create-react-app

create-react-app amplify-auth-project

The project has been created successfully.

1. How can we kick off the project using amplify?

cd amplify-auth-project
amplify init

and then answer all questions in a similar way -

After following these steps then your project has been successfully initialized and connected to the cloud and your console will look like this -

2. How can we add auth using amplify?

After initialization of the project, for adding auth to our project we need to run -

amplify add auth

Adding auth this will ask some questions -

Make changes in App.js -

import React from 'react';
import './App.css';
function App() {
   return (
      <div className="App">
        <h1>Welcome to auth app</h1>
      </div>
   );
}
export default App;

Run the application using this command -

yarn start

3. How can we push the changes to AWS services?

We now have the authentication module configured for our application. But, we still need to deploy this configuration to our AWS account. Lucky for us, this is handled by the Amplify CLI as well.

amplify push

4. How can we show auth in UI?

Still, our application is open and not behind the Authentication. So for doing this, we need to add these two libraries -

yarn add aws-amplify aws-amplify-react
or
npm install aws-amplify aws-amplify-react

Our new App.js looks like —

import React from 'react';
import Amplify from "aws-amplify";
import { withAuthenticator } from "aws-amplify-react";
import Bootstrap from "./theme";
import './App.css';
import config from "./aws-exports";
Amplify.configure(config);
function App() {
    return (
       <div className="App">
          <h1>Welcome to auth app</h1>
       </div>
    );
}
export default withAuthenticator(App, {
  theme: Bootstrap
});

Our Sign up page looks like —

If we wanted to use the same username either phone_no or email. Then we need to add one more property -

export default withAuthenticator(App, {
   theme: Bootstrap,
   usernameAttributes: 'email'
});

And we wanted to hide any fields from sign up, then we have to use signupconfig property in withAuthenticator -

export default withAuthenticator(App, {
   theme: Bootstrap,
   usernameAttributes: 'email',
   signUpConfig: {     
      hiddenDefaults: ["phone_number"]
   }
});

We can add other fields also on signup page, using signupfields property -

export default withAuthenticator(App, {
         theme: Bootstrap,
         usernameAttributes: 'email',
         signUpConfig: {
            hiddenDefaults: ["phone_number"],
            signUpFields: [{ key: 'name', label: 'Name',required: true }]
}
});

5. How can we make own custom auth UI?

Make changes in App.js part —

import React from 'react';
import Amplify from "aws-amplify";
import {Authenticator} from "aws-amplify-react";
import CustomSignIn from "./signIn";
import config from "./aws-exports";
Amplify.configure(config);
const App = () => {
     return (
       <div className="App">
          <Authenticator hide={[SignIn]} amplifyConfig={config}>
            <CustomSignIn />
            <h1>Welcome to auth app</h1>
          </Authenticator>
       </div>
     )
}
export default App;

signIn.js file is having the custom-sign-in detail -

import React, { useState } from "react";
import {Auth} from 'aws-amplify';
const CustomSignIn = (props) => {
      const {authState, onStateChange} = props;
      const [formData, setFormData] = useState({
            username: '',
            password: '',
            code: ''
});
const handleInputChange = e => {
   const {value, dataset} = e.target;
   const {prop} = dataset;
   setFormData({
      ...formData,
     [prop]: value
  });
};
const signInClick = async () => {
      try{
         await Auth.signIn(formData.username, formData.password);
         onStateChange(authState);
      }
     catch(error){
        console.log(error);
     }
}
return (
  <div> 
    <form>
       <div>
         <label htmlFor="username"> Username</label>
         <input data-prop={'username'} onChange={handleInputChange} type="text" placeholder="Username"/>
      </div>
     <div>
        <label htmlFor="password">Password</label>
        <input data-prop={'password'} onChange={handleInputChange} type="password" placeholder="******************"/>
        <p> Forgot your password?{" "}<a onClick={() => onStateChange("forgotPassword")}>Reset Password</a></p>
    </div>
    <div>
      <button type="button" onClick={() => signInClick()}>Login</button>
      <p> No Account?{" "}<a onClick={() => onStateChange("signUp")}> Create account</a></p>
   </div>
  </form>
</div>
);
}
export default CustomSignIn;

This is just an example, how can initiate custom-sign-in UI. There are a lot of changes required to make it work end to end. All click events should be there for signUp, forgotPassword and many more. You should check out this for the overall implementation — https://aws-amplify.github.io/amplify-js/api/classes/authclass.html.

Conclusion

AWS Amplify Authentication has saved a good amount of time who wanted to do development at our fingertips, it has provided the environment and automated the process in the background, so we are able to setup AWS services easily. Please check out the GitHub repository for this project.

Hope you find the article useful.