ReactJs Sign In Form Example Tutorial | Part 1

In this article, we will learn how to create a simple but highly reusable Sign In form in ReactJs application. Our Sign In form will have custom components for Input and Button elements.

The input fields in our Sign In form will be of a floating type having focus transitions to move label name animating to the top when user focus in the field control.

This is the first part of the tutorial, in the second part we will learn How to integrate Firebase Google Authentication and Firestore database. It will save user information after signing in using Email/ Password or Google auth to Firestore database.

let’s get started!

First, we will install the create-react-app package to create new ReactJS application.

Make sure you have the latest version of Node Js installed on your system. We will go ahead by using NPM but you can also choose Yarn package manager by the Facebook team to come over NPM bugs. Believe me, both are literally same these days as NPM now mostly bug-free.

Install create-react-app

Run following NPM command to install the create-react-app package to quickly create Reactjs applications:

$ npm install create-react-app

Create a new application by running following NPX command

$ npx create-react-app sign-in-demo

Now move to app folder by running cd command and opening the project in Visual Studio Code by executing code .

Install Routing using react-router-dom

To create a separate page for SignIn lets quickly install the react-router-dom library and configure it:

$ npm install react-router-dom

Configuration

Open the index.js to wrap the App component by BrowserRouter component so the Routing functionality will be provided to complete application:

// index.js
...
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);
...

Install node-sass

To use advanced CSS called sass, we will install the node-sass package in the application:

$ npm install node-sass

 

Before creating and adding something to the sign-in component, let's create FormInput and CustomButton functional components first which we will add in a new sign-in class component with its own state.

FormInput Component

This is a custom functional component which will create an Input field for out SignIn form.

Create a new folder component under src folder to keep reusable components. In that components folder create form-input folder with two files form-input.component.jsx and form-input.styles.scss.

Update these two files with following content:

form-input.component.jsx

// form-input.component.jsx
import React from 'react';

import './form-input.styles.scss'

const FormInput = ({ handleChange, label, ...otherProps }) => (
    <div className='group'>
        <input className='form-input' onChange={handleChange} {...otherProps} />
        {
            label ?
                (<label className={`${otherProps.value.length ? 'shrink' : ''} form-input-label`}>
                    {label}
                </label>)
                : null
        }
    </div>

)

export default FormInput;

form-input.styles.scss

$sub-color: grey;
$main-color: black;

@mixin shrinkLabel {
  top: -14px;
  font-size: 12px;
  color: $main-color;
}

.group {
  position: relative;
  margin: 45px 0;

  .form-input {
    background: none;
    background-color: white;
    color: $sub-color;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid $sub-color;
    margin: 25px 0;

    &:focus {
      outline: none;
    }

    &:focus ~ .form-input-label {
      @include shrinkLabel();
    }
  }

  input[type='password'] {
    letter-spacing: 0.3em;
  }

  .form-input-label {
    color: $sub-color;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 300ms ease all;

    &.shrink {
      @include shrinkLabel();
    }
  }
}

CustomButton Component

Now we will create CustomButton component under folder components named custom-button with two files custom-button.component.jsx and custom-button.styles.scss.

Updates these files with the following content:

custom-button.component.jsx

// custom-button.component.jsx
import React from 'react';

import './custom-button.styles.scss'

const CustomButton = ({ children, ...otherProps }) => (
    <button className='custom-button' {...otherProps}>
        {children}
    </button>
)


export default CustomButton;

custom-button.styles.scss

.custom-button {
    min-width: 165px;
    width: auto;
    letter-spacing: 0.5px;
    padding: 15px;
    font-size: 15px;
    background-color: #107200;
    color: white;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
  
    &:hover {
      background-color: white;
      color: #107200;
      border: 1px solid #107200;
    }
  }

Create Sign-In Page

As we have FormInput and CustomButton components ready let's create a new Sign-In page as a Component under pages folder. Under src folder create pages and in that folder create new component folder sign-in with two files sign-in.component.jsx and sign-in.styles.scss.

After creating it the final directory structure will look like this:

Update the code in sign-in component files as shown below:

sign-in.component.jsx

import React from 'react';

import FormInput from '../../components/form-input/form-input.component'
import CustomButton from '../../components/custom-button/custom-button.component'

import './sign-in.styles.scss'

class SignIn extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: ''
        }
    }

    handleSubmit = event => {
        event.preventDefault();

        this.setState({ email: '', password: '' });
    }

    handleChange = (event) => {
        const { value, name } = event.target;

        this.setState({ [name]: value });
    }

    render() {
        return (
            <div className='sign-in'>
                <h2>Sign In Form</h2>

                <form onSubmit={this.handleSubmit}>
                    <FormInput name='email' type='email' value={this.state.email} required handleChange={this.handleChange} label='email' />

                    <FormInput name='password' type='password' value={this.state.password} required handleChange={this.handleChange} label='password' />

                    <CustomButton type='submit'>SIGN IN</CustomButton>
                </form>

            </div>
        );
    }
}

export default SignIn;

sign-in.styles.scss

.sign-in{
  margin: auto;
  width: 30vw;
  min-width: 300px;
}

We are done! now you can run your react application by executing $ npm start command in the terminal to open your application at http://localhost:3000/

Leave a Reply

Your email address will not be published. Required fields are marked *