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</pre>
Create a new application by running following NPX command
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">$ npx create-react-app sign-in-demo</pre>
Now move to app folder by running <code>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</pre>
<strong>Configuration</strong>

Open the <strong>index.js</strong> to wrap the App component by <code>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</pre>
 

Before creating and adding something to the sign-in component, let's create <code>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;
</pre>
<strong>form-input.styles.scss</strong>
<pre class="lang:sass decode:true">$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();
}
}
}
</pre>
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:

<strong>custom-button.component.jsx</strong>
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// 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;</pre>
<strong>custom-button.styles.scss</strong>
<pre class="lang:sass decode:true ">.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;
}
}
</pre>
<h3>Create Sign-In Page</h3>
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 <strong>pages</strong> and in that folder create new component folder <strong>sign-in</strong> with two files <strong>sign-in.component.jsx</strong> and <strong>sign-in.styles.scss</strong>.

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

<img class="alignnone wp-image-3743 size-full" src="https://www.freakyjolly.com/wp-content/uploads/2020/04/Pasted-into-ReactJs-Sign-In-Form-Example-Tutorial-Part-1-1.png" />

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

<strong>sign-in.component.jsx</strong>
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">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;</pre>
<strong>sign-in.styles.scss</strong>
<pre class="lang:sass decode:true ">.sign-in{
margin: auto;
width: 30vw;
min-width: 300px;
}</pre>
We are done! now you can run your react application by executing <code>$ npm start

command in the terminal to open your application at http://localhost:3000/

Leave a Comment

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