How to configure Next-Auth in Api-Plaftorm PWA

[MarwenTlili]

I salute you everyone, and thank you for all the hard work you are doing.

What I'm trying to do:
I'm trying to integrate Next-Auth in Api-Platform PWA container (official docker image)

next-auth use http:localhost:3000 by default

Problem:
https://localhost/ and https://localhost/auth/signin showing error:

GET https://localhost/api/auth/session 404 [next-auth][error][CLIENT_FETCH_ERROR] 

=> it looks like the Api-Platform is handling the urls for https://localhost/api/auth/session instead of NextAuth

Questions:
how to configure API-Plafrom PWA container so that nextjs/next-auth handle the fron-end routes

Note: this way I can use this url https://localhost/auth/signin, ... to test the credentials authentication
I tested Next-Auth in new project (outside of docker) and it works fine (no errors, auth, session, ...)

---

.env.local

NODE_ENV=development
NEXTAUTH_URL=http://localhost:3000/
NEXTAUTH_SECRET= generated using openssl rand -hex 32

---

docker-compose.yml

version: "3.4"
services:
  php:
    container_name: issatex-php
    hostname: issatex-php
    build:
      context: ./api
      target: app_php
    depends_on:
      - database
    restart: unless-stopped
    volumes:
      - php_socket:/var/run/php
    healthcheck:
      interval: 10s
      timeout: 3s
      retries: 3
      start_period: 30s
    environment:
      DATABASE_URL: postgresql://${POSTGRES_USER:-app}:${POSTGRES_PASSWORD:-!ChangeMe!}@database:5432/${POSTGRES_DB:-app}?serverVersion=${POSTGRES_VERSION:-14}
      TRUSTED_PROXIES: ${TRUSTED_PROXIES:-127.0.0.0/8,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16}
      TRUSTED_HOSTS: ^${SERVER_NAME:-example\.com|localhost}|caddy$$
      MERCURE_URL: ${CADDY_MERCURE_URL:-http://caddy/.well-known/mercure}
      MERCURE_PUBLIC_URL: https://${SERVER_NAME:-localhost}/.well-known/mercure
      MERCURE_JWT_SECRET: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}

  pwa:
    container_name: issatex-pwa
    hostname: issatex-pwa
    build:
      context: ./pwa
      target: prod
    environment:
      NEXT_PUBLIC_ENTRYPOINT: http://caddy
    ports:
      - "3000:3000"

  caddy:
    container_name: issatex-caddy
    hostname: issatex-caddy
    build:
      context: api/
      target: app_caddy
    depends_on:
      - php
      - pwa
    environment:
      PWA_UPSTREAM: pwa:3000
      SERVER_NAME: ${SERVER_NAME:-localhost}, caddy:80
      MERCURE_PUBLISHER_JWT_KEY: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
      MERCURE_SUBSCRIBER_JWT_KEY: ${CADDY_MERCURE_JWT_SECRET:-!ChangeThisMercureHubJWTSecretKey!}
    restart: unless-stopped
    volumes:
      - php_socket:/var/run/php
      - caddy_data:/data
      - caddy_config:/config
    ports:
      # HTTP
      - target: 80
        published: ${HTTP_PORT:-80}
        protocol: tcp
      # HTTPS
      - target: 443
        published: ${HTTPS_PORT:-443}
        protocol: tcp
      # HTTP/3
      - target: 443
        published: ${HTTP3_PORT:-443}
        protocol: udp
database:
    container_name: issatex-database
    image: postgres:${POSTGRES_VERSION:-14}-alpine
    environment:
      - POSTGRES_DB=${POSTGRES_DB:-app}
      # You should definitely change the password in production
      - POSTGRES_PASSWORD=${POSTGRES_PASSWORD:-!ChangeMe!}
      - POSTGRES_USER=${POSTGRES_USER:-app}
    volumes:
      - db_data:/var/lib/postgresql/data
      # you may use a bind-mounted host directory instead, so that it is harder to accidentally remove the volume and lose all your data!
      # - ./api/docker/db/data:/var/lib/postgresql/data
    ports:
      - target: 5432
        published: 5433
        protocol: tcp
volumes:
  php_socket:
  caddy_data:
  caddy_config:
  db_data:

---

config/packages/security.yaml

firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        api:
            pattern: ^/api/
            stateless: true
            provider: jwt
            jwt: ~
        main:
            provider: users
            stateless: true
            json_login:
                check_path: auth 
                username_path: email
                password_path: password
                success_handler: lexik_jwt_authentication.handler.authentication_success
                failure_handler: lexik_jwt_authentication.handler.authentication_failure
            refresh_jwt:
                check_path: api_refresh_token 
            logout:
                path: api_token_invalidate
access_control:
        - { path: ^/$, roles: PUBLIC_ACCESS }
        - { path: ^/docs, roles: PUBLIC_ACCESS }
        - { path: ^/(auth|token/(refresh|invalidate)), roles: PUBLIC_ACCESS } 
        - { path: ^/contexts, roles: PUBLIC_ACCESS }
        - { path: ^/, roles: IS_AUTHENTICATED_FULLY }

[LaurentSanson]

Hi @MarwenTlili ,

Got into the same issue here. Have you found an answer yet?

[MarwenTlili]

@LaurentSanson yes, you have to add '/api/auth/*' to "@pwa expression" in Caddy file, so that NextJS will handle req for that url.
here is an example in my project: Caddy config file
this also useful if you want to to access media directly (like images, documents, ...)

[LaurentSanson]

You're a legend !! Thanks a lot 🎉