[Self-Hosted] Fail to discover server using connect on login screen

(#639) Bug Fixed self-hosting

Summary

On the homepage for Fluxer, there is a connect button. When the url in the box is the url to my server and I click connect, there is an error stating can't access property "api_client", e.endpoints is undefined. This error seems to arise from another issue aside from connectivity as the request to https://chat.example.com/.well-known/fluxer gives a 200 with the following body which seems to indicate that it has indeed connected to the endpoint. This does not prevent me from logging in to the server hosting said instance or any of the other functions as far as I'm aware.

Steps to reproduce

  1. Configure Fluxer
  2. Head to login page
  3. Try to connect to hosted instance using domain
  4. Fail to connect

Environment

Version: v2 OS: Docker

Logs or screenshots

<!doctype html><html lang="en"><head>
		<script nonce="1611e6710e6cf3248122bf3530772ade">window.__FLUXER_BOOTSTRAP__={"config":{"releaseChannel":"stable","bootstrapApiEndpoint":"/api","bootstrapApiPublicEndpoint":"https://chat.example.com/api"},"instance":{"api_code_version":1,"app_public":{"branding":{"favicon_url":null,"icon_url":null,"logo_url":null,"product_name":"Fluxer","symbol_url":null,"theme_color":"#000000","wordmark_url":null},"legal":{"privacy_url":null,"terms_url":null},"registration":{"collect_date_of_birth":false},"setup":{"admin_url":"https://chat.example.com/admin","configured":true}},"captcha":{"hcaptcha_site_key":null,"provider":"none","turnstile_site_key":null},"community":{"direct_messages_disabled":false,"single_community":false,"single_community_guild_id":null},"endpoints":{"admin":"https://chat.example.com/admin","api":"https://chat.example.comapi","api_client":"https://chat.example.com/api","api_public":"https://chat.example.com/api","gateway":"wss://chat.example.com/gateway","gift":"https://chat.example.com/gift","invite":"https://chat.example.com/invite","marketing":"https://chat.example.com","media":"https://chat.example.com/media","static_cdn":"https://chat.example.com","webapp":"https://chat.example.com"},"features":{"emails_enabled":true,"presigned_attachment_uploads":true,"self_hosted":true,"stripe_enabled":false,"voice_enabled":true},"gif":{"attribution_required":false,"display_name":"Tenor","provider":"tenor"},"limits":{"defaultsHash":"7nbcm7","rules":[{"id":"default","overrides":{"feature_animated_avatar":1,"feature_animated_banner":1,"feature_custom_discriminator":1,"feature_early_access":1,"feature_global_expressions":1,"feature_higher_video_quality":1,"feature_per_guild_profiles":1,"feature_voice_entrance_sounds":1,"max_attachment_file_size":500000000,"max_bookmarks":300,"max_created_packs":50,"max_custom_backgrounds":15,"max_favorite_memes":500,"max_guild_emojis":500,"max_guild_emojis_animated":500,"max_guild_emojis_animated_more":500,"max_guild_emojis_static":500,"max_guild_emojis_static_more":500,"max_guild_stickers":500,"max_guild_stickers_more":500,"max_guilds":200,"max_installed_packs":50,"max_message_length":4000}}],"traitDefinitions":[],"version":2},"push":{"public_vapid_key":"BJPkbO-MiNiMISBUMsxEU9ihvstJRnvXwmsZRdkqo8Pyx6mi0gXeSc_jPY3jEVM9exBfNDU9M9GKLH-Id7Tn4oU"},"registration":{"admin_registration_urls_enabled":true,"mode":"approval"},"services":{"bluesky_enabled":false,"gif_enabled":false,"youtube_enabled":false},"sso":{"display_name":null,"enabled":false,"enforced":false,"redirect_uri":"https://chat.example.com/auth/sso/callback"}},"geoip":{"ageBlockedGeos":[{"countryCode":"US","regionCode":"MS"}],"ageRestrictedGeos":[{"countryCode":"GB","regionCode":null},{"countryCode":"BR","regionCode":null}],"countryCode":null,"latitude":null,"longitude":null,"regionCode":null}};window.__FLUXER_CONFIG__={"PUBLIC_RELEASE_CHANNEL":"stable","PUBLIC_BOOTSTRAP_API_ENDPOINT":"/api","PUBLIC_BOOTSTRAP_API_PUBLIC_ENDPOINT":"https://chat.example.com/api"};</script><meta charset="utf-8"><title>Fluxer</title><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content,maximum-scale=1,user-scalable=no"><meta name="description" content="Fluxer is a free and open source instant messaging and VoIP chat app built for friends, groups, and communities."><link rel="preconnect" href="https://chat.example.com"><link rel="stylesheet" href="https://chat.example.com/fonts/ibm-plex.css?v=3"><link rel="manifest" href="/manifest.json"><link rel="icon" type="image/png" sizes="32x32" href="https://chat.example.com/web/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="https://chat.example.com/web/apple-touch-icon.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="Fluxer"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#4641D9"><meta name="msapplication-navbutton-color" content="#4641D9"><meta name="msapplication-TileColor" content="#4641D9"><meta name="format-detection" content="telephone=no"><meta name="display" content="standalone"><script nonce="1611e6710e6cf3248122bf3530772ade">!function(){try{var e=window.location;if("/"===e.pathname){var a="/channels/@me";e.search&&(a+=e.search),e.hash&&(a+=e.hash),e.replace(a)}}catch(e){}}(),function(){try{var e=localStorage.getItem("theme");e&&document.documentElement.classList.add("theme-"+e)}catch{}}()</script><link href="/assets/005055d80910d1d3.css" rel="stylesheet"></head><body><div id="root"></div>
<noscript>JavaScript is required to use this application.</noscript>

<script src="/assets/6a793c657aa1b299.js" type="module"></script><script src="/assets/356aaade04a117b1.js" type="module"></script><script src="/assets/b4f91d4d90c864ac.js" type="module"></script><script src="/assets/3b8eed26a6f05261.js" type="module"></script><script src="/assets/16bf14551996ba83.js" type="module"></script><script src="/assets/3a861a2633d87363.js" type="module"></script><script src="/assets/8667321d379d74ff.js" type="module"></script><script src="/assets/6b85da2264bfb980.js" type="module"></script><script src="/assets/b5805ca03e2fc286.js" type="module"></script><script src="/assets/474b860b05f2ee8f.js" type="module"></script><script src="/assets/b71c928c1fb0fe76.js" type="module"></script><script src="/assets/f09b89d6d2b26dc7.js" type="module"></script><script src="/assets/a7e5245e1c4782bd.js" type="module"></script><script src="/assets/ce52d3635a3fd4d4.js" type="module"></script><script src="/assets/917509b233647fe1.js" type="module"></script><script src="/assets/8cbe6afe043ceca0.js" type="module"></script></body></html>
``` image
  • 609612239-925b213e-14e5-4423-b9a9-660e07b840a8.png

    609612239-925b213e-14e5-4423-b9a9-660e07b840a8.png

    1050×300 | 27 kB

Merged posts

These posts were merged into this one. Their comments are now part of the conversation below, marked with where they came from.

Report details

Summary

On a self-hosted Fluxer instance, the login page displays an editable server field and a Connect button, even though the current instance is already known from the URL. Registration, email verification and login all work correctly without ever pressing Connect, making the button appear unnecessary in this scenario. Additionally, clicking Connect throws the following JavaScript error:
can't access property "api_client", e.endpoints is undefined
For self-hosted instances, I think the UX would be much cleaner if: the current instance URL was displayed as a fixed (non-editable) value, the Connect button was hidden, and users were taken directly to the login/registration form. This would still leave room for a generic client in the future where connecting to arbitrary Fluxer instances makes sense.

Steps to reproduce

  1. Deploy or open a self-hosted Fluxer instance.
  2. Open the login page.
  3. Observe that the current instance URL is already pre-filled in the server field and that the login/registration form is already available.
  4. Click the Connect button.
  5. Observe the following JavaScript error:
can't access property "api_client", e.endpoints is undefined

Logs or screenshots

image image
  • 615160899-6dcad179-2b38-44ca-855d-d05579124d97.png

    615160899-6dcad179-2b38-44ca-855d-d05579124d97.png

    1111×841 | 71 kB

  • 615160897-93a4d632-c33d-4295-9979-a771cfe99a12.png

    615160897-93a4d632-c33d-4295-9979-a771cfe99a12.png

    1111×841 | 69 kB

5 comments

Sign in with Fluxer to comment and vote.
Comment by @mshaberle
RexSystem 1 vote originally by @mshaberle on GitHub OP
For whatever reason, adding the following lines to my Caddyfile resolved this.
handle /.well-known/* {
    reverse_proxy fluxer-api:8080
}
Comment by @G0D200
RexSystem 1 vote originally by @G0D200 on GitHub
I had the same issue, this indeed fixed it. This also fixed an issue with the desktop app trying to connect to my server. It had been saying that my server was not a valid Fluxer instance, as it was annoyed that it was returning html instead of json, but setting this seems to have resolved that. The desktop client does recognize it as a fluxer instance now, but it just crashes when you try to actually log in to it. Though, I believe that's a known issue that they're fixing in a canary build soon
Comment by @MrRubberDucky
RexSystem 1 vote edited Merged from #688 originally by @MrRubberDucky on GitHub
You can fix it by adding following to your Caddyfile, doesn't matter where. Can be at the end or at the start.
{$FLUXER_CADDY_SITE_ADDRESS} {
        [...]
        handle /.well-known/* {
                reverse_proxy fluxer-api:8080
        }
}
This is a duplicate of #639
Comment by @SolunaCG
RexSystem 1 vote Merged from #688 originally by @SolunaCG on GitHub
Thanks! That explains the JavaScript error. However, my main concern wasn't actually the error itself, but the UX on self-hosted deployments. Since the current instance is already known from the URL, registration, email verification and login already work without ever pressing Connect. From a user's perspective, I'm not sure what purpose the editable server field and the Connect button serve in this scenario. While adding the Caddy configuration would prevent the JavaScript error, it would still leave the same UX question open. I can definitely see this UI making sense for a future generic/official Fluxer client that can connect to arbitrary Fluxer instances, but I'm not sure it makes sense for dedicated self-hosted deployments. Since this issue seems to be a duplicate regarding the JavaScript error, would it make more sense to open a GitHub Discussion (or a separate feature request) to discuss the UX aspect?
Comment by @Jiralite
RexSystem 1 vote Merged from #688 originally by @Jiralite on GitHub
You can comment that in the original issue!