Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support external step for login flow #23204

Open
wants to merge 7 commits into
base: dev
Choose a base branch
from

Conversation

allenporter
Copy link
Contributor

@allenporter allenporter commented Dec 7, 2024

Proposed change

Support external step for login flow for use by authentication providers for custom components. This is an update on #14471 that addresses some of the PR feedback, and is also simpler, reusing more of the existing login flow and is based on the config flow external steps.

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Example configuration

Additional information

  • This PR fixes or closes issue: fixes #
  • This PR is related to issue or discussion:
  • Link to documentation pull request:
Screen.Recording.2024-12-07.at.11.18.46.AM.mov

Checklist

  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

super.firstUpdated(changedProps);
window.open(this.step.url);
window.addEventListener("message", async (message: MessageEvent) => {
if (message.data.type === "externalCallback") {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we do a check for origin and source of the message?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, sounds good. I have this working for the window.open (following what the previous PR did). How do you track the source of the button that opens the window above?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont think there is a way with just an anchor link. You could make it a click event and open the window programmatically with window.open. Hoping that will not cause issues with popup blockers.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK -- I changed this to use a button to run the same code thats run when first loading. Perhaps that is reasonable...

window.addEventListener("message", async (message: MessageEvent) => {
if (message.data.type === "externalCallback") {
if (
message.origin === window.location.origin &&
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The message is sent from the external site right? So the origin would something like this.step.url?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It appears to always be the home assistant url e.g. http://localhost:8123 when i'm testing, and not as the external IDP.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants