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:

Relay logo with an orange circuit-like path on a blue background, representing the Relay GraphQL client. The article covers building real-time applications in Relay 17, including features like optimistic UI updates, GraphQL subscriptions, and Relay Resolvers.

Building a real-time application with Relay 17

Build a fast, real-time app with Relay 17 to leverage features like optimistic UI updates, GraphQL subscriptions, and seamless data syncing.

Alec Brunelle
Nov 12, 2024 â‹… 9 min read
Vue.js logo over a dark, textured purple background. The article discusses using defineExpose and in Vue 3 to enhance component interaction and enable dynamic theming.

defineExpose and <style vars> in Vue 3 for component interaction and theming

Simplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.

Clara Ekekenta
Nov 7, 2024 â‹… 8 min read
How to set up TypeScript with Node.js and Express

How to set up TypeScript with Node.js and Express

Explore how to integrate TypeScript into a Node.js and Express application, leveraging ts-node, nodemon, and TypeScript path aliases.

Aman Mittal
Nov 7, 2024 â‹… 10 min read
Cover image for es-toolkit, a Lodash alternative

es-toolkit, a Lodash alternative

es-toolkit is a lightweight, efficient JavaScript utility library, ideal as a modern Lodash alternative for smaller bundles.

Rishi Purwar
Nov 6, 2024 â‹… 5 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