Firebase Authentication Methods

Firebase is one of my favorite user authentication tools to use in any application. It is so fast and simple to implement

Today I am going to take you through the firebase authentication method and how to apply them to your application

Setup Firebase Auth Environment

Create your firebase application from https://console.firebase.google.com/

Follow all the instructions. After creating your account go to the dashboard of the firebase app and enable auth methods

After enabling and following all the instructions provided: Here is the documentation of detailed instructions https://firebase.google.com/docs/auth/?authuser=0

Add your app setting to your code

Firebase Authentication Methods

1. Signup with email and password

NB: Type CTRL + ALT + 6. to add code here in medium

firebase.auth()
.createUserWithEmailAndPassword(email, password)
.then((userCredential) => { 
    var user = userCredential.user;
    console.log(user)
    alert("successfully logged in") 
  })
  .catch((error) => {
    var errorCode = error.code;
    console.log(errorCode)
    var errorMessage = error.message;
    alert(errorMessage)
    
});

2. Sign in with email and password

add the following code to the submitt event method

firebase.auth()
.signInWithEmailAndPassword(email, password). 
// input email and password
.then((userCredential) => { 
    var user = userCredential.user;
     //user signed in
     console.log(user)
    alert("successfully logged in") 
  })
  .catch((error) => {
    var errorCode = error.code;
    console.log(errorCode)
    var errorMessage = error.message;
    alert(errorMessage)
});

3. Sign in with telephone number

Add Recaptcha. It is required for phone authentication

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('number', {
   'size': 'invisible',
   'callback': (response) => {
     onSignInSubmit();
    }
});

Code for phone auth

const appVerifier = window.recaptchaVerifier;
firebase.auth()
.signInWithPhoneNumber(telephone,appVerifier)
.then((confirmationResult) => {
  //SMS sent.Prompt user to type the code from the message,then signin
   // user in with confirmationResult.confirm(code).
   const code = prompt("Enter code ");
  confirmationResult.confirm(code)
   .then((result) => {
     // User signed in successfully.
     const user = result.user;
     console.log(user)
     alert("successfully logged in")})
   .catch((error) => {
       console.log(error)
       alert(error.message)
    });
     window.confirmationResult = confirmationResult;
})
.catch((error) => {
   alert(error.code)
   console.log(error);
   grecaptcha.reset(window.recaptchaWidgetId)
});

4. Sign in with Facebook

Facebook provider = firebase.auth.FacebookAuthProvider()

var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth()
.signInWithPopup(provider)
.then((result) => {
  var credential = result.credential;
  var token = credential.accessToken;
  console.log(token)
    // The signed-in user info.
  var user = result.user;
  console.log(user);
  alert("successfully logged in")
}).catch((error) => {
  // Handle Errors here.
  alert(error.message)
  console.log(error)
});

5. Sign in with Google

Google Provider = firebase.auth.GoogleAuthProvider();

var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth()
.signInWithPopup(provider)
.then((result) => {
  var credential = result.credential;
  var token = credential.accessToken;
  console.log(token)
    // The signed-in user info.
  var user = result.user;
  console.log(user);
alert("successfully logged in")
}).catch((error) => {
// Handle Errors here.
  alert(error.message)
  console.log(error)
});

6. Sign in with Twitter

Twitter provider = firebase.auth.TwitterAuthProvider();

var provider = new firebase.auth.TwitterAuthProvider();
firebase.auth()
.signInWithPopup(provider)
.then((result) => {
  var credential = result.credential;
  var token = credential.accessToken;
  console.log(token)
    // The signed-in user info.
  var user = result.user;
  console.log(user);
alert("successfully logged in")
}).catch((error) => {
// Handle Errors here.
  alert(error.message)
  console.log(error)
});

7. Sign in with GitHub

Github provider = firebase.auth.GithubAuthProvider();

var provider = new firebase.auth.GithubAuthProvider();
firebase.auth()
.signInWithPopup(provider)
.then((result) => {
  var credential = result.credential;
  var token = credential.accessToken;
  console.log(token)
    // The signed-in user info.
  var user = result.user;
  console.log(user);
alert("successfully logged in")
}).catch((error) => {
// Handle Errors here.
  alert(error.message)
  console.log(error)
});

8. Sign in with a guest account

firebase.auth()
.signInAnonymously()
.then((res) => {
   console.log(res)
   alert("successfully logged in")
})
.catch((error) => {
  alert(error.message)
  console.log(error)
// ...
});

9 Sign out

firebase.auth()
.signOut()
.then(() => {
   alert("You are logged out")
})

For more information visit the Firebase documentation: https://firebase.google.com/docs/auth/web/start?authuser=0

Final Project Github: https://github.com/maru25-alt/firebase-auth.gi

Live Site: https://firebase-authentication25.netlify.app/

Youtube Video :