Phone verification setup

[J-C-L]

Summary

Added one time phone verification using Firebase auth, as described in Issue #2013.

Changes include:

• Added phoneVerified field in Firestore profiles doc.
• Updated Firestore security rules, so only the cloud function/admin SDK can set phoneVerified
• Added firebase function completePhoneVerification to update phoneVerified
• Temporarily Added Get Verified button on Edit Profile page, so that we have a UI element to test the verification flow, which changes to "Verified User" plain text once phone number is verified. [This will be overwritten with further UI changes]
• Added phone verification modal for users to enter phone number and then the verification code.
• Added calls to firebase auth to do the actual verification
• Added error handling for various auth errors

Flow diagram and implementation details here:

Additional changes made on on firebase console (dev):

• Enabled phone as a sign-in provider
• Set region policy to allow US only
• Set up phone number:
  Phone number: +1 650-555-1234
  Verification code: 123456

Checklist

• [ Y ] On the frontend, I've made my strings translate-able.
• [N/A] If I've added shared components, I've added a storybook story.
• [N/A] I've made pages responsive and look good on mobile.
• [N/A] If I've added new Firestore queries, I've added any new required indexes to firestore.indexes.json (Please do not only create indexes through the Firebase Web UI, even though the error messages may reccommend it - indexes created this way may be obliterated by subsequent deploys)

Steps to test

Can test using the emulator, when run yarn dev:up
Step 1:
Start local environment by running yarn dev:up
Create a new user by going through the sign up process on the local site
(usually http://localhost:3000/)

Step 2:
Open the firebase emulator > firestore.
(usually http://localhost:3010/firestore/)
Find the profile of the user you added.
[Can do this by going to profiles. Filter for field: fullName. Should be only a few documents. Click through to find the right one. Notice there is no “phoneVerified” field. Leave this tab open in your browser. After we do the verification, we’ll confirm here that there is now “phoneVerified” field set to true.

Step 3:
Back pin the local MAPLE site, navigate to the edit profile page by clicking the dropdown in the top right with the person icon.
There should now be a “Get Verified” button on the right
Click it.
A “Verify your phone number” modal should pop up.
Enter 650-555-1234
Search in your TERMINAL for
To verify the phone number +16505551234, use the code
The pop-up should have changed to now expect a verification code. Enter the code found in your terminal log.

Step 4:
The popup should have disappeared.
Confirm that the button on the right in the Edit profile page has been removed and now there is static text that says “Verified User”

Step 5:
Back in the firebase emulator, firestorm page, confirm that the profile document for your user now has ““phoneVerified: true”
Can also look at firebase emulator > Authentication and see that “provider” column for the expected user now shows both email and phone

Step 6:
TESTING invalid number:

Log out and create a new user.
Go to Edit Profile and click Get Verified
Try entering a phone number that is too short.
Confirm that you see the error message "Please enter a valid phone number”

Repeat with a phone number that is
-too long
-starts with a 1

Step 7:
TESTING phone number already in use.
Log out and create a new user.
Go to Edit Profile and click Get Verified
Enter the same phone number you used for the already verified account and enter the code given in your terminal (as in Step 3)
Confirm that you see the error message "This phone number is already linked to another account."

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
maple-dev	Ready	Preview, Comment	Mar 11, 2026 0:52am