Spencer FengSpencer Feng

Authentication in React Apps with JWT: Part 1

In this series, we are going to create a React app where authentication and authorisation are handled by JSON Web Tokens together.

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA.

Here are our tasks in the first tutorial of the series:

  • Set up the server by using express.js
  • Set up React
  • Enable Sass within create-react-app
  • Integrate Bootstrap

Set up the server by using express.js

Before we can install Express, we need to make sure that we have node.js installed. Please open your terminal window and type

node -v

If you see the version of node installed on your computer, it means that you have already had node.js installed. Otherwise, please head to the its official website to download and install Node.js.

We are going to install Express using Express application generator by taking following steps:

1. Install Express application generator globally, if you have not done so.

$ npm install express-generator -g

2. In your command-line tool, go to the directory where you want to place your application and type:

$ express authentication_authorisation_react_in_jwt

3. After the installation is complete, in your command-line tool, type the commands below to install dependancies:

$ cd authentication_authorisation_react_in_jwt && npm install

Now, if you can start your server by typing the following command in your command-line tool

npm start

Then, if you enter the following url in your browser, you should be able to see your server running

http://localhost:3000/

Congratulations! Your server has been successfully installed.

Set up React

We will setup React within our Express application folder, so we can manage both the server and the public-facing site in one place.

There are many ways of setting up React, but we will use the handy ‘create-react-app’ for our app. Here are the steps to take:

1. If you have not installed ‘create-react-app’ globally, please in your command-line tool, type

$ npm install -g create-react-app

2. In your command-line tool, go to the root directory of your application and type

$ create-react-app client

Now, you can check if React has been successfully set up by running the following command in your command-line tool

$ cd client && npm start

By default, our React app will be running on port 3000, but since our Express server is also running on port 3000, the command-line tool will prompt us with a question:

Would you like to run the app on another port instead? (Y/n)

Please type ‘Y’ in your command-line tool to run our React app on another port and then the React app will be started automatically in the browser.

Enable Sass within create-react-app

I love using Sass in my projects, however, the React app we just created via create-react-app does not have Sass integrated out of the box. So in the next step, we will integrate Sass into our React app.

If you do not have Sass installed on your computer, you should install it first and you can find the instructions here.

Once we have Sass installed on our computers, we will remove and add some files and folders in our React app by following the instructions below:

  1. Remove ‘client/src/index.css’
  2. Remove ‘client/src/App.css’
  3. Create a folder ‘client/src/styles/scss’
  4. Create a file ‘client/src/styles/scss/index.scss’

Then, we need to go to ‘client/src/App.js’ to remove the following line of code which imports the ‘App.css’ file which we have removed.

import './App.css';

In addition, we need to go to ‘src/index.js’ to remove the following line of code which imports the ‘App.css’ file which we have removed.

import './index.css';

Then we need to enable Sass to watch the changes in our Scss files and preprocess them automatically and save them to the ‘src/styles/css’ folder. Open the package.json file in the React app root folder and add the code below to the ‘scripts’ section.

"sass": "sass --watch src/styles/scss:src/styles/css"

Then, in our command-line tool, go to the root folder of our React app and run the command below to start Sass.

$ npm run sass

Now, if you open your ‘src/styles/scss/index.scss’ file and make some changes and then save it, you will see 2 new files are created in the ‘src/styles/css’ folder:

  • ‘client/src/styles/index.css’
  • ‘client/src/styles/index.css.map’

Now please open the ‘src/index.js’ file to add the code below to import the ‘index.css’ file to the file.

import './styles/css/index.css';

Next, we are going to integrate Bootstrap into our React app.

Integrate Bootstrap

We will the CSS grid system and some UI controls from Twitter Bootstrap in this app, so we need to integrate Twitter Bootstrap into our React app.

In your command-line tool, go to the root folder of the React app and type the command below:

$ npm install bootstrap-sass

After bootstrap-sass is installed, open ‘src/styles/scss/index.scss’ and import bootstrap-sass to the file.

@import '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

Next, we will add the Bootstrap javascript file ‘bootstrap.min.js’ to the ‘public/js/bootstrap’ directory for some Bootstrap components which need this javascript file to work. Please do remember to refer to this javascript file and jQuery which it depends on in the ‘public/index.html’ file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap/bootstrap.min.js"></script>

Lastly, we need to move the glyphicons fonts folder from Bootstrap to ‘client/src/styles’ directory, otherwise there will be compile issue.

Great, we have completed all the tasks in the first tutorial of our series. In the next tutorial, we are going to set up Redux, pages and router for our React app.

View the source code for this tutorial on GitHub.

Please sign up to our Newsletter if you want to get notified when new tutorials are available.

×