React Auth Sample

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

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

WARNING: This authentication flow is called implicit flow in OAuth2.0 world and is not recommended to use.

Recommended flow is Autorization Code Grant Flow.

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

Documentation

Backend

The backend has three endpoints:

• POST /api/auth/register - register an account in the system
• POST /api/auth/login - log in the registerd 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 registerd 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 users name, email and password. The password is hashed with Argon2 and stored in the service. The hash should be stores in a DB, but that is out of scope for this service.

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

CORS has been configured in the Actix Web Framwork for Rust. It's 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

• End-to-End Testing Web Apps: The Painless Way
• mtlynch/hello-world-cypress
• Cypress.io
• Rust
• Rust Book
• Actix Web Framwork
• Docker
• Docker Crash Course