2022-08-18
2823
#firebase#vue
Dotun Jolaoso
7685
Aug 18, 2022 â‹… 10 min read

Authentication with Vue 3 and Firebase

Dotun Jolaoso Software developer.

Recent posts:

Getting Started With Claude 4 API: A Developer's Walkthrough

Getting started with Claude 4 API: A developer’s walkthrough

This guide explores how to use Anthropic’s Claude 4 models, including Opus 4 and Sonnet 4, to build AI-powered applications.

Andrew Baisden
Jul 3, 2025 â‹… 16 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [July 2025 edition]

Which AI frontend dev tool reigns supreme in July 2025? Check out our power rankings and use our interactive comparison tool to find out.

Chizaram Ken
Jul 2, 2025 â‹… 3 min read
how API client automation can save you hours in development

How API client automation can save you hours in development

Learn how OpenAPI can automate API client generation to save time, reduce bugs, and streamline how your frontend app talks to backend APIs.

Lewis Cianci
Jul 1, 2025 â‹… 7 min read
Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 2025 â‹… 7 min read
View all posts

15 Replies to "Authentication with Vue 3 and Firebase"

  1. Great tutorial. Just a few pointers. When creating the vue project via the vue cli it’s better to select the correct options right away as they’re then automatically configured properly for you (scaffolding). So the vue-router and vuex shouldn’t be installed via npm, but rather selected out of the box or added later via vue add.
    So instead of:

    npm i firebase vue-router vuex

    Add vue-router and vuex afterwards this way:

    vue add vuex
    vue add vue-router

    And since you’re using bootstrap you may as well install bootstrap-vue the same way:

    vue add bootstrap-vue

  2. Hello J, thats not a problem, firebase keys can be left public, security must be configured from the firebase dashboard 🙂

  3. Dotun Jolaoso. Thank you very much for sharing your knowledge.

    The application can be logged with an email and password registered in firebase. That works correctly.

    I don’t know if I’m doing something wrong, but when I type this link in the browser:

    http://localhost:8080/dashboard

    without having logged in, I was able to access the dashboard.

    The correct thing is that it does not show me the dashboard, because I am not logged in..

    This pate I have not understood well:

    // map `this.user` to` this. $ store.getters.user`

    And what of
    Using the store I don’t know exactly where and how to use it;

    firebase.auth (). onAuthStateChanged (user => {
    if (user) {
    // User is signed in.
    } else {
    // No user is signed in.
    }
    });

    Thank you

  4. Oscar Bravo Arrieta,
    In your HTML template above I had to use, inside my v-if :
    v-if=”user.loggedIn”

    this should allow you to evaluate if the boolean on the object is true or false

  5. I am getting a linting error like this:

    $ vue-cli-service lint
    error: ‘data’ is defined but never used (no-unused-vars) at src/views/Login.vue:98:15:
    96 | .auth()
    97 | .signInWithEmailAndPassword(this.form.email, this.form.password)
    > 98 | .then(data => {
    | ^
    99 | this.$router.replace({ name: “Home” });
    100 | })
    101 | .catch(err => {

    Do anybody know why this is happening?

  6. Since the code was just changing routes anyway I changes the .then and .catch functions to the following and got it to work.
    Just make sure to import router inside the tag in the Login component.

    .then(function() {
    router.push({ path: ‘dashboard’ })
    })
    .catch(function(err) {
    this.error = err.message;
    });

  7. Is there a reason you access firebase inside of components and not in vuex? What’s the point of using vuex then?

  8. Hello. Could anyone help me by explaining how to connect the registered users to their specific data? I can register the users, they are able to send some data of theirs but any logged user has access to everybody’s data. Trying to clarify it: I want the user to have access only to the data he/she created. Thank you in advance.

    1. Assuming you’re using Firestore within Firebase, you can limit a user to only their own data in the Firestore security rules themselves: https://firebase.google.com/docs/firestore/security/get-started

      Note that the rules don’t actually filter data, they just protect it, i.e. they’ll get an error if they query on all widgets because they don’t own some.

      In order to filter data, you’ll need to effectively do a where clause in your retrieval. Here’s follow on documentation that fills the gaps: https://firebase.google.com/docs/firestore/security/rules-query

  9. Module not found: Error: Package path . is not exported from package /Users/nidhikumari/Desktop/firebase-auth/node_modules/firebase (see exports field in /Users/nidhikumari/Desktop/firebase-auth/node_modules/firebase/package.json)
    Getting this error, i am using firebase version 9 and vue3

Leave a Reply