Let's Build a SignUp Page using Firebase, React, and Redux

In this blog, I will be sharing that how can you add signUp functionality to your project using React, React-Redux-Firebase, and Firebase. The cool thing here is that I will also be showing you the way to add verify Email Functionality in the application using cloud functions. Firebase's built-in signUp function provides the facility of verifying a user's email only when the user gets logged into the application. But here I will show you, how you can first verify the user's email and then let him/her login to your application. Believe me, verifying a user's email before logging him in is one of the common problems where developers get stuck. So, let's solve this puzzle of authentication today!!

Since we are using Redux as our global store here so let's make a store.js file

I have used the react-redux-firebase here which makes working with the firebase super easy. If you are entirely new to react-redux-firebase then do give it a read here.

Now we have configured our store. Let's connect this store in the index.js of our react project.

Since we have created the store here so now we can escape from prop drilling into the components.

The basic setup is done. Now let's move to reducers and action creators. So First we will define the actions we are going to use for our signUp Functionality:

Great! Now since we are using Thunk here so we can use Action Creators here. Thunk enables us to return functions instead of plain objects. Now you must be thinking that why we need Thunk. Good Question!

See Reducers are pure functions so we can't do asynchronous work in reducers. So we need some place where we can do our asynchronous work. Right? Action Creators is that place and Thunk enables us to use Action Creators. You will get this better with the below code.So, let's make our action Creators now, We will make functions for:-

🎉SignUp with Email and Password

🎉SignUp with Google

🎉SignUp with Github

So you can see that we are doing all the asynchronous work here in action Creators. Now is the time to make reducers:

AuthReducer.js

Now let me share the most important part here. See whenever you do signUp using firebase's ceateUserWithEmailAndPassword function, what it does is that it first signs up the user and makes the user log in to your application. After that, you can check whether the email is verified or not and can log out the user if not verified!

Now what developers generally want is that before logging the user in they should be sure that the user has verified himself. So for creating this functionality we have to use firebase-admin SDK and cloud functions. Our approach will be like this:-

💡We will generate a verification email whenever a new user signs up and then we will store that verification link in firestore.

💡As soon as a new user will be created we will send this verification link to the user's inbox and once he will verify himself only then we will allow him to login into our application.

💡We will be using emailVerified Property in firebase Reducer to make sure that the user has verified his email.

Let's make a cloud function that will be triggered on creating a new user:

Now let's integrate nodemailer here to send this mail to the user:

We are using Gmail as a mail-sending service here. You can also use other services like SendGrid.But for that, you have to upgrade your firebase spark plan to Blaze plan as firebase charges for using other services other than Google.

Remember nodemailer is like a bridge between your application and the service that you will use to send your emails. Don't think that nodemailer is responsible for sending emails. For sending emails you need a service like Gmail or SendGrid.

Let's export this cloud function now:

Great! So, we are done. The task which is left now is to make a signup function and integrate this function there:

So, let's make a signup page using material-UI and call the function on the press of the sign-up button.

Your signUp page will look like this now and let me share one more good thing i.e this signUp page is fully responsive.

Hurray! We have completed a signUp page using redux and firebase. I have tried to integrate redux and firebase in the clearest and simpler way possible. Hope you must be clear with redux concepts also after going through this blog. Now I have a task for you. Try making a sign in page using the same concepts we have discussed here. Remember Real learning happens only when you try making something out by yourself.

Do share the blog with your friends because positivity and knowledge are the only two things that increase exponentially on sharing. Keep Learning!!