[Fixed] How to avoid the extra modal popup with anvil.google.auth.login()?

Bug Reports
1

What I’m trying to do:
Allow users to sign in and up with google.

What I’ve tried and what’s not working:
The anvil.google.auth.login() and signup() functions are creating an intermediary pop-up.
It is hard to style and seems unnecessary. Is there any way to avoid it?

Picture for reference:

image
image617×580 23.2 KB

1 Like
2

I suspect you’re hitting a failsafe that anvil has in the user’s service for google authentication.

If you’re button event handler might cause the google sign in to fail silently, anvil falls back to the modal you’re seeing.

Typically the failsafe is invoked if you’re button handler does a server call prior to calling anvil.google.auth.login()

From MDN (Window: open() method - Web APIs | MDN):

Modern browsers have strict popup blocker policies. Popup windows must be opened in direct response to user input

In other words, if your button handler is doing a server call prior to calling anvil.google.auth.login(), then the browser will not open the authentication window popup because it is no longer in direct response to the user clicking the button.

If that doesn’t seem like what’s happening then we’ll need a little more information to help.

1 Like
3

@stucork

Thanks for your reply to this issue.

I am also getting this behaviour, it is weird since I do not do any of the server calls prior to the login click.

Also, I’ve noticed that if I invoke the login_with_google from a button click, all is well. However I have a custom html form, and invoke from there, I get this weird behaviour.

Any help is appreciated.

4

Yes, that sounds about right. The fail safe is based on anvil button/link click handlers.

I’m moving this to bug reports, and we’ll get that fixed so that the auth window popup will be invoked when using custom buttons that run synchronously.

For now, if you’re able to use an anvil button, all should be well, and we’ll report back when we’ve fixed this issue.

1 Like
5

My button code is as follows (I removed tailwind to avoid confusion):

<button onclick="anvil.call(this, 'sign_in_with_google')">
    Sign in with Google
</button>

in anvil python it is:

  def sign_in_with_google(self):
    email_addr = anvil.google.auth.login()
    print(f"User logged in as {email_addr}")

Hope this helps!

1 Like
6

Temporary fix:

Inspired by @augustas.volbekas I created a slot in my custom HTML and dragged a button in.
This way it works instantly. I am sure it can be done in an acceptable way to make it look good. Possibly a link with the same classes on it.

Picture for reference:

image
image699×702 50.3 KB

Code:

<div anvil-slot="normal-slot" ></div>

then button component is dragged in and an onclick event is attached:

  def button_1_click(self, **event_args):
    email_addr = anvil.google.auth.login()
    print(f"User logged in as {email_addr}")
2 Likes
7

@arkulinskis
This is really cool; I hadn’t thought about solving the issue this way.

I found another workaround that works for me: adding a custom button to an Anvil Link component. Then, it works without any issues.

2 Likes
8

This should now be fixed and work as expected

1 Like