How do I properly access firebase auth functions with Nuxt, Nuxt-VueFire, and VueFire?

Question

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?

Answer 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.

Answer 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..

Answer 3

pass email and password as parameters then use $auth from useNuxtApp

Example below

This function should be in your useFirebaseAuth() composable.

export default function () {
  const {$auth }= useNuxtApp()
    
  const login = async(email, password) => await signInWithEmailAndPassword($auth,email, password)
    
  const create = async (email, password) => await createUserWithEmailAndPassword($auth, email, password)
}

Then in your component, you import the functions from useFirebaseAuth composables like

<script setup>
  const {login, create} = useFirebaseAuth()
  const email = ref('')
  const password = ref('')
        
  const user = await login(email.value, password.value);
  if (user) {
  }
  email.value = "";
  password.value = "";      
</script>