Home >Web Front-end >JS Tutorial >Login/register with firebase Vue JS #STEP

Login/register with firebase Vue JS #STEP

DDD
DDDOriginal
2024-10-27 07:01:29446browse

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...

Login/cadastro com firebase   Vue JS #PASSO


  1. When logging into firebase, go to the option Create a project.
    Login/cadastro com firebase   Vue JS #PASSO

  2. Afterwards, give your project a name (I recommend putting the name of your app, in my case login-app) and click Continue.
    Login/cadastro com firebase   Vue JS #PASSO

  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.
    Login/cadastro com firebase   Vue JS #PASSO

  4. Wait for the loading to finish and click Continue.
    Login/cadastro com firebase   Vue JS #PASSO

  5. If everything went well, this screen will appear for you.
    Login/cadastro com firebase   Vue JS #PASSO

  6. Next step now, go to this option Authentication.
    Login/cadastro com firebase   Vue JS #PASSO

  7. In it, go to Let's get started.
    Login/cadastro com firebase   Vue JS #PASSO

  8. Select the option Email/password.
    Login/cadastro com firebase   Vue JS #PASSO

  9. Then enable the login option and save the setting.
    Login/cadastro com firebase   Vue JS #PASSO

  10. You will see that it will now show the chosen option on the Authentication main screen, as shown in the image.
    Login/cadastro com firebase   Vue JS #PASSO

  11. Now let's go to the option Add new supplier and we will also configure the login with Google.
    Login/cadastro com firebase   Vue JS #PASSO

  12. Just select the option Google.
    Login/cadastro com firebase   Vue JS #PASSO

  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 .
    Login/cadastro com firebase   Vue JS #PASSO

  14. And once again it will redirect to the main Authentication screen now showing the two active providers.
    Login/cadastro com firebase   Vue JS #PASSO

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 Login/cadastro com firebase   Vue JS #PASSO

  2. So let's give this app a nickname, again, I chose to put the name login-app and then click on Register app.
    Login/cadastro com firebase   Vue JS #PASSO

  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.
    Login/cadastro com firebase   Vue JS #PASSO

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.
Login/cadastro com firebase   Vue JS #PASSO

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn