windows gground
  • Windows
    fix taskbar icons not showing up in windows 11

    How to fix taskbar icons not showing up in windows 11

    Ultimate List of ms-settings URI commands to open any settings in Windows 10 in a click

    Ultimate List of ms-settings URI commands to open any settings in Windows 10 in a click

    Fix ‘Error Code 0x803F8001’ in Minecraft Launcher on Windows 11 and 10

    Fix: ‘Error Code: 0x803F8001’ in Minecraft Launcher on Windows 11 and 10

    [Fixed] network discovery is turned off in windows 10 - How to turn it on (1)

    [Fixed] network discovery is turned off in windows 10 – How to turn it on

    What is CefSharp.BrowserSubprocess.exe

    What Is CefSharp.BrowserSubprocess.exe is it a virus or not?

    How to activate windows 10 using command line (CMD)

    [Still working in 2022] How to activate windows 10 using command line (CMD) free

    [Fixed] Antimalware Service Executable high memory in windows 10 (2021)

    [Fixed] Antimalware Service Executable high memory in windows 11 (2022)

    Windows 10 bloatware list 2021 Uninstall These Unnecessary Windows 10 programs

    Windows 10 bloatware list 2022| Uninstall These Unnecessary Windows 10 programs

    how to fix Server authentication error Login failed error in PUBGbattlegrounds mobile India

    [Fixed] Server authentication error: Login failed in PUBG/battlegrounds mobile India game 2022

  • Gaming
  • Android
    how to open apk files on windows 10 PC without emulator

    How to open APK files on windows 10 PC without emulator

    Android 11 features list important features that you need to know!

    Android 11 features list: important features that you need to know!

    How to backup text messages to google drive without any app (2020)

    How to backup text messages to google drive without any app (2020)

    How to get rid of irritating android 25% battery warning

    How to get rid of irritating android 25% battery warning

  • Technology
    How To Fix blinking Red Light On Spectrum Router in 2022 Easy Guide

    How To Fix blinking Red Light On Spectrum Router in 2022: Easy Guide

    how to enable voice search in youtube on pc or laptop

    How to enable voice search in YouTube on pc easily

    Now Overwatch AI will build power rankings to decide if you are a better player or not

    Now Over watch AI will build power rankings to decide if you are a better player or not

    List of top online international job hunting sites for developers

    List of top online international job hunting sites for developers

    Best Free and paid parental control apps for iPad in 2020

    Best Free and paid parental control apps for iPad 2020

    How to enable dark mode in Google Chrome, Facebook, etc in Windows 10 (no apps needed) free

    How to enable dark mode in Google Chrome, Facebook, etc in Windows 10 (no apps needed)

    How to recover data from a dead or crashed hard drive

    How to recover data from a dead or crashed hard drive?

    how to use toucan language extension to learn vocabulary fast

    how to use toucan language extension to learn vocabulary fast ?

No Result
View All Result
windows ground
No Result
View All Result

Learn to Integrate Firebase Authentication With your Nuxt JS project

November 28, 2021
in programming
0
learn firebase auth with Nuxt js, firebase authentication tutorial

In this guide, you are going to learn about how to use Google’s firebase authentication service in your Nuxt Js app.

After this article, you will be able to create or Authenticate users with email and passwords in your app. 

So if you want to or are thinking of trying to use firebase authentication in one of your Nuxt Js projects, You will love this article.

Requirements for authenticating with Firebase in Nuxt Js

  • Node.js installed version (14.x or above) with yarn/npm package manager
  • Code editor — I prefer Visual Studio Code
  • Google account — we need this to use Firebase
  • Basic knowledge of Nuxt Js— I won’t recommend this tutorial for complete beginners in Nuxt Js

If you face any issues throughout the tutorial, you can refer to the code in the GitHub repository.

Table of Contents

      • What is firebase Authentication?
  • Using Firebase Authentication in a Nuxt Js project
    • Creating a sign up page in Nuxt Js
    • Creating a Login page in Nuxt Js

What is firebase Authentication?

Firebase is a platform developed by Google. Firebase is a Backend as a Service (BaaS) that provides a variety of services for web and mobile app development. 

 Such as:

  • User authentication
  • Scalable databases
  • Cloud messaging
  • Cloud code functions
  • Social media Integration
  • File storage

and so much more.

And Firebase Authentication is one of those services of firebase which allows you to implement authentication in your web app easily and thus improve security of your web app.

Using Firebase Authentication in a Nuxt Js project

Now let’s Start:

First of all, we’ll set up our Firebase project. 

To do that go to firebase.google.com and login in with our google account.

Learn to Integrate Firebase Authentication With your Nuxt JS project

Click on create a project, enter any name, accept the terms and click on continue.

Learn to Integrate Firebase Authentication With your Nuxt JS project

After that untick Enable Google Analytics for this project (Because we don’t need google analytics for our project) and click on create project.

Learn to Integrate Firebase Authentication With your Nuxt JS project

Wait for a few seconds for it to finish up and then click on continue

.Learn to Integrate Firebase Authentication With your Nuxt JS project

Now from the dashboard, click on this icon (marked below) to create an app for the web.

Learn to Integrate Firebase Authentication With your Nuxt JS project

Now type any name for your web app and click on Register app

Learn to Integrate Firebase Authentication With your Nuxt JS project

Now you will be presented with this screen, where you can see your API key and other personal information, make sure to keep it private.

Learn to Integrate Firebase Authentication With your Nuxt JS project

Here you need to copy these 6 things and save it in a notepad or something because you are going to use them in the future.

apiKey: '<apiKey>',
authDomain: '<authDomain>',
projectId: '<projectId>',
storageBucket: '<storageBucket>',
messagingSenderId: '<messagingSenderId>',
appId: '<appId>',
measurementId: '<measurementId>'

After saving these details, click on continue to console.

Now we have created the app in firebase, we are going to use firebase authentication service with email and password.

Click on Build and then click on the Authentication tab.

Learn to Integrate Firebase Authentication With your Nuxt JS project

Now click on get started 

Learn to Integrate Firebase Authentication With your Nuxt JS project

Here click on Email/password

Learn to Integrate Firebase Authentication With your Nuxt JS project

Enable the top one and click one save

Learn to Integrate Firebase Authentication With your Nuxt JS project

That’s it, now we are done with the firebase Part. Now let’s create a Nuxt js project.

Open your vscode editor and in the terminal type below command and hit enter. It will create a Nuxt Js project with name “nuxt-auth”

yarn create nuxt-app nuxt-auth

There will be a few configurations you need to select when creating the project, we will use some stuff along with Nuxt Js, so here are the configurations we need:

Learn to Integrate Firebase Authentication With your Nuxt JS project

Note Press space to select Node js modules.

After that, we need to install a firebase in our project as well. To do that type the below command and hit enter.

yarn add firebase

And then install this Nuxt module as well by typing the below command and hitting enter.

yarn add @nuxtjs/firebase

After the successful installation, go to your Nuxt js project by typing  cd nuxt-auth command and press enter, and then type yarn dev and hit enter to run the server.

This should fire up your browser and you should see the following screen:

Learn to Integrate Firebase Authentication With your Nuxt JS project

Let’s clean up a little bit so that we can continue coding. In the Components folder, delete NuxtLogo.vue and Tutorial.vue. Once you delete these files, Remove the Tutorial component from index.vue, your index.vue file willlook like this:

<template>
 
</template>
 
<script>
export default {}
</script>

Now go to your nuxt.config.js file and 

Replace this 

 
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios'
  ],

To this:

 
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    [
      '@nuxtjs/firebase',
      {
        config: {
          apiKey: '<apiKey>',
          authDomain: '<authDomain>',
          projectId: '<projectId>',
          storageBucket: '<storageBucket>',
          messagingSenderId: '<messagingSenderId>',
          appId: '<appId>',
          measurementId: '<measurementId>'
        },
        services: {
          auth: true // Just as example. Can be any other service.
        }
      }
    ]
  ],

Remember when I told you to copy those firebase API keys and other personal information? Now you need to paste that information here. 

We have now connected Nuxt js to firebase.  We can now use firebase authentication on our pages.

Creating a sign up page in Nuxt Js

First, we’ll create a sign-up feature that will let users sign up in our app with their email and password. And after that, we will redirect them to another page 

Let’s start by making a simple sign-up HTML page in index.vue, and model the email and password input fields with an email and password variable so we can extract the data and then create a register button that will run a function called “createUser” when pressed.

The whole code will look like this:

In the scripts section, We declared two variables, email, and password which will model the data from those input fields we created above.

Then we will make a function named createUser which will call our auth instance from firebase which has a “createUserWithEmailAndPassword” method, this takes an email and password as arguments to create a new user object in firebase.

After this, we are just going to redirect the users to another page, name aftersignup

Now let’s create a page name aftersignup which we will show up after the registration of the user.

First, create a file name aftersignup.vue in your pages folder, And show whatever you want to show the user after the registration, for example :

The whole signup page will look like this:

Learn to Integrate Firebase Authentication With your Nuxt JS project

And after the registration, it will look like this:

Learn to Integrate Firebase Authentication With your Nuxt JS project

Now that we have created the signup page with the firebase authentication service, let’s make a login page.

Creating a Login page in Nuxt Js

First, we’ll create a login feature that will let users Sign in to our app with their email and password. And after the successful login, we will redirect them to another page 

First, make a file name login.vue in the pages folder

then start making a simple login HTML page in login.vue, and model the email and password input fields with an email and password variable like we did in the registration page, and then create a login button that will run a function called “loginUser” when pressed.

The whole code will look like this:

Here we made a function named loginUser which will call our auth instance from firebase which has a “signInWithEmailAndPassword” method, this takes an email and password as arguments to Sign in.

After this, we are just going to redirect the users to another page, name afterlogin

Now let’s create a page name afterlogin which we will show up after the successful login of the user.

First create a file name afterlogin.vue in your pages folder, And then show whatever you want to show the user after the login, for example :

The whole login page will look like this:

Learn to Integrate Firebase Authentication With your Nuxt JS project

And after the registration, it will look like this:

Learn to Integrate Firebase Authentication With your Nuxt JS project

Lastly, run the below command to run the server to see all the changes.

yarn dev

And the app should be working fine.

Once you’re done with this build, You can try adding different authentication systems such as google authentication, Facebook authentication, etc, keep experimenting with the code.

If you have any errors or questions regarding the code, here’s the GitHub repository you can use for reference.

Also read: 

 Where are snipping tools screenshots saved Windows 10

[Fixed] minecraft stuck on white loading screen problem in windows 10 edition

Microsoft released Windows 10 Build 19044.1381 / 19043.1381 | Here is what is new

Quiz: Find out which Genshin impact character are you

Windows 10 bloatware list 2021 | Uninstall These Unnecessary Windows 10 programs

[Fixed] Antimalware Service Executable high memory in windows 10 (2021)

Previous Post

[Fixed] minecraft stuck on white loading screen problem in windows 10 edition

Next Post

Where are snipping tool screenshots saved Windows 10

Related Posts

What is generation of programming languages (in detail)
programming

What is generation of programming languages? (in detail)

September 4, 2020
Next Post
how TO use SNIPPING TOOL IN WINDOWS 10

Where are snipping tool screenshots saved Windows 10

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

windows ground tech logo

We are actively looking for writers who would like to write on windows ground as a guest blogger. for guest posting, please visit:

write for us page

or mail us on- [email protected]

No Result
View All Result

Tags

android dual monitors dual monitors windows 10 gaming how to connect two monitors multiple monitors multiple monitors windows 10 prefetch product key programming languages python python programming tech deals why python is better windows windows 10 windows product key
  • Home
  • Contact us
  • About us
  • Disclaimer
  • Write for us

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Windows
  • Gaming
  • Android
  • Technology

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.