Google Authentication in less than 5 minutes
Adding firebase authentication using email and google mail.

If you have reached here directly, Here is the link to the article => Connect Firebase to react project
Steps!! -
- Connect Firebase to your project.
- Add initial signup method for the new user using email and password.
- Add signup and sign-in method using Google Gmail.
- Add sign-in methods for users using email and password.
Sign up with an Email and Password!!
Creating signup for new users is pretty simple, Firebase gives you a method createUserWithEmailAndPassword. This method helps to create a new user in the Authentication section of the firebase console.
Before adding this method make sure you enable the firebase email and password authentication method in the Sign-in-method tab section.


The next step is to add a signing method. The method is simple, you will give the firebase auth method an email and password in request and in return firebase will give you its corresponding data.




Sign In with an Email and Password!!
Firebase provides the signInWithEmailAndPassword method, which again takes only email and password and return the response accordingly.


Login with Google
I will use react-icons npm package for all sort of icons, its pretty simple to install plus they have a variety of icons. Link => https://react-icons.github.io/react-icons
I have created the google login button.

Now, do the same step we did with email and password sign in providers, go to the authentication sign-in method tab and enable the google login.



After clicking to google login button user will be thrown to a new tab which has all the list of email’s(left-hand side image), after selecting one email user we be thrown back to the main page and in the response then you will get user data(right side image).


Google login is completed, now you can use the response data from firebase in any way you want. I prefer to store the uid return from firebase and token in the cookie which helps me to detect whether the user is logged in or not, if cookie does not contain uid then the user is logged out. Also do set some expired days, for example, 14 days for every cookie value you will save in the browser.
I have added a cool loading button in every button and some covered some edge cases like clicking the button without entering an email or password and so on. It’s always a good approach to cover as much edge cases as you can, that gives the user a good user experience.
Here are the images of some edge cases I have covered.


Please, do press the like button if you found it useful and mention your issues in the comments I will try my best to help you out. Till then have a good day, people.
