skip to Main Content

I’m using Nuxt, vuefire, and nuxt-vuefire to try to enable email and password authentication in a web app. I’ve installed all packages and am able to access unprotected paths in firebase, all is working as expected. However, when trying to access the firebase auth sdk, I don’t get back an auth object with properties for handling authentication situations. I’ve configured nuxt to use firebase authentication as such:

export default defineNuxtConfig({
    ...
    modules: [
        'nuxt-vuefire'
    ],
    vuefire: {
        auth: true,
        config: {
            apiKey: "...",
            authDomain: "...",
            projectId: "...",
            storageBucket: "...",
            messagingSenderId: "...",
            appId: "...",
            measurementId: "..."
        },
        admin: {
            serviceAccount: '...json',
        }
    }
}

I’m then trying to use the useFirebaseAuth() in my login.vue component in the pages directory as such:

<script setup>
const auth = useFirebaseAuth()
const email = ref('')
const password = ref('')

const login = () => auth.signInWithEmailAndPassword(email, password)
const create = () => auth.createUserWithEmailAndPassword(email, password)
</script>

When clicking login or register, I’m getting the error

auth.signInWithEmailAndPassword is not a function

I can’t find any documentation on what step I’m missing. What’s the step I’m missing?

2

Answers


  1. So, there are several problems with the code.

    1. There are no such methods as auth.signInWithEmailAndPassword for firebase 9, you do it through signInWithEmailAndPassword(auth, email, password) and it seems you are using the new version. Please, refer to firebase docs.
    2. email, password are refs, so email.value, password.value
    3. useFirebaseAuth() returns null on the server, so be careful with that. It’s not an issue in this context, but since you are using Javascript you might miss it.

    Please, use Typescript, these issues could have been avoided.

    Login or Signup to reply.
  2. I also run into this issue. In my opinion vuefire has to offer the functionalaty of signInWithEmailAndPassword for example – but it seems that they do not.

    So we have to use "plain firebase" additionally to the vuefire imports. A little bit weird..

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search