bug: Cannot login on self-hosted docker setup

[Gunlek]

Steps To Reproduce

Hello,

I'm getting an error on self-hosted penpot setup using docker. I cannot login on penpot after having created a user and thus, I face the "An error occurred" message on the login page.

Step to reproduce:

• Follow the setup instructions here: https://help.penpot.app/technical-guide/getting-started/ (Docker section)
• Create a user (Either from frontend or backend console, I sometimes have to create-profile then update-profile for whatever reason...)
• Try to login with this user

Expected behavior

User can login correctly

Actual behavior

Error on login after multiple tries, reinstall of docker image, started from scratch with volume deletion, ...

Screenshots or video

On front-end side:

On back-end side:

Desktop (please complete the following information)

No response

Smartphone (please complete the following information)

No response

Environment (please complete the following information)

• Os Version: MacOS Sonoma 14.4.1
• Safari 17.4.1
• Docker Engine V26.0.0 on Docker Desktop 4.29.0
• Penpot image automatically downloaded from docker-compose script, latest as of today:
  penpotapp/exporter latest e5519a5b3345
  penpotapp/frontend latest b1b2a7ea179d
  penpotapp/backend latest b4c626dec02b

Frontend Stack Trace

No response

Backend Stack Trace

No response

Additional context

docker-compose.yml:

---
version: "3.5"

networks:
  penpot:

volumes:
  penpot_postgres_v15:
  penpot_assets:
  # penpot_traefik:
  # penpot_minio:

services:
  ## Traefik service declaration example. Consider using it if you are going to expose
  ## penpot to the internet or different host than `localhost`.

  # traefik:
  #   image: traefik:v2.9
  #   networks:
  #     - penpot
  #   command:
  #     - "--api.insecure=true"
  #     - "--entryPoints.web.address=:80"
  #     - "--providers.docker=true"
  #     - "--providers.docker.exposedbydefault=false"
  #     - "--entryPoints.websecure.address=:443"
  #     - "--certificatesresolvers.letsencrypt.acme.tlschallenge=true"
  #     - "--certificatesresolvers.letsencrypt.acme.email=<EMAIL_ADDRESS>"
  #     - "--certificatesresolvers.letsencrypt.acme.storage=/traefik/acme.json"
  #   volumes:
  #     - "penpot_traefik:/traefik"
  #     - "/var/run/docker.sock:/var/run/docker.sock"
  #   ports:
  #     - "80:80"
  #     - "443:443"

  penpot-frontend:
    image: "penpotapp/frontend:latest"
    restart: always
    ports:
      - 9001:80

    volumes:
      - penpot_assets:/opt/data/assets

    depends_on:
      - penpot-backend
      - penpot-exporter

    networks:
      - penpot

    labels:
      - "traefik.enable=true"

      ## HTTP: example of labels for the case if you are going to expose penpot to the
      ## internet using only HTTP (without HTTPS) with traefik

      # - "traefik.http.routers.penpot-http.entrypoints=web"
      # - "traefik.http.routers.penpot-http.rule=Host(`<DOMAIN_NAME>`)"
      # - "traefik.http.services.penpot-http.loadbalancer.server.port=80"

      ## HTTPS: example of labels for the case if you are going to expose penpot to the
      ## internet using with HTTPS using traefik

      # - "traefik.http.middlewares.http-redirect.redirectscheme.scheme=https"
      # - "traefik.http.middlewares.http-redirect.redirectscheme.permanent=true"
      # - "traefik.http.routers.penpot-http.entrypoints=web"
      # - "traefik.http.routers.penpot-http.rule=Host(`<DOMAIN_NAME>`)"
      # - "traefik.http.routers.penpot-http.middlewares=http-redirect"
      # - "traefik.http.routers.penpot-https.entrypoints=websecure"
      # - "traefik.http.routers.penpot-https.rule=Host(`<DOMAIN_NAME>`)"
      # - "traefik.http.services.penpot-https.loadbalancer.server.port=80"
      # - "traefik.http.routers.penpot-https.tls=true"
      # - "traefik.http.routers.penpot-https.tls.certresolver=letsencrypt"

    ## Configuration envronment variables for frontend the container. In this case this
    ## container only needs the `PENPOT_FLAGS`. This environment variable is shared with
    ## other services but not all flags are relevant to all services.

    environment:
      ## Relevant flags for frontend:
      ## - demo-users
      ## - login-with-github
      ## - login-with-gitlab
      ## - login-with-google
      ## - login-with-ldap
      ## - login-with-oidc
      ## - login-with-password
      ## - registration
      ## - webhooks
      ##
      ## You can read more about all available flags on:
      ## https://help.penpot.app/technical-guide/configuration/#advanced-configuration

      - PENPOT_FLAGS=enable-registration enable-login-with-password disable-secure-session-cookies 

  penpot-backend:
    image: "penpotapp/backend:latest"
    restart: always

    volumes:
      - penpot_assets:/opt/data/assets

    depends_on:
      - penpot-postgres
      - penpot-redis

    networks:
      - penpot

    ## Configuration envronment variables for backend the
    ## container.

    environment:

      ## Relevant flags for backend:
      ## - demo-users
      ## - email-verification
      ## - log-emails
      ## - log-invitation-tokens
      ## - login-with-github
      ## - login-with-gitlab
      ## - login-with-google
      ## - login-with-ldap
      ## - login-with-oidc
      ## - login-with-password
      ## - registration
      ## - secure-session-cookies
      ## - smtp
      ## - smtp-debug
      ## - telemetry
      ## - webhooks
      ## - prepl-server
      ##
      ## You can read more about all available flags and other
      ## environment variables for the backend here:
      ## https://help.penpot.app/technical-guide/configuration/#advanced-configuration

      - PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification enable-smtp enable-prepl-server

      ## Penpot SECRET KEY. It serves as a master key from which other keys for subsystems
      ## (eg http sessions, or invitations) are derived.
      ##
      ## If you leve it commented, all created sessions and invitations will
      ## become invalid on container restart.
      ##
      ## If you going to uncomment this, we recommend use here a trully randomly generated
      ## 512 bits base64 encoded string.  You can generate one with:
      ##
      ## python3 -c "import secrets; print(secrets.token_urlsafe(64))"

      # - PENPOT_SECRET_KEY=my-insecure-key

      ## The PREPL host. Mainly used for external programatic access to penpot backend
      ## (example: admin). By default it listen on `localhost` but if you are going to use
      ## the `admin`, you will need to uncomment this and set the host to `0.0.0.0`.

      # - PENPOT_PREPL_HOST=0.0.0.0

      ## Public URI. If you are going to expose this instance to the internet and use it
      ## under different domain than 'localhost', you will need to adjust it to the final
      ## domain.
      ##
      ## Consider using traefik and set the 'disable-secure-session-cookies' if you are
      ## not going to serve penpot under HTTPS.

      - PENPOT_PUBLIC_URI=http://localhost:9001

      ## Database connection parameters. Don't touch them unless you are using custom
      ## postgresql connection parameters.

      - PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
      - PENPOT_DATABASE_USERNAME=penpot
      - PENPOT_DATABASE_PASSWORD=penpot

      ## Redis is used for the websockets notifications. Don't touch unless the redis
      ## container has different parameters or different name.

      - PENPOT_REDIS_URI=redis://penpot-redis/0

      ## Default configuration for assets storage: using filesystem based with all files
      ## stored in a docker volume.

      - PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
      - PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets

      ## Also can be configured to to use a S3 compatible storage
      ## service like MiniIO. Look below for minio service setup.

      # - AWS_ACCESS_KEY_ID=<KEY_ID>
      # - AWS_SECRET_ACCESS_KEY=<ACCESS_KEY>
      # - PENPOT_ASSETS_STORAGE_BACKEND=assets-s3
      # - PENPOT_STORAGE_ASSETS_S3_ENDPOINT=http://penpot-minio:9000
      # - PENPOT_STORAGE_ASSETS_S3_BUCKET=<BUKET_NAME>

      ## Telemetry. When enabled, a periodical process will send anonymous data about this
      ## instance. Telemetry data will enable us to learn on how the application is used,
      ## based on real scenarios. If you want to help us, please leave it enabled. You can
      ## audit what data we send with the code available on github

      - PENPOT_TELEMETRY_ENABLED=true

      ## Example SMTP/Email configuration. By default, emails are sent to the mailcatch
      ## service, but for production usage is recommended to setup a real SMTP
      ## provider. Emails are used to confirm user registrations & invitations. Look below
      ## how mailcatch service is configured.

      - PENPOT_SMTP_DEFAULT_FROM=no-reply@example.com
      - PENPOT_SMTP_DEFAULT_REPLY_TO=no-reply@example.com
      - PENPOT_SMTP_HOST=penpot-mailcatch
      - PENPOT_SMTP_PORT=1025
      - PENPOT_SMTP_USERNAME=
      - PENPOT_SMTP_PASSWORD=
      - PENPOT_SMTP_TLS=false
      - PENPOT_SMTP_SSL=false

  penpot-exporter:
    image: "penpotapp/exporter:latest"
    restart: always
    networks:
      - penpot

    environment:
      # Don't touch it; this uses internal docker network to
      # communicate with the frontend.
      - PENPOT_PUBLIC_URI=http://penpot-frontend

      ## Redis is used for the websockets notifications.
      - PENPOT_REDIS_URI=redis://penpot-redis/0

  penpot-postgres:
    image: "postgres:15"
    restart: always
    stop_signal: SIGINT

    volumes:
      - penpot_postgres_v15:/var/lib/postgresql/data

    networks:
      - penpot

    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=penpot
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=penpot

  penpot-redis:
    image: redis:7
    restart: always
    networks:
      - penpot

  ## A mailcatch service, used as temporal SMTP server. You can access via HTTP to the
  ## port 1080 for read all emails the penpot platform has sent. Should be only used as a
  ## temporal solution meanwhile you don't have a real SMTP provider configured.

  penpot-mailcatch:
    image: sj26/mailcatcher:latest
    restart: always
    expose:
      - '1025'
    ports:
      - "1080:1080"
    networks:
      - penpot

  ## Example configuration of MiniIO (S3 compatible object storage service); If you don't
  ## have preference, then just use filesystem, this is here just for the completeness.

  # minio:
  #   image: "minio/minio:latest"
  #   command: minio server /mnt/data --console-address ":9001"
  #   restart: always
  #
  #   volumes:
  #     - "penpot_minio:/mnt/data"
  #
  #   environment:
  #     - MINIO_ROOT_USER=minioadmin
  #     - MINIO_ROOT_PASSWORD=minioadmin
  #
  #   ports:
  #     - 9000:9000
  #     - 9001:9001

For the most part of the docker-compose.yml, the content is unchanged from the original file, except for the flags where I added the disable-secure-session-cookies flag

[synchromatik]

Same, i get this on register step after entering username/password and when asked for name. Nothing in logs, just register-profile API hit (called on "create account" button cta). As for docker-compose, more or less same as above (default), just with custom postgres/redis/s3 locations.

[southgraphic]

I get the same issue with my self-hosted setup, except I get the error: : "Something wrong has happened." on the frontend. I'm using the stacks feature in Portainer for docker compose, and made no changes to the docker-compose.yml.

[EmranMR]

Hi same here. I am using macOS Sonoma 14.4.1 docker 4.30
I used both macOS and iPadOS safari, none worked. The chromium based browsers have no issue

It is also worth mentioning I also have an ubuntu 22 server, and I can access the dashboard and login, even with safari if the penpot is started using docker on the ubuntu

[niwinz]

Same, i get this on register step after entering username/password and when asked for name. Nothing in logs, just register-profile API hit (called on "create account" button cta). As for docker-compose, more or less same as above (default), just with custom postgres/redis/s3 locations.

On this concrete case I see that register-profile returned 400, what means error.

[niwinz]

Can you paste here the HTTP response output on making login request? something linke this

Opening the devtools console with (F12)

[VivekAXR]

Hi, same here. I am using Ubuntu 22.04.4 LTS. I am getting the error "Something wrong has happened." on the front-end.
HTTP response output for login-with-password and get-profile are 200 OK

[jonaskuske]

I had a similar issue when I tried to open Penpot via localhost, when I used 127.0.0.1 instead, it worked.