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:

TypeScript logo over a pink and white background.

Drizzle vs. Prisma: Which ORM is best for your project?

Compare Prisma and Drizzle ORMs to learn their differences, strengths, and weaknesses for data access and migrations.

Temitope Oyedele
Nov 21, 2024 â‹… 10 min read
Practical Implementation Of The Rule Of Least Power For Developers

Practical implementation of the Rule of Least Power for developers

It’s easy for devs to default to JavaScript to fix every problem. Let’s use the RoLP to find simpler alternatives with HTML and CSS.

Timonwa Akintokun
Nov 21, 2024 â‹… 8 min read
Rust logo over black marble background.

Handling memory leaks in Rust

Learn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.

Ukeje Goodness
Nov 20, 2024 â‹… 4 min read
Robot pretending to be a person.

Using curl-impersonate in Node.js to avoid blocks

Bypass anti-bot measures in Node.js with curl-impersonate. Learn how it mimics browsers to overcome bot detection for web scraping.

Antonello Zanini
Nov 20, 2024 â‹… 13 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