firebase / firebase/firebase-js-sdk

FR: Fix Sign In With Email Link sendSignInLinkToEmail redirect page - shows meaningless card with progress bar

Open
#7,114 2 comments 1 reaction 0 assignees View on GitHub
api: auth feature request needs-attention v9
Dominant language
TypeScript
Stars
5.1k
Forks
1k
Avg merge
2d 21h
Merged PRs (30d)
37

Description

### [REQUIRED] Describe your environment

Operating System version: Window 10 10.0.19044
Browser version: Version 110.0.5481.178 (Official Build) (64-bit)
Firebase SDK version: 9.17.2
Firebase Product: auth

Can we improve the UX/UI for the Sign In With Email Link redirect page?

When a user clicks the link, they are presented with meaningless card that has a progress bar. The UI presented does not match our target UI nor does it offer any value to the user. At least the progress bar at the top of the page suggests the page is loading.

From the Material Design guide:
> Cards are surfaces that display content and actions on a single topic.
>
> They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

![image](https://user-images.githubusercontent.com/24360902/224440107-5d7e64ac-8a37-4f55-97f4-3a04631811dd.png)

Would love to see this improved. Currently developing for a corporate client and I have to tell them to just accept this or we have to go roll our own solution. We spend so much time agonizing over lighthouse scores, UX, UI and accessibility, then this seems like a terrible blotch on our app that everyone sees and we can't fix.

At the very lease it would be great to remove the card and leave the page progress bar. Other possible solutions:
- Page only showing a loader that we can set the color of to match theming
- Allow us to upload a html file that is presented.
- Do a straight redirect.

Thanks so much for considering. Absolutely love how easy you have made auth in Firebase.

#### Steps to reproduce:

1. Implement Sign In With Email Link auth into test app
2. Deploy
3. Sign in
4. Click link sent in email.
5. Page will load

Only happens in production (not emulators)
#### Relevant Code:

```
nil
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.