Problem using the dashboard in companion app

[jenseo]

Describe the bug
When using the HAKIT addon to add my dashboard to the sidebar, I get Invalid redirect URI as an error message when I try to visit it in the companion app . This when accessing the local instance.

When I visit the cloud instance through Nabu Casa, the dashboard loading animation spins up, but it never renders the dashboard.

To Reproduce
Steps to reproduce the behavior:

1. Deploy your dashboard to Home Assistant.
2. Install the HAKIT addon and enable a link to the dashboard in the sidebar.
3. Open the companion app on local wifi and get the error message.
4. Turn wifi off on your phone and see the infinite loading spinner (at least when running on Nabu Casa).

Additional context
I'm thinking this might be a problem with the lack of a local SSL certificate in my case. Since I run Nabu Casa when being out of the house, I haven't bothered adding a local SSL certificate.

I'm thinking maybe the allowNonSecure param might be doing something fishy perhaps, when it's loaded over SSL in the companion app? Although then it should work when running it on the local network I guess.

A bit puzzled here, not sure if this is the best approach to add the dashboard to HA? Is the addon still the suggested approach? I was thinking maybe I could create a custom panel for it otherwise, but haven't explored it yet

[shannonhochkins]

Hey man, honestly there's so many ways to add it, I host through the http server and just open it directly on my phone with a bookmark link, that way I Don't have to open the companion app at all

I've also got this rendering through a custom card, and the addon is working just fine for me

Do you see any logs either in the addon or the console of the browser that indicate what the issue is?

[jenseo]

I'm thinking it could be the iframe inside the iOS app. Will think of another approach, I like the way the companion app switches between internal/external url so will see if I can find a solution that works. Will let you know for future questions 😊

[shannonhochkins]

I'm thinking it could be the iframe inside the iOS app. Will think of another approach, I like the way the companion app switches between internal/external url so will see if I can find a solution that works. Will let you know for future questions 😊

I have tested it with my wife's phone too and it is rendering and logging in fine, it might benefit you to check your logs within HA it might point you to the solution, I also remember another issue that was kind of related to this which might help you, maybe have a flick through closed issues and see if something stands out!

[jenseo]

I've seen some threads where people have problems with iframe in the companion app. Will try to do some remote debugging when I get the chance 😊

[shannonhochkins]

Last time this was reported to me through discord by one of the other contributors - he said Turns out there is a setting on the companion app where you can set the server url It was set to my phone and now I changed it to home assistant and things seems to be working good, I'll check if everything else still works, but so far so good

But then again, mine is set to my phone and works fine :/

[jenseo]

I don't get the URI error when changing from my homeassistant.local url to the ip address of the HA instance in the companion app, not rendering yet though. I'll continue investigating tomorrow evening 😊

[jenseo]

I believe this can be the solution for the issue, I'm hoping they will release a new patch soon :)

home-assistant/frontend#19884

[shannonhochkins]

Nice! Looks like it was merged, that entire method seems extremely over simplified but i guess they don't care, it's been merged haha - i assume this will go out with the next patch - glad it wasn't something i've done wrong :D

[jenseo]

A small update on this one. After upgrading to the latest HA version, I now get to a login screen when navigating to the dashboard inside the companion app, but after a successful signin I end up in a 401 unauthorized state. Thinking there might be a problem with storing the credentials or similar within the app/iframe combination. It's a bit odd that it works in the browser though, where I don't have to sign in. Maybe iOS restrictions?

[shannonhochkins]

I'll have to update when I get a chance, things have been a bit wild for me with work / life, I'm not exactly sure but I'll check the addon on my wife's phone after we update, after all, all it does is set the token to local storage and attempt to re-read, if you're getting a 401 that's even weirder that the token isn't authenticated, I'll check when I can man!

[jenseo]

No worries, I'll continue to investigate on my end. It does work in the companion app on Mac I just realized, so this seems to be isolated to the iOS app. Might be that Apple is a bit more restrictive there perhaps. Otherwise I'll try and kill the server in the app and set it up again to see if that makes any difference

[shannonhochkins]

Just tried and can confirm its not letting me get passed login on my wife's phone either anymore, I'll have to remote debug when I get a chance if you've not solved it by then!

This was working, but as we know, software changes and dependencies change independently, should be something silly that may not be supported on IOS!

[jenseo]

I've been experimenting with this this weekend and my closest attempt has been to create a custom card that mounts the react app as an es module.

(I think that approach would be beneficial, since one could run a normal dashboard in panel mode and thus be able to make it the default dashboard).

Unfortunately, in the companion app I once again get to the login form, but once I'm logged in, I get thrown back out to the login form again.

Has been a bit hard to debug since it's from within an app, but I guess the problem is that the storing of credentials doesn't behave like in the context of a browser.

Since we do have a valid session in the app itself, maybe a possibility could be to modify the HassProvider to optionally accept props, since I believe the hass object of home assistant contains the authorization stuff. But I haven't had time to look into that.

[shannonhochkins]

Thanks for diving into this more, I do have an experimental addon that can render the Web app in a card, that is working on my wife's phone

I haven't had time to look at it man I've been quite sick but I will when I can dude!

[jenseo]

Thanks for diving into this more, I do have an experimental addon that can render the Web app in a card, that is working on my wife's phone

I haven't had time to look at it man I've been quite sick but I will when I can dude!

Maybe this experimental addon is not ready for the real world, but if you want, you could perhaps privately share the code with me, might be that I can find some time during the evenings this week to experiment with it!

[shannonhochkins]

Sure, I'll happily share it with you, the idea was to have card on a panel that would render full screen, and even cover the toolbars etc with another button to expand it / collapse it, just never really got any further with it 😉

[shannonhochkins]

Just added you as a collaborator on the repo - https://github.com/shannonhochkins/hakit-designer

Honestly, this isn't anywhere close to production ready, the difference being this isn't rendered within an iframe, but rather on the lovelace dashboard itself

The idea here was to basically have this card swap between a few different states

1. in "non fullscreen" mode, the card should render the same size as the lovelace view
2. in fullscreen mode, it would cover the entire application, and there would need to be a way to persist this, potentially a query string or local storage
3. when editing the lovelace code / dashboard, it should probably not render the web-application in this state to avoid weird ui issues

[shannonhochkins]

If you like, I can write up some proper acceptance criteria with the goal of this, even if you get it part of the way there, we might be able to deprecate the addon if the car works better in the long run

[jenseo]

If you like, I can write up some proper acceptance criteria with the goal of this, even if you get it part of the way there, we might be able to deprecate the addon if the car works better in the long run

Of course, always good to align!

[shannonhochkins]

Installation and Configuration

1. The product can be installed either via Home Assistant Community Store (HACS) or manually, providing flexibility for users with different preferences.
2. Upon installation, a clear set of instructions is available to guide the user through setting up and configuring the integration, ensuring a smooth setup process.

HTML File Path Specification

1. The user must be able to specify a path to an HTML file, which the card will use to render its content. This path specification is already implemented.

Edit Mode Behavior

1. When the Lovelace dashboard is in edit mode, the HTML content specified by the user should not render. Instead, a placeholder message should be displayed, indicating "Content not available in edit mode" to clearly communicate the intentional absence of the HTML content during dashboard editing.

Normal Mode Rendering

1. In the normal (non-edit mode) view, the card should seamlessly render the content of the specified HTML file, making the entire view of the Lovelace dashboard resemble a standard dashboard presentation. This includes proper alignment, scaling, and interactivity as expected from a native Lovelace dashboard component.

Full Screen Mode

1. There should be a mechanism (such as a button or a query string parameter) that enables the user to switch the dashboard view to full screen, hiding the Home Assistant interface elements. This feature aims to provide an immersive dashboard experience.
2. A clear and intuitive method must be provided to exit the full-screen mode, returning the user to the standard dashboard view with Home Assistant interface elements visible.

Path Validation

1. The integration must include redundancy checks to verify that the specified path to the HTML file is valid and that the file exists. This check prevents errors and ensures a smooth user experience by alerting the user to path-related issues before attempting to render non-existent content.

Rendering and Style Isolation

1. Since Lovelace cards are not rendered within iframes but rather within shadow DOM elements, it is crucial to ensure that there are no style or rendering conflicts between the HTML content and the Home Assistant interface.
2. The integration must implement measures to prevent inheritance issues, either through the use of shadow DOM elements or other effective solutions, ensuring that both the HTML content and the Home Assistant interface maintain their intended appearances without interference.

Compatibility and Performance

1. The integration should not significantly impact the performance of the Home Assistant interface or the loading time of the dashboard. Performance benchmarks should be established to ensure that the integration operates efficiently.
2. Compatibility with the latest stable version of Home Assistant must be maintained, with regular updates provided as necessary to address compatibility issues resulting from Home Assistant updates.

Hopefully this is clear enough - obviously i don't expect you to do all this, but if you want to, go for it!

[jenseo]

@shannonhochkins Has been a busy week, but I just found some time to clone the repo and check it out. For local development, I found a way to be able to skip the copy/paste steps.

1. Run the watch command locally
2. Add the following resource as a module under http://your-home-assistant-instance:port/config/lovelace/resources (or add it via yaml):

http://0.0.0.0:5000/hakit-designer.js

Then it will be loaded from the dist folder but served from the rollup dev server :)

[shannonhochkins]

Oh that's wicked, nice find man I never really was able to spend too much time on it!

That will make the experience much nicer for sure!

[shannonhochkins]

I haven't forgotten about this - been very busy with personal life and will get to this soon!

[shannonhochkins]

Going to close this for now @jenseo I've made a bunch of refactors to the HassConnect / Provider around authentication and it should be resolved assuming the iframe is of the same origin and or storage is not full. Release notes

[yann510]

Awesome work, for some reason my other fixed had stopped working, I'll give this a try shortly
I've read the release notes and there's ton of good stuff in there 🚀

[shannonhochkins]

Awesome work, for some reason my other fixed had stopped working, I'll give this a try shortly
I've read the release notes and there's ton of good stuff in there 🚀

Do you mind explaining what has stopped working for you?

[yann510]

Accessing the dashboard from my tablet, but I can say that after updating to the latest and greatest, everything now works very well 🚀

[shannonhochkins]

Perfect! Sounds like the adjustments made to the auth flow fixed it for you! Thanks for reporting back!