Network Error and AxiosError 403 When getting Transactions

[acciptris]

Hi,

Thank you for creating this project.

I am trying to setup yaffa on a VPS through docker container. I was able to install it, but I am not able to add a transaction because accounts are not showing up even though I have added an account. Also some buttons on the UI are not responsive. On the dashboard, I am getting an error saying "There was an error while getting account data: Network Error".

On the transactions page, I get this error which has a little more information: "Error getting transactions: AxiosError: Request failed with status code 403".

Following are the configurations file that I am using:

docker-compose.yaml

services:
  app:
    image: kantorge/yaffa:latest
    container_name: yaffa_app
    hostname: app
    ports:
      - "8438:80"
    env_file:
      - .env
    volumes:
      - yaffa_app_logs:/var/www/html/storage/logs
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - yaffa-network
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: mysql/mysql-server:8.0
    container_name: yaffa_db
    hostname: db
    ports:
      - "8439:3306"
    environment:
      MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
      MYSQL_ROOT_HOST: '%'
      MYSQL_DATABASE: '${DB_DATABASE}'
      MYSQL_USER: '${DB_USERNAME}'
      MYSQL_PASSWORD: '${DB_PASSWORD}'
    volumes:
      - yaffa_db:/var/lib/mysql
    restart: unless-stopped
    networks:
      - yaffa-network
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "${DB_USERNAME}", "-p${DB_PASSWORD}"]
      interval: 30s
      timeout: 10s
      retries: 3

  mailhog:
    image: mailhog/mailhog
    ports:
      - "8440:1025" # SMTP server
      - "8441:8025" # Web UI
    container_name: yaffa_mailhog
    networks:
      - yaffa-network

  scheduler:
    image: kantorge/yaffa:latest
    container_name: yaffa_scheduler
    command: php artisan schedule:work
    env_file:
      - .env
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - yaffa-network
volumes:
  yaffa_app_logs:
  yaffa_db:

networks:
  yaffa-network:
    driver: bridge

.env

# This file is a "template" of which env vars need to be defined for your application.
# Copy this file as .env in the project root folder, and replace the values with your own settings.
# This version contains all possible variables required to run your own YAFFA instance.
# These are grouped into sections, especially highlighting the most important, fundamental ones.

###############################
### Basic app configuration ###
###############################

# Encryption key used to encrypt session and other data
# You can use the "php artisan key:generate" command to generate a random key, which will overwrite this value
# Make sure to keep this key secret, and don't share it with anyone.
# Also, don't change it after you have started using the application.
APP_KEY=<32characters>

### Database configuration ###
DB_CONNECTION=mysql
# Use localhost or 127.0.0.1 for the host, if the database is running on the same server as the application
# DB_HOST=127.0.0.1
# Use the name of the database service, if the database is running in a Docker container. This is 'db' in the default Docker setup of YAFFA.
DB_HOST=db
DB_PORT=3306
DB_DATABASE=yaffa_db
DB_USERNAME=yaffa_db_user
DB_PASSWORD=<password>
DB_SOCKET=

### Application behavior and settings ###

# The maximum number of users that can be registered in the system.
# For a personal instance, you can set this to 1 to prevent other people from registering.
# Increase this value if you want to allow other users to register, or set it to empty to allow unlimited registrations.
REGISTERED_USER_LIMIT=1

# Do new users have to verify their email address before they can log in?
# For a local, personal instance, without access to outgoing emails, this should be set to false.
# For a public instance, this should probably be set to true, but you need to configure the email settings below according to your server setup.
EMAIL_VERIFICATION_REQUIRED=FALSE

# The email address of the administrator of the system, who will receive notifications about new users, logins, etc.
# Leave this empty if you don't want to receive any notifications
ADMIN_EMAIL=

### Define the configuration for sending emails ###
# This is needed if you want your users to verify their email addresses,
# or if you want to receive notifications about new users, etc.
MAIL_MAILER=log
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=null
[email protected]
MAIL_FROM_NAME=YAFFA

# The URL of the application, used for generating links in emails
# This URL is independent of the actual URL used to access the application, which you can configure in the web server
APP_URL=<https public URL>

#############################
### Advanced app features ###
#############################

### Configuration of external services ###
# Your key for the Alpha Vantage API, which is used to fetch stock prices
ALPHA_VANTAGE_KEY=

# Your configuration for the Mailbox service, which is used to receive emails
MAILBOX_DRIVER=sendgrid
MAILBOX_HTTP_PASSWORD=

# The email address where incoming receipts are sent, and which is monitored by the Mailbox service
INCOMING_RECEIPTS_EMAIL=

# Your OpenAI key, which is used when AI is asked to process incoming email receipts
# Note: this will be used by all users, so make sure to use a key that has enough capacity or billing cap to prevent abuse
# Related note: this should be moved to a per-user setting in the future
OPENAI_API_KEY=

############################################################################################
### The values below should be left as is, unless you really need to use custom settings ###
############################################################################################

# The name of the application, used in the UI
APP_NAME=YAFFA

# The environment in which the application is running
# Set to "production" for general use, or "local" for development
APP_ENV=production

### Logging and debugging configuration ###
# This is relevant, if you encounter any issues with the application, and you would like to see detailed error messages

# Set this to true if you need to see detailed error messages
APP_DEBUG=true

# You can specify the log channel to be used for logging
LOG_CHANNEL=stack

# The minimum log level to be written to the log files
LOG_LEVEL=error

### Internal tools and services ###
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=database
SESSION_DRIVER=file
SESSION_LIFETIME=120
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

# Enlightn - optional, if you want to run the Enlightn security checks and save the results to their online dashboard
ENLIGHTN_USERNAME=
ENLIGHTN_API_TOKEN=

# Sentry - optional, if you want to use Sentry for error reporting
SENTRY_LARAVEL_DSN=
SENTRY_TRACES_SAMPLE_RATE=

#####################################################################################
### The settings below are used by the special, public-facing Sandbox environment ###
#####################################################################################
# You probably won't need them, and can leave them as is
# Feel free to provide your own values, if you need any of these features

# General flag to enable/disable some custom behavior or the Sandbox environment
SANDBOX_MODE=FALSE

# Recaptcha - used to prevent spam and abuse on the login and registration forms
RECAPTCHA_SITE_KEY=
RECAPTCHA_SECRET_KEY=

# Google Tag Manager - used for tracking and analytics
GTM_CONTAINER_ID=

# CookieYes - used for cookie consent management, related to tracking and analytics
COOKIEYES_ID=

#######################################################################################################
### The settings below are related to development and testing, and should not be used in production ###
#######################################################################################################

# Translation sheet settings
TS_SERVICE_ACCOUNT_EMAIL=
TS_SERVICE_ACCOUNT_CREDENTIALS_FILE=
TS_SPREADSHEET_ID=
TS_LOCALES=

# Laravel Sail settings
WWWGROUP=1000
WWWUSER=1000
APP_SERVICE=yaffa.test
SAIL_XDEBUG_ENABLED=false
SAIL_XDEBUG_PORT=9003
SAIL_XDEBUG_MODE=develop,debug
SAIL_XDEBUG_CONFIG="client_host=host.docker.internal"

# Telescope should not be enabled, unless Composer dev dependencies are installed
TELESCOPE_ENABLED=FALSE

# Debugbar should not be enabled, unless Composer dev dependencies are installed
DEBUGBAR_ENABLED=FALSE
DEBUGBAR_OPEN_STORAGE=

I would appreciate any suggestions on how to resolve this error. I suspect this issue is due to connection error between the docker containers running the app and the db, but I am not sure about it. I am happy to share more information if needed.

Thanks

[kantorge]

Thank you for sharing all these details. This helped a lot to identify a recommended next step, and hopefully a solution for you. I noticed that you added some custom port mapping to the docker-compose.yml file, and this topic is not covered in the generic, Docker-related installation instructions. I'll add it to a relevant place for future reference.

YAFFA web application uses Laravel framework and several features and components of the framework. In order to adapt the behavior of the application to the changed ports, you need to add the SANCTUM_STATEFUL_DOMAINS key to the .env file, and specify the value according to your use case:

SANCTUM_STATEFUL_DOMAINS=localhost:8438

Without this setting, many API calls fail, making the UI empty, or unresponsive. Using your .env file with this extension allowed me to access the app at http://localhost:8438/, and use its API-based features.

Some related discussions mention that the SESSION_DOMAIN=localhost setting also needs to be added to the .env file, but for me, the presence of the correct SANCTUM_STATEFUL_DOMAINS was sufficient.

Please let me know if this helps you to proceed further.

[acciptris]

Hi, thank you for your reply.

Unfortunately, it did not work for me. I looked into the SANCTUM_STATEFUL_DOMAINS and SESSION_DOMAIN variables for public hosting and saw that they need to be set to subdomain.domain.com and .domain.com, respectively. I tried this, but it did not work as well. The errors that I had mentioned are still there.

Another notification that I noticed is that Microsoft Edge tells me that the instance is not fully secure. Exact message:

This site has a valid certificate issued by a trusted authority.

However, some parts of the site are not secure. This means information (such as passwords or credit cards) might not be securely sent to this site and may be intercepted or seen by others.

I checked the network calls made by the website on a reload and saw that for favicon.ico, an HTTP request is made at http://subdomain.domain.com/images/favicon.ico.

Do you have any suggestions on what I can look into next?

If it is all right, can I contribute to the documentation with the instructions for a docker installation later after this gets figured out?

[kantorge]

@acciptris , could you please share your updated .env file, so I can check further? On my end (using Windows/WSL2 as a host) I was able to get the app fully functional using your original docker-compose.yml and .env files. This latter was updated only with the app key and the Sanctum domain settings.

Yes, I'd be happy to add any extension to the documentation and installation instructions, including changes from contributors.

[acciptris]

.env:

# This file is a "template" of which env vars need to be defined for your application.
# Copy this file as .env in the project root folder, and replace the values with your own settings.
# This version contains all possible variables required to run your own YAFFA instance.
# These are grouped into sections, especially highlighting the most important, fundamental ones.

###############################
### Basic app configuration ###
###############################

# Encryption key used to encrypt session and other data
# You can use the "php artisan key:generate" command to generate a random key, which will overwrite this value
# Make sure to keep this key secret, and don't share it with anyone.
# Also, don't change it after you have started using the application.
APP_KEY=16characterslong16characterslong

SANCTUM_STATEFUL_DOMAINS=subdomain.domain.com
SESSION_DOMAIN=.domain.com


### Database configuration ###
DB_CONNECTION=mysql
# Use localhost or 127.0.0.1 for the host, if the database is running on the same server as the application
# DB_HOST=127.0.0.1
# Use the name of the database service, if the database is running in a Docker container. This is 'db' in the default Docker setup of YAFFA.
DB_HOST=db
DB_PORT=3306
DB_DATABASE=yaffa_db
DB_USERNAME=yaffa_db_user
DB_PASSWORD=randompassword
DB_SOCKET=

### Application behavior and settings ###

# The maximum number of users that can be registered in the system.
# For a personal instance, you can set this to 1 to prevent other people from registering.
# Increase this value if you want to allow other users to register, or set it to empty to allow unlimited registrations.
REGISTERED_USER_LIMIT=1

# Do new users have to verify their email address before they can log in?
# For a local, personal instance, without access to outgoing emails, this should be set to false.
# For a public instance, this should probably be set to true, but you need to configure the email settings below according to your server setup.
EMAIL_VERIFICATION_REQUIRED=FALSE

# The email address of the administrator of the system, who will receive notifications about new users, logins, etc.
# Leave this empty if you don't want to receive any notifications
ADMIN_EMAIL=

### Define the configuration for sending emails ###
# This is needed if you want your users to verify their email addresses,
# or if you want to receive notifications about new users, etc.
MAIL_MAILER=log
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=null
[email protected]
MAIL_FROM_NAME=YAFFA

# The URL of the application, used for generating links in emails
# This URL is independent of the actual URL used to access the application, which you can configure in the web server
APP_URL=https://subdomain.domain.com/

#############################
### Advanced app features ###
#############################

### Configuration of external services ###
# Your key for the Alpha Vantage API, which is used to fetch stock prices
ALPHA_VANTAGE_KEY=

# Your configuration for the Mailbox service, which is used to receive emails
MAILBOX_DRIVER=sendgrid
MAILBOX_HTTP_PASSWORD=

# The email address where incoming receipts are sent, and which is monitored by the Mailbox service
INCOMING_RECEIPTS_EMAIL=

# Your OpenAI key, which is used when AI is asked to process incoming email receipts
# Note: this will be used by all users, so make sure to use a key that has enough capacity or billing cap to prevent abuse
# Related note: this should be moved to a per-user setting in the future
OPENAI_API_KEY=

############################################################################################
### The values below should be left as is, unless you really need to use custom settings ###
############################################################################################

# The name of the application, used in the UI
APP_NAME=YAFFA

# The environment in which the application is running
# Set to "production" for general use, or "local" for development
APP_ENV=production

### Logging and debugging configuration ###
# This is relevant, if you encounter any issues with the application, and you would like to see detailed error messages

# Set this to true if you need to see detailed error messages
APP_DEBUG=true

# You can specify the log channel to be used for logging
LOG_CHANNEL=stack

# The minimum log level to be written to the log files
LOG_LEVEL=error

### Internal tools and services ###
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=database
SESSION_DRIVER=file
SESSION_LIFETIME=120
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

# Enlightn - optional, if you want to run the Enlightn security checks and save the results to their online dashboard
ENLIGHTN_USERNAME=
ENLIGHTN_API_TOKEN=

# Sentry - optional, if you want to use Sentry for error reporting
SENTRY_LARAVEL_DSN=
SENTRY_TRACES_SAMPLE_RATE=

#####################################################################################
### The settings below are used by the special, public-facing Sandbox environment ###
#####################################################################################
# You probably won't need them, and can leave them as is
# Feel free to provide your own values, if you need any of these features

# General flag to enable/disable some custom behavior or the Sandbox environment
SANDBOX_MODE=FALSE

# Recaptcha - used to prevent spam and abuse on the login and registration forms
RECAPTCHA_SITE_KEY=
RECAPTCHA_SECRET_KEY=

# Google Tag Manager - used for tracking and analytics
GTM_CONTAINER_ID=

# CookieYes - used for cookie consent management, related to tracking and analytics
COOKIEYES_ID=

#######################################################################################################
### The settings below are related to development and testing, and should not be used in production ###
#######################################################################################################

# Translation sheet settings
TS_SERVICE_ACCOUNT_EMAIL=
TS_SERVICE_ACCOUNT_CREDENTIALS_FILE=
TS_SPREADSHEET_ID=
TS_LOCALES=

# Laravel Sail settings
WWWGROUP=1000
WWWUSER=1000
APP_SERVICE=yaffa.test
SAIL_XDEBUG_ENABLED=false
SAIL_XDEBUG_PORT=9003
SAIL_XDEBUG_MODE=develop,debug
SAIL_XDEBUG_CONFIG="client_host=host.docker.internal"

# Telescope should not be enabled, unless Composer dev dependencies are installed
TELESCOPE_ENABLED=FALSE

# Debugbar should not be enabled, unless Composer dev dependencies are installed
DEBUGBAR_ENABLED=FALSE
DEBUGBAR_OPEN_STORAGE=

docker-compose.yaml:

services:
  app:
    image: kantorge/yaffa:latest
    container_name: yaffa_app
    hostname: app
    ports:
      - "8438:80"
    env_file:
      - .env
    volumes:
      - yaffa_app_logs:/var/www/html/storage/logs
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - yaffa-network
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost"]
      interval: 30s
      timeout: 10s
      retries: 3

  db:
    image: mysql/mysql-server:8.0
    container_name: yaffa_db
    hostname: db
    ports:
      - "8439:3306"
    environment:
      MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
      MYSQL_ROOT_HOST: '%'
      MYSQL_DATABASE: '${DB_DATABASE}'
      MYSQL_USER: '${DB_USERNAME}'
      MYSQL_PASSWORD: '${DB_PASSWORD}'
    volumes:
      - yaffa_db:/var/lib/mysql
    restart: unless-stopped
    networks:
      - yaffa-network
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "${DB_USERNAME}", "-p${DB_PASSWORD}"]
      interval: 30s
      timeout: 10s
      retries: 3

  mailhog:
    image: mailhog/mailhog
    ports:
      - "8440:1025" # SMTP server
      - "8441:8025" # Web UI
    container_name: yaffa_mailhog
    networks:
      - yaffa-network

  scheduler:
    image: kantorge/yaffa:latest
    container_name: yaffa_scheduler
    command: php artisan schedule:work
    env_file:
      - .env
    depends_on:
      db:
        condition: service_healthy
    restart: unless-stopped
    networks:
      - yaffa-network
volumes:
  yaffa_app_logs:
  yaffa_db:

networks:
  yaffa-network:
    driver: bridge

Hi. Here are the modified config files. The thing I said about the HTTP request made, was there even before the modification. I am trying this on a Digitalocean Droplet VPS.

Did you face anything similar when you hosted the demo website for YAFFA?

[kantorge]

Quick question @acciptris , just to avoid any misdirection on my end. Are you using exactly these values in your .env file, or have you replaced your actual domain and subdomain settings before posing the file content?

SANCTUM_STATEFUL_DOMAINS=subdomain.domain.com
SESSION_DOMAIN=.domain.com

[acciptris]

@kantorge I have replaced my URL with placeholder values here. I did verify that I am using the correct values in my actual env file.

[kantorge]

Thanks for confirming @acciptris , that's absolutely reasonable. I ended up creating a VM in GCP with Docker and Docker Compose, using your .env and YAML files, and also setting creating a DNS record for a test subdomain pointing to the IP of this VM.

The key setting I had to make is to add the necessary ports to the Sanctum settings:
SANCTUM_STATEFUL_DOMAINS=testsubdomain.testdomain.com**:8438**
SESSION_DOMAIN=.testdomain.com

This allowed me to spin up and use YAFFA.

Note, that given your settings of the volumes, I also had to adjust the folder permissions within Docker:

docker exec -it yaffa_app chown -R www-data:www-data /var/www/html/storage /var/www/html/bootstrap/cache

Let me know if this helps you to get started.

I'm planning to create a step-by-step guide of this approach in the documentation. Any notes and contributions are welcome.