React Native reset password with Firebase using the oopCode as a verification code in my app - reactjs

Currently I know you can send a resetPasswordLink that will allow you to reset the password in the browser by default. I believe firebase uses the oopCode to verify the user. Is there a way to send a reset password link that within the email template I can provide an actionCode the user can copy and paste into the app as verification which will then allow them to move on to the next screen and update their password?
Here is the functionality I'm looking to accomplish:
first screen
second screen
third screen

Related

Best Practises for auto-login on Ionic Capacitor React

Is it possible to auto login users when they open the app after their first login?
I'm not sure what is the best way to implement auto login.
One of the best options to me is to create refresh-token after the first login. Refresh-token will have a couple of months of lifespan. So far localStorage seems like the only option to store it.
Is this way of creating auto login is a good option? Is there a better way to do create auto login?
What most apps do is auto show the biometrics in the login screen if the user allow it before. This allows to auto login instead of the user typing out whole username and password.
It totally depend on your product and how you want your app's behaviour. Every option can be good in a scenario. I usually save refresh token in the local storage and load it on app start (before removing the splash screen or loading etc) and consider the user "logged in" when the token is present, until I realize from a request that the token is not valid (anymore) then I'd delete the token from memory and local and redirect the user to login page or something.

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.

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

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.

How to customize Verify your identity (entering verification code) screen in Salesforce?

I have created Connected App in Salesfoce and have customized the login screen (changing logo, button css etc., using Visualforce). When user logs in for the first time or logs in from different browser or device, it prompts for 'Verify your identity' (to enter verification code).
I know we can customize the option of sending the verification code to mobile or email. But, I would like to customize the 'Verify your Identity' screen like changing the logo, button css etc. I didn't find it under Visualforce Pages.
Where is this located and how can the styles be customized?
This will be possible in Winter '20. From Release Notes:
When external users register a verification method, either a phone
number or email address, Salesforce displays a Verify page for users
to enter their verification code. You can replace the default Verify
page with your own, for example, to reflect your brand or meet your
corporate guidelines

without username filed user only enter password! How

I have design a page where every time user go to page submit a code after entering a code or password then access all other website pages.
I know rest of work is achieved through Access Control List means only logged in users can access.
Now I need page where you can enter only password without enter username.
Here is an example click here
Currently this page is non joomla page ..rest of the site is joomla based.
How can I edit login page so that login page only have password filed.
also when user close browser he logout automatically
requirement is only one code is used thorough out the website for every user ....
Best Regards
Got to this directory
components/com_users/views/login/tmpl
Find default_login.php and modify it as per your usage. Make sure you are checking in active template directory.

Resources