In the past, you have seen how to setup for Firebase authentication and user signup. In this article you are going to see how to implement sign-in behavior with Firebase authentication module. The example covers the email and password based authentication functionality. This covers the following steps,

• Firebase sign-in API
• UI integration

  Firebase sign-in API

  Create an AuthService.js file under ./src/services folder and define a function to talk to the Firebase sign-in API.

import { auth } from './firebase';
import {
  signInWithEmailAndPassword
} from '@firebase/auth';

export default {
  async signInWithEmail(user) {
    console.log('AuthService.signInWithEmail');
    await signInWithEmailAndPassword(auth, user.email, user.password)
    .then((credential) => {
      console.log('Auth successful');
    })
  }
};

• signInWithEmailAndPassword: This is an API provided by Firebase auth module which will accept email and password as an argument

  UI integration

  Then call the 'signInWithEmail()' function in your ui code to talk to the service.

<template>
  <button @click="onSignin">Signin</button>
</template>
<script>
import AuthService from './services/AuthService';
export default {
  setup() {
    const user = {
      email: 'test@gmail.com',
      password: 'Test#1234'
    };

    const onSignin = () => {
      AuthService.signInWithEmail(user);
    }

    return {
      onSignin
    }
  },
}
</script>

NOTE: The UI code is written based on Vue.js framework