React Authentication Sample
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
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"
}