Bug: Cannot login or signup due to a Material UI error when using Spoke inside an iframe

[itsjoekent]

Describe the bug

Hello! I'm working for a client that wants to embed Spoke within an iframe as part of a broader volunteering site.

I have a development version of Spoke running on Heroku, and have no issues logging in or making an account when I go directly to the Heroku app in my browser. However, when I embed this Spoke deployment within an iframe and login with the same credentials that previously worked, I get a strange error.

Error: <circle> attribute r: A negative value is not valid. ("-1.5")

A quick google search yields this seems to be something that can happen when using Material UI. I've tried digging through the Spoke source code to pinpoint where this negative attribute value is being applied on the login+signup page, but so far no luck.

To Reproduce

1. I can't give out the URL for the application I'm working on just yet, but I created a CodePen that has an iframe with our development Spoke deployment. If you click the signup tab and create a new account, then check the JS console, you should see the error.
2. If you then go directly to the development Spoke deployment in a new browser tab and attempt to signup or login with the account you just created, it should work fine.

Expected behavior
It should login when provided the proper credentials, regardless of whether it is in an iframe.

Platform (please complete the following information):

• OS: Mac Catalina 10.15.6
• Browser: Chrome Version 84.0.4147.125 64bit
• Desktop or Mobile: Desktop
• Version: 8.0

[Frydafly]

not sure whether potential future material ui upgrade might address this issue, but pinging in @stefanhayden just in case!

[stefanhayden]

I have seen that error when generally using spoke. I think it is from material-ui and as far as I can tell seem benign. My hope was that error will go away with a material-ui upgrade but also should not stop you from logging in.

[Frydafly]

Thanks @stefanhayden!