Full-Stack Firebase
  • Introduction
  • Introduction
    • Full-Stack Firebase
    • Why Firebase?
    • What is serverless?
    • Prerequisites
    • Overview & Structure
    • Write your first query
    • Links
    • Downloadable Notes
  • Firebase Console
    • Introduction
    • Walkthrough
  • Firebase Tools
    • Introduction
    • Walkthrough
  • Firebase Authentication
    • Introduction
    • Walkthrough
    • Challenge
    • Notes
  • Cloud Firestore
    • Introduction
    • Walkthrough
    • Security Rules
    • Indexes
    • Challenge
    • Notes
  • Realtime Database
    • Introduction
    • Walkthrough
    • Security Rules
    • Challenge
    • Notes
  • Cloud Functions for Firebase
    • Introduction
    • Walkthrough
    • Challenge
    • Notes
  • Firebase Storage
    • Introduction
    • Walkthrough
    • Security Rules
    • Challenge
    • Notes
  • Cloud Messaging
    • Introduction
    • Walkthrough
    • Challenge
    • Notes
  • Firebase Hosting
    • Introduction
    • Walkthrough
    • Challenge
    • Notes
Powered by GitBook
On this page
  • Firebase Authentication
  • onAuthStateChanged
  • Register Email/Password
  • Sign In Email/Password
  • Create Provider
  • OAuth sign in with a provider
  • Phone Auth
  1. Firebase Authentication

Notes

PreviousChallengeNextIntroduction

Last updated 7 years ago

Firebase Authentication

See the .

onAuthStateChanged

firebase.auth().onAuthStateChanged(currentUser => {
  if (currentUser) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

Register Email/Password

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

Sign In Email/Password

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

Create Provider

Google

var provider = new firebase.auth.GoogleAuthProvider();

Facebook

var provider = new firebase.auth.FacebookAuthProvider();

Twitter

var provider = new firebase.auth.TwitterAuthProvider();

GitHub

var provider = new firebase.auth.GithubAuthProvider();

OAuth sign in with a provider

Popup

firebase.auth().signInWithPopup(provider);

Redirect

firebase.auth().signInWithRedirect(provider);

Phone Auth

First attach a recaptcha using an element ID...

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

... then capture a phone number from user input and send the sms...

var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
  .then(function (confirmationResult) {
    // SMS sent. Prompt user to type the code from the message, then sign the
    // user in with confirmationResult.confirm(code).
    window.confirmationResult = confirmationResult;
  }).catch(function (error) {
    // Error; SMS not sent
    // ...
  });

...and finally authenticate with the code from user input.

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
  // User signed in successfully.
  var user = result.user;
  // ...
}).catch(function (error) {
  // User couldn't sign in (bad verification code?)
  // ...
});
Firebase Authentication docs for web