feat: Email Verification upon Signup

[solderq35]

When joining new team

[solderq35]

Demo Vid: https://youtube.com/shorts/e6q_DAK7Q_g

Timeout didn't quite work so just clicked "join team" twice I think

[solderq35]

TODO:

• Find a better way to update currentUser.emailVerified
• Use Alert.js file for alert or dialogs, don't use console.error

[solderq35]

I think the current changes in Auth.js are extraneous and can be removed

[FrankreedX]

Find a better way to update currentUser.emailVerified

Maybe onAuthStateChanged?

[solderq35]

New Demo Vid: https://youtu.be/yzMtmMPuigU

Intended Workflow: New User signs up (email verification sent) > User taps "Join Team" button (or taps "Resend Verification Email" if needed) > User is logged into the app and redirected to homescreen (onIdTokenChanged asynchronously watches for when the email is verified on the user server side)

[solderq35]

PS does the "join team" and "resend email verification" buttons need debouncing? I noticed that "join team" seemed to trigger multiple times sometimes (like 3 times in a row rapidly, hence janky navigation after tapping "join team" button).

[FrankreedX]

PS does the "join team" and "resend email verification" buttons need debouncing? I noticed that "join team" seemed to trigger multiple times sometimes (like 3 times in a row rapidly, hence janky navigation after tapping "join team" button).

Yes, and it will be addressed in either debounce 2 (if simple) or debounce-n (if complex) once this PR is merged

[FrankreedX]

Works. I encountered an issue where verification success is printed twice.

[FrankreedX]

What is your plan to add button spinners for all of this PR's operations?

[solderq35]

What is your plan to add button spinners for all of this PR's operations?

Assuming that "Join Team" button is hidden to user until email is verified, I guess we could make the "Resend Verification Email" button show a spinner animation until the email is finished sending?

For verified users, I suppose the "Join Team" button could show a spinner animation until all async operations were awaited (firestore operations etc)

[FrankreedX]

Ye it took a very long time for me when I tested it. It's helpful to know that the app received my input and is doing work instead of just trusting it.

[solderq35]

07-25-2024 Progress

• Pulldown refresh
• Hide "join team" button until user is verified?
• spinner animation ("Loading") while Verification email is being sent
  • 08-10-2024 Edit: The last 2 tasks should be done as of today

Screenshot

[solderq35]

Fixed the below signout error (see screenshot), although not sure if this will cause excess re renders etc, maybe there is better solution.

[solderq35]

Kind of got loading spinner working for sending verification email, and also kind of fixed bug where it was inconsistent if the new user would be directed to chooseTeam screen upon signup.

TODO:

• Cleanup code / log statements
• Maybe switch everything to auth.currentUser.emailVerified as it seems to work more reliably (given persistent login credentials)

[FrankreedX]

you gotta set the "textColor" for the spinner to change

[solderq35]

Changed spinner color to white:

I removed the dependency array from the unregisterAuthObserver useEffect due to it bugging out.

Basically you need to call user.reload() in order for the updated status to register. If you also put auth.currentUser (or whatever) in the useEffect dependency array, it causes an infinite feedback loop.

So now it does work but the user has to manually pulldown to refresh after they verified email

Maybe helpful for the useEffect / emailVerified / onIdTokenChanged issue:

• https://stackoverflow.com/questions/76961591/firebase-is-there-any-observer-to-watch-for-change-in-email-verification-status
• Successful email verification should trigger the onAuthStateChanged function firebase/firebase-js-sdk#3817
• https://stackoverflow.com/questions/53508364/update-the-email-verification-status-without-reloading-page

[solderq35]

I think the useEffect works as intended now (it automatically detects when you verified email and then shows "Join Team" button afterwards).

To resolve the issues mentioned in my previous comment, I had to set up a setInterval to reload the user and check for updates every 10 seconds.

Demo Video (read Youtube video description): https://youtu.be/KpHN71xhFfE

[solderq35]

PS: I tried putting showSnackBar in the useEffect dependency Array, but it caused the "Email successfully verified" popup to not go away for some reason later, especially if I had waited about 20 or 30 seconds after signup to verify email.

So I am leaving it out of the dependency array for now.

[Gehrkej]

Overall, the functionality works well as I am able to verify my email and sign in. We will want to figure out the Auto send functionality before merging. Additionally, for DX, we will probably want an easy way to disable this for testing purposes as merging this in will limit the amount of accounts we will have access to.

[FrankreedX]

Good job on this! Especially the refresh in the background stuff. It feels really responsive! I only have minor complaints, and certainly have my work cut out to merge this with my stack of PRs.

[solderq35]

Had to change the context/Auth.js useEffect from onAuthStateChanged to onIdTokenChanged in order to get currentUserVerified / setCurrentUserVerified to work as intended. Hopefully that doesn't cause too many re renders etc.

[FrankreedX]

lgtm

Changes are resolved (I think)