Email Styling and Redirection Issues in Gmail

[VictorHachard]

The bug

I have configured a mail server with Google. However, I have two issues:

• When I receive the email, the styling is not like the screen is the release note.
• When clicking on the button, the redirection URL is incorrect, leading to a 404 error.

I see in the code that the base URL is concatenated with /auth/login. In my case, the base URL https://xxx/ combined with /auth/login results in the double slashes (https://xxx//auth/login).

Also, I am using Nginx with Nginx Proxy Manager. Could this be causing the ending / in my base URL?

The OS that Immich Server is running on

TrueNAS-SCALE-23.10.2

Version of Immich Server

v1.105.1

Version of Immich Mobile App

v1.105.1

Platform with the issue

• Server
• Web
• Mobile

Your docker-compose.yml content

Running on TrueNAS

Your .env content

Running on TrueNAS

Reproduction steps

1. Configure the mail server with Google in the Immich application.
2. Create a user and send the email.
3. Open the email in Gmail.
4. Observe the incomplete styling of the email.
5. Click on the button within the email.
6. Notice the incorrect redirection URL: https://xxx//auth/login which results in a 404 error due to the double slashes.

Relevant log output

No response

Additional information

No response

[alextran1502]

Thanks, the double / is the issue

[Snowknight26]

Probably something as easy as changing the following code block:

immich/server/src/services/notification.service.ts

Lines 49 to 58 in 6b369e8

	const { server } = await this.configCore.getConfig();
	const { html, text } = this.notificationRepository.renderEmail({
	template: EmailTemplate.WELCOME,
	data: {
	baseUrl: server.externalDomain || 'http://localhost:2283',
	displayName: user.name,
	username: user.email,
	password: tempPassword,
	},
	});

    const { server } = await this.configCore.getConfig();
    const baseUrl = () => {
      let url = 'http://localhost:2283';
      try {
        var url = (new URL(server.externalDomain)).origin;
      } catch (e) {}
      return url;
    }
    const { html, text } = this.notificationRepository.renderEmail({
      template: EmailTemplate.WELCOME,
      data: {
        baseUrl: url,
        displayName: user.name,
        username: user.email,
        password: tempPassword,
      },
    });

(if you don't care about IE you can remove the (e) part).

Ideally this should be earlier on, especially if server.externalDomain is used elsewhere, but this should work.

[jrasm91]

Let's instead normalize it in getConfig instead.

[VictorHachard]

For the styling issue, I transferred my email to Outlook, and there is no problem. It seems to be an issue with Gmail.