Ever wonder how web pages these days are able to use Google or Facebook login for their user authentication? The simple answer to that is Firebase. Firebase provides a realtime database and backend as a service. It also handles user authentication and much more.
I will help guide you through the process of making a simple user authentication using google login.
- Click on Get Started on https://firebase.google.com/. You will want to sign in with your Google account. After you've signed in, a new page should open up with the option of creating a project. You would want to click on that to get started.
- There are going to be three steps to setting up your project with Firebase.
First, you're going to put in your project name. It could be anything you want. Then accept the firebase terms below and click continue. It will be step 2 next. For this step, you just have to click continue to proceed. For step 3, just select all the options and click create project. Once your project has been created, we're ready to move onto the next step.
- After creating your project, you will see the page that looks like the above image. This means your project is created. Now open your terminal and navigate to wherever your project is at. Install Firebase in your project with the command npm install --save firebase. After you've installed firebase, open up your code editor and go into your index.html file. In there, you're going to want to reference firebase with a script tag inside the head. For example,
Next, you could do something simple and reference one of your js files below. For this example, lets make one called app.js. Put this in a body tag. For example,
This will make it so that when you click on a button that says Login with Google, it will run the function googleLogin(). Now we just need to make the function in app.js.
- We are now going to make the function for a google login. This is the code.
This should now make your button have the functionality of a google login. Onto the next step.
- Navigate to https://console.firebase.google.com/. Click on the project that you want to work on. Afterwards, you will see your project screen. On the left side, there will be options to choose from. Click on Develop and then Authentication. It will then take you to this page.
Click on set up sign-in method. Now you will see a list of options. Click on the google. As you can see, the status of it is disabled. You will want to enable it. First, click on it and then it will ask for your email under the Project support email. Put in your email and click save on the bottom right. Now the google login feature is enabled.
- In your terminal, type in these commands step by step and follow the instructions. For firebase init, you will want to select the option of authentication.
firebase login
firebase init
firebase serve
This will fire up your firebase server and you will be able to see your app run with firebase. When you want to deploy your web app, instead of doing firebase serve, just do firebase deploy. Hopefully it's working for you if you've followed all the steps. This makes user authentication so much easier to handle and lets you focus on the other important things in your web app.
Top comments (0)