Identity Widget Defaulting to Display None

When the identity widget loads for an email or invite, it is automatically defaulting to “display: none” and so the widget never appears. If I manually change it to “display: block”, boom, there it is. Furthermore, if a user presses the “Login with Netlify Identity” button BEFORE the iframe has completely loaded, it then will default to “display: none” and it’s unable to open unless you manually change to “display: block”

How it loads:

Once it’s manually changed:

I don’t have the widget loading twice, as I previously thought this may have been causing the error, but the error persists.

Is there any solution for this? Am I loading the widgets or the page incorrectly?

TLDR: The Netlify Identity Widget, if loaded in a script tag, does not work in .svelte pages. Use just plain .html files.

Found a solution. I am building this site using SvelteKit and the static adapter. I was building the admin page as a .svelte page. For some reason that is too complex for me to understand, this combination was breaking the identity widget even if though the .svelte page is compiled to HTML in the build process. By switching the file to a .html everything began working as normal. With Svelte’s static adapter, plain .html files and .svelte pages are access and complied (?) in the same fashion, just treated differently at build time, so if you’re looking how to use a .html file in SvelteKit just use it and it will probably work just fine.

1 Like

Hey there, @hayden :wave:

Thanks for coming back and sharing your solution with us! This will definitely be beneficial for any future Forums members who encounter something similar. :netliconfetti: