This repository is an example for creating an Actix Web API that is consumed by a Vue single page application.
Specifically, this demonstrates how to create a token authentication system with Actix that allows for both mobile apps and SPA apps to easily authenticate and use the same APIs. This implementation also provides a way to easily see all devices that are currently logged in for the user, and invalidate a token before it expires which is not trivial when using JWT tokens.
This repo also demonstrates one way to securely store authentication tokens in a web application. Using the local storage to store tokens so they do not get lost on page refresh can be a security vulnerability, so it is recommended that these tokens be stored on a http-only cookie so they cannot be accessed by a malicious script.
The implementation used is inspired by Laravel Sanctum.
This is certainly not a requirement, but just to demonstrate that if you wish to have the authentication token stored on a http-only cookie, the API and the SPA need to be running on the same domain, though they can exist on different sub-domains.
Add the following lines to your /etc/hosts
file:
127.0.0.1 api.my-app.test
127.0.0.1 web.my-app.test
Example files have been provided, you can run the following command to copy them into the necessary files Modify these files as you see fit.
cp .env.example .env && cp web/.env.example web/.env
To run the application in development mode you can simply run:
cargo run
Though, if you would like to compile the application for release, run the following command:
cargo build --release && ./target/release/rcs
Serve the Vue app by running the following command:
cd web && npm run dev
Once you have completed all the above steps, you can now open your browser to http://web.my-app.test:3000 to be able to interact with the application.
The Actix server also implements authentication using Actix Identity (cookie auth). You will see some commented out code in the Vue app where it is making requests to a different login endpoint. This is certainly a viable solution to setting up authentication with the API, though cannot be easily used by mobile applications, and does not provide the same ability to easily see all logged in devices and revoke their access.