search

firebase / firebaseui-web

FirebaseUI is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Firebase SDKs to eliminate boilerplate code and promote best practices.
https://firebase.google.com/
Apache License 2.0
4.58k stars 1.06k forks source link

Sign in buttons and Sign form appear in the same screen #845

Open shivna-2020 opened 3 years ago

shivna-2020 commented 3 years ago

Steps to reproduce:

  1. Click on [Sign in with email]
  2. Choose autofill your email address
  3. The screen gets split horizontally with the sign in buttons in the top and the sign in form in the bottom

FIREBASE-UI-SPLIT-2 FIREBASE-UI-SPLIT-1 FIREBASE-UI-SPLIT-3

xil222 commented 3 years ago

Hi @shivna-2020, thanks for your feedback.

This looks like 3 different combinations of components during the sign in process. My first guess is this could be a general issue of a component not getting removed when users click Next button after autofilling the email.

Here is what I tried to reproduce the issue on my iphone IOS 14.5:

  1. Click Sign In With Email and enter information for signing up an account.
  2. Sign Out.
  3. Click Sign In With Email.
  4. Click on the Email line, select the autofill email address appearing in my keyboard.
  5. Click Next, but I am only getting one sign in page with Email filled as expected.

I also tried on web, ipad, and simulator but getting the same result. Therefore, this could be a corner case. It could be helpful if you could provide some more details like any actions you've done ahead of this.

Since I have not seen any report of the same issue. This could be only related to current version FirebaseUI v.4.8.0. And all changes made to this demo app on FirebaseUI v4.8.0 is all related to the disable-sign-up button. I'm not sure if that could remind you of anything.

Thanks for your time.

saurabh-ns commented 3 years ago

Hi @xil222

This issue is not consistent and happens randomly (it won't happen some time by following the same steps that is used to reproduce it). Use Safari web browser in iPad iOS v14.5 and kindly follow these steps 4-5 times to reproduce this issue and I hope you might see it happening

Steps to reproduce:

  1. Go to https://fir-ui-demo-84a6c.firebaseapp.com
  2. In Configuration section, select Password as Email signInMethod.
  3. Click on Sign in with email
  4. Choose autofill your email address from keyboard

The screen will have additional SignIn component.

xil222 commented 3 years ago

@saurabh-ns Thank for explanation. I upgraded my iPhone to iOS v14.5 yesterday and did run into similar UI issues on another fitness app(2 components appear on same page at some point). These issues could be specifically on this version. While waiting for this version settle down, I'll try to go over the steps you mentioned later on.

xil222 commented 3 years ago

I think more information would be appreciated if someone else is running into the same issue.

saurabh-ns commented 3 years ago

Here is a video recording

Our Product https://user-images.githubusercontent.com/81948950/118235837-e723e600-b4b2-11eb-8b5a-a510d07e3121.mov

fir-ui-demo https://user-images.githubusercontent.com/81948950/118237645-23f0dc80-b4b5-11eb-879c-565d3d15b601.mov

xil222 commented 3 years ago

Ok, thanks for that! I'll check this out.

weixifan commented 3 years ago

Thanks for the report -- I have filed an internal issue b/188427104 to track this.

xil222 commented 3 years ago

Thanks for the video, I borrowed an Ipad from my friend yesterday, and finally be able to reproduce that.

Before coming up with a code solution, to prevent other users running into the same issue, I summarized a list of prerequisites, all of them are needed in order to reproduce the same issue. In other words, if you do not meet any one of those below, then everything is good.

Reproduced in: https://fir-ui-demo-84a6c.firebaseapp.com/

Prerequisites:

  1. A safari browser.
  2. Ipad or Iphone with a home button.
  3. Set up Settings -> Passwords -> Autofill Password -> Enable icloud KeyChain
  4. After sign up success once in FirebaseUI, sign out, remember the password specifically for the website, only through this, you would see Settings -> Passwords with account binding to fir-ui-demo-84a6c.firebaseapp.com website.
  5. Turn off the webpage(swipe away), then reopen the website https://fir-ui-demo-84a6c.firebaseapp.com/ , click Sign In With Email and following video recording on above.

I'll keep posting this, if this is a code-related issue, I'll find a way to fix this.

xil222 commented 3 years ago

An update on this bug:

In our special case described in the video When tapping Sign In with Email, and tapping the blue bar 'Use xxx.com' at the bottom of the screen:

Log in to fir-ui-demo-84a6c.firebaseapp.com? Use some@example.com

This will trigger both Cancel button and Next button at the same time which results in the issue on above.

Since the blue bar is neither controllable on our end nor related to any part of the code. I would say this IOS autofill functionality based on specific website is not compatible with our current FirebaseUI design. The only way to get rid of it is removing the Cancel button, which there're more downsides with it.

Apologize for not able to fix this for now. My suggestion at this moment to users still using autofill on Safari in IOS devices: Go to Settings -> Passwords -> ‘+’ on top right Manually add random website(but not your website login page), put down user name and password to log in and save.

Once using FirebaseUI to sign in, click Sign in with Email, and use below to select for your account and sign in: autofill

I'll still leave this open before coming up with a final decision on this. Feel free to add more comments below.