Cannot connect to Home Assistant instances over "http://".

[jpleite]

Hi @shannonhochkins

First of all great work!

Followed documentation and hen using const HASS_URL = 'http://homeassistant.local:8124'; I get "Cannot connect to Home Assistant instances over "http://"."
Also if I use production URL over https then after login I get "Unknown error (TypeError: Failed to fetch)."

Thanks in advance

[shannonhochkins]

Hi! Thankyou! There's a bug that appears with https on the first login, if you refresh it should load properly, it's not completely tested but there is an option on the HassConnect component to allow http urls, it's all documented on the storybook page :)

[jpleite]

Thanks @shannonhochkins I've read your storybook from top to bottom. Although I say a method for allowing insecure connections I was not able to make it work under the simple test app. Using https even with refresh it's not working for me. Can you point me in the right direction please?

[shannonhochkins]

It might help for you to provide what you've tried, have you entered your home assistant url correctly into the props? What node / npm version are you using? Is there any errors in the console? I need more information to help :)

[jpleite]

Sorry, you are right. Here's an overview of the setup:

• HA is accessible via http://ip:8124 or http://homeassistant.local:8124 or https://ha.mydomain.com
• I use a reverse proxy in my Synology which redirects https HA request to http://ip:8124
• Under HA configuration I have the following on http

http:
use_x_forwarded_for: true
trusted_proxies:
- 192.168.154.0/24
- ::1
server_port: 8124

Under src/App.tsx I used your sample code

// App.tsx
import React from 'react';
import { HassConnect } from '@hakit/core';
import './App.css';
// TODO: replace this with your home assistant url:
const HASS_URL = 'http://homeassistant.local:8124';

function App() {
  return (
    <HassConnect hassUrl={HASS_URL}>
      <p>This will render when connected!</p>
    </HassConnect>
  );
}

export default App;

The console shows

webpack compiled successfully
No issues found.

and browser

Cannot connect to Home Assistant instances over "http://".

If I replace HASS_URL with https://ha.mydomain.com the console shows no errors and browser Unknown error (TypeError: Failed to fetch).

Versions:
npm: '10.1.0'
node: '20.7.0'

[shannonhochkins]

Have you tried adding options prop to HassConnect?

https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-hassconnect--docs

Specifically, enabling the allowNonSecure option?

This may have something to do with your proxy setup, but I'd start by trying the options prop

[shannonhochkins]

I use my public url by default, but if the options prop doesn't work for you I'll attempt to debug this more on my side

[jpleite]

Have you tried adding options prop to HassConnect?

https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-hassconnect--docs

Specifically, enabling the allowNonSecure option?

This may have something to do with your proxy setup, but I'd start by trying the options prop

Did try to include options prop but struggling with the correct syntax. Can you give me an example based on code above please?

[shannonhochkins]

If you use typescript you'll get full intellisense, however here's what you should try

<HassConnect hassUrl={HASS_URL} options={{
    allowNonSecure: true
}} >
<p>connected</p>
</HassConnect>

[jpleite]

Thanks @shannonhochkins I was making a stupid mistake. Now everything works at least under http. Thanks again and looking forward to see what's coming!