Example of a GoFiber backend with a React frontend that uses sessions and CSRF protection
This is an example of a GoFiber backend with a React frontend that uses sessions and CSRF tokens.
Inspired by https://redis.com/blog/json-web-tokens-jwt-are-dangerous-for-user-sessions/ and developer questions about such a use case on the GoFiber discord server.
It uses an nginx reverse proxy to serve the frontend and backend on the same port. The backend is served on /api
and the frontend is served on /
.
This example is not complete and therefore should not be used in production.
It still needs the following:
Docker: Attach to Go (Delve)
config for debugging the backend in VSCodeLaunch Chrome against localhost
config for debugging the frontend in VSCodeA docker-compose file is provided for development. It will start the backend, frontend and a redis cache.
docker-compose up
The server will be available at http://localhost:8080.
To support web socket based hot reloading of the frontend, Ngix is configured to proxy_pass /ws
requests to the frontend container.
Note: React Dev Tools require ENV WDS_SOCKET_PORT
to be set to 8080
to work with the proxy, (see react-app/Dockerfile.dev).
The backend will be restarted when changes are made to the backend code using air.
Go delve remote debugger will be available at http://localhost:2345 (see launch.json) Docker: Attach to Go (Delve)
config for debugging the backend in VSCode.
docker build -t gofiber-react-session-csrf-example .
docker run -p 8080:8080 gofiber-react-example
The server will be available at http://localhost:8080.
There are two users:
admin
with password admin
user
with password user
POST /api/auth/login
request:
{
"username": "admin",
"password": "admin"
}
response:
{
"loggedIn": true,
"username": "admin",
"roles": ["admin", "user"],
"sessionTimeout": 3600 // seconds
}
POST /api/auth/logout
request:
{}
response:
{
"loggedIn": false,
}
GET /api/auth/status
response:
{
"loggedIn": true,
"username": "admin",
"roles": ["admin", "user"],
"sessionTimeout": 3600 // seconds
}
GET /api/thingamabob
response:
{
[
{
"id": 1,
"name": "Thingamabob 1"
},
{
"id": 2,
"name": "Thingamabob 2"
}
]
}
POST /api/thingamabob
request:
{
"name": "Thingamabob 3"
}
response:
{
"id": 3,
"name": "Thingamabob 3"
}
GET /api/thingamabob/:id
response:
{
"id": 1,
"name": "Thingamabob 1"
}
PUT /api/thingamabob/:id
request:
{
"name": "Thingamabob 1 Updated"
}
response:
{
"id": 1,
"name": "Thingamabob 1 Updated"
}
DELETE /api/thingamabob/:id
response:
204 No Content
MIT