Build a Simple Login System — React — Frontend

In this blog, I will go over the steps to create the frontend to build a single login system using React.

  1. Create a folder where you want the project to be created and run ‘npx create-react-app frontend’. If npx is not working it means that you have an old version of node so make sure you have a new version of both node and npm.
  2. Install dependencies: run ‘npm install mobx — save’ and ‘npm install mobs-react — save’
  3. Update ‘package.json’ on line 5 adding a ‘homepage’ and set it to root to let React know where the homepage is served from as follow:
Adding homepage ‘root’ to ‘package.json’

4. Update ‘App.js’ by setting it as a class base component. Since it is a class base component, it will need a render method that will for now return ‘Hello World’ to make sure that the page is displaying in the browser when you run ‘npm start’ :

Class base component App

5. In your directory, create a new folder named ‘store’ that will contain all the mobx stores. Create a new file named ‘UserStore.js’, import ‘extendObservable’ from ‘mobx’ that will contain our properties for the store. ‘extendObservable’ will take as a first argument this to refer to the class instance, and will also take some data like booleans ‘loading’ and ‘isLoggedIn’ as well as an username set up to an empty string. Finally, export this component using ‘new’ that will create a new instance of the class :

UserStore Component

6. Create a few class base components, ‘LoginForm.js’, ‘InputField.js’, ‘SubmitButton.js’ and import them in ‘App.js’.

7. In ‘App.js’, we are going to be writing the API calls that we are going to need in this component (we don’t have an API yet, it will be created later but we are going to define the methods and the calls to the API). First write an ‘ComponentDidMount’ function that will be an asynchronous method. First we are going to fetch an API point that we will call ‘isLoggedIn’ that will be created later. This will take a method of ‘post’ and two headers ‘Content-Type’ and ‘Accept’ that will only accept ‘application/json’. This will gives us a result and if the result is successful, we will update the loading status to ‘false’, isLoggedIn will now be true and the result will give us an username. If it isn’t successful, loading will be also false but this time we won’t have isLoggedIn set to true neither an username. Lastly, we use a catch error handling method so that if an error is returned from the API we can catch the error.

Async method on the ComponentDidMount function

8. Copy and paste to create a doLogout function which be asynchronous as well. This time the request will go to an endpoint called ‘/logout’:

Async method on the doLogout function

9. In App.js, update the render method:

  • If the app is loading, it will display a message like ‘Loading, please wait…’
  • If a user is logged in, it will display a message like ‘Welcome ‘username’’ and a button to Logout. We define some props in the ‘SubmitButton’ component like ‘text: logout’, ‘disabled: false’ and ‘onClick’ which will be a callback function to call the ‘doLogout’ function. By setting props here, it allows us to set values dynamically and reuse anywhere we need it’.
  • If the user is not logged in, it will return a log in form.

Lastly, import an ‘observer’ from ‘mobx-react’ that will wrap the App component so that will make this component listen for changes in the UserStore. If you refresh the page now, you should see a quick ‘Loading status’ before the page renders.

render method in App.js

10. Update your components:

  • SubmitButton: Using html, pass in the props defined in the parent component. (see screenshots below)
  • InputField: This will a className, type, value, placeholder and onChange callback function (see screenshots below)
  • LoginForm: Import SubmitButton, InputField and UserStore to this component. This component will have a constructor that will take ‘super(props)’ and will have a state (username and password set to an empty string and a boolean buttonDisabled set to false). This component will also have 2 methods. First one is called ‘setInputValue’ that will take 2 arguments (property and val (for value)). We use trim for the value because it will be a string and we don’t want any spaces and we set the value to 12 characters maximum and set the state to the value. Second one is called resetForm that will reset the form is something goes wrong. Finally we define an async function like we did in App.js. (see screenshots below)
SubmitButton Component
InputField Component
constructor and methods in LoginForm.js
async doLogin in LoginForm.js
render method in LoginForm.js

11. Finally update the css like so:

body, html, #root, .app, .container {width: 100%;height: 100%;}.container {font-size: 28px;color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: #282c34;}.loginForm {box-sizing: border-box;width: 100%;max-width: 400px;padding-left: 20px;padding-right: 20px;}.inputField {padding-top: 16px;}.input {box-sizing: border-box;outline: none;border: solid 2px #1189de;border-radius: 4px;color: #292929;width: 100%;padding: 12px;font-size: 14px;background: rgba(255, 255, 255, 1);}.submitButton {padding-top: 16px;}.btn {width: 100%;min-width: 280px;color: #565656;padding: 12px;font-size: 14px;font-weight: bold;border: solid 2px #1189de;border-radius: 4px;background: #fff;cursor: pointer;}

Conclusion

You should now see the login form displaying in the browser. On a next blog, I will go over the steps to create a backend API in order to have a database with username.

French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.