Login/register with firebase Vue JS #STEP

I recently discovered this incredible and simple authentication tool to implement in my projects and I would like to share all the functionality and step by step so that you can use it in your project too.

I'm a front-end developer and, of course, my knowledge of back-end is very vague, especially when it comes to implementing a login/registration screen where users have to store sensitive and encrypted information. developing a personal application, this incredible and very easy-to-use tool emerged as an option, so, without further ado, let's look at the examples and explanations.

In this first post, we will create a project in Firebase and configure everything we will need to make the project work, so...

1. When logging into firebase, go to the option Create a project.
   

2. Afterwards, give your project a name (I recommend putting the name of your app, in my case login-app) and click Continue.
   

3. The next step is whether or not to activate Google Analytics for the project, in my case, I will not activate it, but it is up to you, after, just click on Create project.
   

4. Wait for the loading to finish and click Continue.
   

5. If everything went well, this screen will appear for you.
   

6. Next step now, go to this option Authentication.
   

7. In it, go to Let's get started.
   

8. Select the option Email/password.
   

9. Then enable the login option and save the setting.
   

10. You will see that it will now show the chosen option on the Authentication main screen, as shown in the image.
    

11. Now let's go to the option Add new supplier and we will also configure the login with Google.
    

12. Just select the option Google.
    

13. Then, you need to Activate, right after it will open a tab with the Public name of the project where it will create a random name, but in my case, I I put the same name as the project login-app and it will also request an email for support, where it will normally look for your email from Google and you just need to select and finally Save .
    

14. And once again it will redirect to the main Authentication screen now showing the two active providers.
    

This part of creating the project and configuring the fitting rooms is finally over ✨, I promise we'll get our hands dirty soon and make it all work.

Now, we need to go back to the Firebase home page so that we can get the code we need to integrate Firebase into our project there in the code.

1. Here in Project Overview, let's select the Web.
   app

2. So let's give this app a nickname, again, I chose to put the name login-app and then click on Register app.
   

3. Once this is done, it will give us everything we need to add the SDK to our project, from the command to install firebase to the web app settings.
   

Note that in this part of adding the SDK you can choose to use npm or the script tag, in my case, as the idea is to integrate this into a Vue JS project so I will use NPM anyway.

Now, finally let's get to what matters, the CODE.

The above is the detailed content of Login/register with firebase Vue JS #STEP. For more information, please follow other related articles on the PHP Chinese website!