Tham's Tech Box

Tham's Tech Box

Firebase Authentication: Sign in with email and password

Firebase Authentication: Sign in with email and password

Subscribe to my newsletter and never miss my upcoming articles

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

 
Share this