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
So, there are several problems with the code.
Please, use Typescript, these issues could have been avoided.
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..