Login via Email Magic Link fails in Firefox

[mrg358]

Briefkasten deployed with docker, running behind Nginx Proxy Manager.
I set up Github, Google and Email login.
All of the three login providers works correctly in Brave (chrome).

Login via Email fails in Firefox (tested on ubuntu and android).

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error NetworkError when attempting to fetch resource. 
Object { error: {…}, url: "/api/auth/providers", message: "NetworkError when attempting to fetch resource." }

[ndom91]

What exactly did you do to provoke that error message? i.e. was that upon clickign the link in the email? Or what?

The error message seems to indicate that the /api/auth/providers endpoint is not available. But this is the endpoint which tells the login page which buttons to render, for example. Therefore, if the login page renders correctly then this endpoint should be working.

Are the links in the email body correct? I.e. if its supposed to be briefkasten.home.com/api/auth/providers, but the email link is maybe still pointing to localhost:3000/api/auth/providers, this coudl cause problems as well.

[mrg358]

E-mail wasn't delivered sent at all. It seems this is a Firefox specific bug only. In Chrome (Brave) everything works.
Authentication stops after hitting "Submit Query" button.
API URL shows "blocked" status and NS_BINDING_ABORTED error message.
You can take a look, here is my deployment
I was searching for solutions, maybe this has something to do with default action on login button, not sure.

[ndom91]

Okay so I was able to reproduce it on your instance - thanks for providing that link 👍

It also worked for me in Chrome, but as you said, not in Firefox.

Can you check your Vercel API route logs for the /api/auth/[...nextauth].js function? That should have more info for us. Its clearly complaining about the /api/auth/providers endpoint, but that is available under your main domain, so that shouldn't be a problem..

What's your NEXTAUTH_URL set to? Are you using NEXTAUTH_INTERNLA_URL as well by chance?

[mrg358]

actually there are some callback errors in docker, I hope it helps.
https://go.numeo.top/eSNJx

here is part of my my .env vars

# REQUIRED - NextAuth.js
NEXTAUTH_URL=https://bk.d.numeo.top
NEXTAUTH_URL_INTERNAL=http://10.0.0.11:3004

and here is my compose file

version: '3.8'

services:
  postgres:
    container_name: bk-postgres
    image: postgres
    restart: unless-stopped
    environment:
      - POSTGRES_USER=bkAdmin
      - POSTGRES_PASSWORD=<redacted>
      - POSTGRES_DB=briefkasten
        #ports:
        #- 5432:5432
    volumes:
      - briefkasten-db:/var/lib/postgresql/data
  app:
    container_name: bk-app
    labels:
      com.centurylinklabs.watchtower.enable: false
    build: .
    env_file:
      - .env
    restart: unless-stopped
    ports:
      - 10.0.0.11:3004:3000
    depends_on:
      - 'postgres'
volumes:
  briefkasten-db:

[mrg358]

I tried to disable #NEXTAUTH_URL_INTERNAL=http://10.0.0.11:3004 resulted in no change.

[ndom91]

Do you have a NEXTAUTH_SECRET env var as well? I believe thats still necessary when self-hosting.

See: https://authjs.dev/reference/configuration/env#nextauth_secret

[mrg358]

Yes, I am using NEXTAUTH_SECRET=random-value created with openssl rand -base64 32

[mrg358]

Yes, I am using NEXTAUTH_SECRET=random-value created with openssl rand -base64 32

I tried to search for some clues, and found a result which seems to be very similar to this bug.

Unfortunately I can't test it out b/c a I am not familiar with nextjs.

[ndom91]

Thanks for the link @mrg358 - I can take a look and see if it fixes the issue in Firefox.

[ingeniumstudio]

Same here.. works with Chrome tho. Login via Google works in Firefox