React Authentication Sample

in Projects on App, React, Rust, Rest api, Integration testing, Docker

React-Auth-Backend CI React-Auth-Frontend CI Docker Integration Tests

Quality Gate Status Code Smells Bugs

Small sample project with React frontend and a simple Rust backend.

Repo: React-Auth-Sample

Goals of this project

  • Write a Rust API with Actix.rs
  • Write Rust Tests for the API
  • Create a simple React app in TypeScript that has a Sign In / Register and Sign out
  • Write React tests with Jest
  • Use integration tests Cypress
  • Use Docker to perform local integration tests
  • Use GitHub Actions to automate testing

Running the sample

It is several ways to run this project.

Using Docker

Simple commands:

$ docker-compose up

Then open your favorite browser to react-auth-sample

Manual

To do this version, you will have to have rust build tools and yarn installed.

react-auth-backend $ cargo run

react-auth-frontend $ yarn install
react-auth-frontend $ yarn start

Then open your favorite browser to react-auth-sample

Running Integration Tests

To run the interactive integration tests in Cypress do the following:

$ docker-compose -d up
$ cd e2e/
$ yarn install
$ export "CYPRESS_baseUrl=http://localhost/"
$ ./nodes_modules/.bin/cypress open

To run the integration tests via docker:

$ docker-compose -f docker-compose.test.yml up --exit-code-from cypress

Example video Integration test video

Documentation

Backend

The backend has three endpoints:

  • POST /api/auth/register - register an account in the system
  • POST /api/auth/login - log in the registered user
  • GET /api/accounts/ - view all accounts on the system

The last endpoint is just there for making it easier to debug, being able to show all registered users in the system.

The backend only stores the users in memory and will discard them if the service is restarted.

An account is consisting of a user’s name, email, and password. The password is hashed with Argon2 and stored in the service. The hash should be stored in a DB, but that is out of scope for this service.

When a user is logging in, the user supplies its email and password and will get a JSON Web Token generated that is stored in the React app (Frontend) so the user is authenticated, this token gets discarded when the user is logging out.

CORS has been configured in the Actix Web Framwork for Rust. It is configured to allow all headers, origins, and methods. Not recommended, but will suffice for our test environment here.

There is no option to delete users.

Register

Takes in a JSON message constructed like this:

{
   "name": "yourname",
   "email": "email@email.ee",
   "password":"yoursecretpassword"
}

Example:

$ curl http://localhost:8080/api/auth/register \\
   -H "Content-type:application/json" \\
   -d "{ \"name\":\"yourname\", \"email\":\"email@mail.ee\", 
   \"password\": \"password\" }"

Returns this to you

{
   "name":"yourname",
   "email":"email@mail.ee"
}

It is not good pratice to return the password hash.

Login

Takes in a JSON message constructed like this:

{
   "email": "email@email.ee",
   "password":"password"
}

Example:

$ curl http://localhost:8080/api/auth/login \\
   -H "Content-type:application/json" \\
   -d "{ \"email\":\"email@mail.ee\", \"password\": \"password\" }"

That returns this content to you:

{  
   "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJlbWFpbEBtYWlsLmVlIiwiZXhwIjoxNjE3NDgyMzQ0fQ.PCrcAFXyQPM42wY82KaDnhMyp85AUg-LpEqJiqOL7aD28au84o53pUTImkR3m4GSLjDUGdyFpTokZPwOJ30tZw"
}

Resources