You can useFirebase Authentication to allow users to sign in to your app using one ormore sign-in methods, including email address and password sign-in, andfederated identity providers such as Google Sign-in and Facebook Login. Thistutorial gets you started withFirebase Authentication by showing you how to addemail address and password sign-in to your app.

Add and initialize theAuthentication SDK

1. If you haven't already,install the Firebase JS SDK and initialize Firebase.

2. Add theFirebase Authentication JS SDK and initializeFirebase Authentication:

import{initializeApp}from"firebase/app";import{getAuth}from"firebase/auth";//TODO:Replacethefollowingwithyourapp's Firebase project configuration//See:https://firebase.google.com/docs/web/learn-more#config-objectconstfirebaseConfig={//...};//InitializeFirebaseconstapp=initializeApp(firebaseConfig);//InitializeFirebaseAuthenticationandgetareferencetotheserviceconstauth=getAuth(app);

importfirebasefrom"firebase/compat/app";import"firebase/compat/auth";//TODO:Replacethefollowingwithyourapp's Firebase project configuration//See:https://firebase.google.com/docs/web/learn-more#config-objectconstfirebaseConfig={//...};//InitializeFirebasefirebase.initializeApp(firebaseConfig);//InitializeFirebaseAuthenticationandgetareferencetotheserviceconstauth=firebase.auth();

(Optional) Prototype and test withFirebase Local Emulator Suite

Before talking about how your app authenticates users, let's introduce a set oftools you can use to prototype and testAuthentication functionality:Firebase Local Emulator Suite. If you're deciding among authentication techniquesand providers, trying out different data models with public and private datausingAuthentication andFirebase Security Rules, or prototyping sign-in UI designs, being able towork locally without deploying live services can be a great idea.

AnAuthentication emulator is part of theLocal Emulator Suite, whichenables your app to interact with emulated database content and config, aswell as optionally your emulated project resources (functions, other databases,and security rules).

Using theAuthentication emulator involves just a few steps:

1. Adding a line of code to your app's test config to connect to the emulator.
2. From the root of your local project directory, runningfirebase emulators:start.
3. Using theLocal Emulator Suite UI for interactive prototyping, or theAuthentication emulator REST API for non-interactive testing.

A detailed guide is available atConnect your app to theAuthentication emulator.For more information, see theLocal Emulator Suite introduction.

Now let's continue with how to authenticate users.

Sign up new users

Create a form that allows new users to register with your app using their emailaddress and a password. When a user completes the form, validate the emailaddress and password provided by the user, then pass them to thecreateUserWithEmailAndPassword method:

import{getAuth,createUserWithEmailAndPassword}from"firebase/auth";constauth=getAuth();createUserWithEmailAndPassword(auth,email,password).then((userCredential)=>{// Signed upconstuser=userCredential.user;// ...}).catch((error)=>{consterrorCode=error.code;consterrorMessage=error.message;// ..});
auth_signup_password.js

firebase.auth().createUserWithEmailAndPassword(email,password).then((userCredential)=>{// Signed invaruser=userCredential.user;// ...}).catch((error)=>{varerrorCode=error.code;varerrorMessage=error.message;// ..});
email.js

Sign in existing users

Create a form that allows existing users to sign in using their email addressand password. When a user completes the form, call thesignInWithEmailAndPassword method:

import{getAuth,signInWithEmailAndPassword}from"firebase/auth";constauth=getAuth();signInWithEmailAndPassword(auth,email,password).then((userCredential)=>{// Signed inconstuser=userCredential.user;// ...}).catch((error)=>{consterrorCode=error.code;consterrorMessage=error.message;});
auth_signin_password.js

firebase.auth().signInWithEmailAndPassword(email,password).then((userCredential)=>{// Signed invaruser=userCredential.user;// ...}).catch((error)=>{varerrorCode=error.code;varerrorMessage=error.message;});
email.js

Set an authentication state observer and get user data

For each of your app's pages that need information about the signed-in user,attach an observer to the global authentication object. This observer getscalled whenever the user's sign-in state changes.

Attach the observer using theonAuthStateChanged method. When a usersuccessfully signs in, you can get information about the user in the observer.

import{getAuth,onAuthStateChanged}from"firebase/auth";constauth=getAuth();onAuthStateChanged(auth,(user)=>{if(user){// User is signed in, see docs for a list of available properties// https://firebase.google.com/docs/reference/js/auth.userconstuid=user.uid;// ...}else{// User is signed out// ...}});
auth_state_listener.js

firebase.auth().onAuthStateChanged((user)=>{if(user){// User is signed in, see docs for a list of available properties// https://firebase.google.com/docs/reference/js/v8/firebase.Uservaruid=user.uid;// ...}else{// User is signed out// ...}});
index.js

Next steps

Learn how to add support for other identity providers and anonymous guestaccounts:

• Google Sign-in
• Facebook Login
• Twitter Login
• GitHub Login
• Anonymous sign-in