Example GoFiber Backend with React Frontend using Sessions and CSRF

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 compose for development (see docker-compose.yml)
• React Dev Tools do not work with the proxy, fix
• Go Delve remote debugger (see launch.json) Docker: Attach to Go (Delve) config for debugging the backend in VSCode
• React debugging (see launch.json) Launch Chrome against localhost config for debugging the frontend in VSCode
• Seperate frontend and backend docker containers
• SECURE Dockerfiles (ie dont run as root etc)
• Secure handling of login credentials in the backend
• Timeouts on the frontend
• Mechanism to refresh auth status on the frontend (if auth error happens, or the user does something that changes their auth status)
• TODO: session timeout in the front end with multiple tabs open could cause the session to be extended indefinitely, fix
• Some browsers (Safari) will not offer to save passwords when using fetch and require a page load to trigger the save password dialog, fix

Development

A 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.

Production

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.

Credentials

There are two users:

• admin with password admin
• user with password user

API

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

License

MIT