Is it possible to build custom auth flow consisting multistep form that requires image upload, phone no. verification, etc. using React and Firebase? - reactjs

I want to build a multistep registration Auth flow where these are the required steps and flow:
In the first step User verifies mobile number with otp.
In the second step User uploads image of some ID proof.
In the third step User fills some extra details such as name, email, address, etc.
Finally user submits the form.
Upon receiving the form details an Admin(having direct access to firebase console and firestore) manually checks the details , if they seem real he/she sends a newly generated Id(can be email or phone no.) and Password (created by admin) to the User through email or sms with which he/she can finally login.
I know it is complicated and might not be possible with firebase but I still want some insight and answer to my problem. Thank you.

Related

Amazon Cognito (with AWS Amplify + React): Best way to make signups possible only through one-time signup links?

I am writing a web application that will have users outside of my company, but should not have a general "sign up" page. The flow that I am trying to build:
We send new users (customers who have signed a contract with us) a single-use link (e.g. service.com/signup?uuid=[uuid])
The link leads to a page where they set their password. This completes their account creation.
The email for the account is already defined, and connected to the link that was sent to them. For this reason, an email confirmation should not be necessary.
There is also a value for each account called "role", which is not user-facing. When we define a new user, we define a new "role" with it. The UUID of sign-up link is connected to both an email address and a "role".
My current implementation works like this:
One of our existing internal databases has a table of uuids and their corresponding emails and roles. When we want to create a new user, we add a new row with their email and "role". This triggers an invite email that includes the signup link.
The web application, which is written with React + AWS Amplify, shows a signup page built with Amplify's Authenticator UI for React. Custom JS prefills the email field and makes it not editable.
The user sets their password, and behind the scenes React calls a Lambda function to get the email address and role associated with that link. The new account is created with the email, role, and provide password. The user doesn't see any UI related to the "role" because it is only for internal use.
I am aware that this may not be the wisest way to do this. I have a feeling that new accounts should be created by us via Cognito first, and the user should be sent a link to set a password for their already-created account. I don't know the best way to do this, though, especially if I would like to keep the ability to make the signup process more complex (e.g. requiring 2FA, so the user needs to provide a phone number as well as a password and then verify it).
There are several ways I can think of approaching this set of problems, but I feel like my knowledge of AWS is not developed enough to have an instinct for the "correct" way. Is there something I should be doing differently?

Firebase, Changing User password via Email with unique password requirements

Currently, Firebase offers the option to send an email to a users email who wishes to change their password. Unfortunately, Firebase does not allow you to edit their password requirements which I believe is locked at requiring only 6 characters.
For many people this is inadequate and insecure.
I recently made an application that allows users to create quizzes either for themselves or for others. In this application, I stores personal information of my users and I wanted to make sure that their accounts were secure so I required more from my passwords. Unfortunately, when a user wishes to change their email, the default Firebase function does not keep my security which leads to confusion as a user can change their passwords according to Firebase's lax constraints but then they still couldn't log in because they used an invalid password. (I blocked invalid passwords from the text box before even checking with Firebase).
After I encountered this error, I came to StackOverflow for help to see if anyone else had this issue and came up with a solution. Unfortunately, I was met with harsh criticism and harassment by users who claim to be Firebase officials and Administrators who did not care about my question.
Then, I after a week of research and testing, I found the solution using React and 3rd party libraries to handle this.
Please, see my answer below and if you have a more creative solution, I would be interested in seeing that as well.
To solve this problem, the only answer is to create your own mailer service with your own basic mailer service, host website, and API.
What you need:
An application which uses Firebase.
A hosted API which uses Firebase and a 3rd party Mailer such as Node with NodeMailer - hosted on Heroku
A React app which can communicate with the API
What I did:
First, I created my API which accepts calls from my specified IP addresses. This API can receive requests to reset a password when the password is known or unknown. When the password is known, I send an email to the user using NodeMailer and I send a special HTML file so the email looks official. It is quite easy to copy the layout of Firebase's emails if you wish.
More Info can be found here: https://nodemailer.com/message/
Then, I created a React App that is hosted on Heroku. When the user clicks a link in the email, it will send them to this website with the required information in the query. This app, much like when the Firebase link is clicked is just a simple text box and submit button. However, now you can customize it to require password confirmation with a second text box. You can also add a company logo and custom colors so it isn't so HTML 1 looking like the link you see from Firebase. Most importantly, you can now control the password that the user enters to add your unique requirements.
On submit, the app will send the new password, username and old password if available to the API.
If you do not know how to create a React App or a Node API, you can see a detailed tutorial here: https://www.techandstartup.com/tutorials/build-api-with-node-express-and-mongodb
Finally, the API can log into the users account if a password is present and then change the password. Detailed steps can be seen from: https://www.codegrepper.com/code-examples/javascript/firebase+user+change+password
If a current password is not present, then the API can delete the user and recreate it with the desired password. Deleting a user can be seen: https://www.codegrepper.com/code-examples/javascript/firebase+delete+user Then you simply recreate a user. Example code: https://www.codegrepper.com/search.php?q=firebase%20createUserWithEmailAndPassword
With these steps, you can now send a password reset email to a user. The email will be completely unique as you will be designing it yourself. The password will be to your exact specifications as your React App will control the data on submit. And the page itself will look much more user friendly as it's not the default Firebase page.
Hopefully this helps you or your company with working around the Firebase reset password with email function. I am still holding out hope that another user may have a more elegant or basic solution than this as creating an API and hosting a website just for 1 function is not appealing in many cases.

CRUD functionality firebase

i'm new to firebase and having issues understanding how to implement somethings. I have implemented the register and logIn part of the app but am having issues understanding how to update the user details.
Here's the flow of the app:
A user can signup with email&&password or via Oauth such as google, github etc.
After registering, the user is routed to his profile Page with informations such as name, image, email, password, bio, phone number as seen in the image below(the data there at the moment are dummy text).
At the onclick of the edit button, the user can then update this profile fields by himself/herself and make subsequent changes.
So my issues is; Once the user registers with an email and password, the img, bio, phonenum would be empty because they have not been created. How i can implement the app such that the user can add these details and also make subsequent updates?
Any suggestion is much appreciated, thanks

Storing data from Input fields into database React-Express-Postgress

I'm trying to make a web app which lets you enter it once via email which is a simple input field with a button for submission. After entering the email the user will either be allowed in if the email has never been entered before or will be denied access if the email has been used previously. As I'm new to both fullstack and ReactJS I was wondering what would be the best approach for doing this?

Track user acquisition on exit - Google Analytics

Is it possible to get a current users acquisition channel ( Facebook, Glassdoor, etc... ) and append it to a string during an onSubmit?
We have a careers page on our site with a search form that when filled out and submitted takes the user to a 3rd party software we use for our job listings. What we would like to do is track the users that submitted that form so we can see what channel lead to them looking for a job.
Ex:
User visits our Facebook page and clicks link to our site. Once on our site they fill out the job search form and is sent to our jobs listing site. We use JS to create the onSumbit url and fill it with the fields they answered and would like add another "acquisition" parameter to it with said acquisition.
You can store the referrer in a cookie if this is different from the domain of your website. In this way you can know where the user came from and use that value in the string you send to submit.

Resources