The signOut() method allows users to sign out or log out of their current authentication session by ending the validation of the user’s authentication token provided at the time of signing in.

1. Initialize Firebase SDK To Your Web App

Before going any further, I assume that you already know how to initialize Firebase SDK in your JavaScript web app.

I also assume that you already know how to sign in to a user account using the Firebase Authentication back-end.

2. Import getAuth & signOut Methods

Import the Firebase Authentication SDK library via either NPM or CDN (I use CDN in the below example) and destructure the getAuth() and signOut() methods.

import {
  getAuth,
  signOut,
} from "https://www.gstatic.com/firebasejs/10.0.0/firebase-auth.js";

JavaScript

Copy

In order to implement any of the Firebase Authentication methods, first we need to create an instance of an authentication object.

const auth = getAuth();

JavaScript

Copy

🚀 Want to build Firebase apps you can actually trust in production?

If you’re tired of piecing together tutorials and guessing about data modeling, authentication, and authorization, I’ve put the full system into a short course.

👉 View the Full-Stack Firebase Course

3. Create a Sign-Out Button

Typically, you will want to call the signOut() method when a user clicks the sign-out button to sign out their current authenticated session after successfully signing in.

<button id="signOutBtn">Sign out</button>

HTML

Copy

Next, create a DOM reference for the sign-out button element.

const signOutBtn = document.getElementById("signOutBtn");

JavaScript

Copy

Then attach a click event with the callback function signOutButtonPressed to the sign-up button.

const signOutButtonPressed = (e) => {
  e.preventDefault();
  console.log("Sign out Button Pressed");
}

signOutBtn.addEventListener("click", signOutButtonPressed);

JavaScript

Copy

4. Call signOut() Method

Inside the signOutButtonPressed function, call the signOut() method.

const signOutButtonPressed = (e) => {
  e.preventDefault();
  signOut();
};

JavaScript

Copy

The signOut() method takes a single argument which is the authentication object that I’ve declared above.

const signOutButtonPressed = (e) => {
  e.preventDefault();
  signOut(auth);
};

JavaScript

Copy

The signOut() method is an asynchronous method that returns a promise which can be either fulfilled or rejected.

So add the await/async keywords to it.

const signOutButtonPressed = async(e) => {
  e.preventDefault();
  await signOut(auth);
};

JavaScript

Copy

To capture any errors, wrap the signOut() method with a try-catch block.

try {
    await signOut(auth);
    console.log("User Signed Out Successfully!");
  } catch (error) {
    console.log(error.code);
  }

JavaScript

Copy

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

8 months ago

In this FREE course, you're going to learn how to build a simple real-world …

3 years ago

Learn how to use createUserWithEmailAndPassword() to create a new Firebase …

3 years ago
1 comment

The onAuthStateChanged() method is triggered when a user's authentication state …

3 years ago

Learn how to get use data from firebase 9 Cloud Firestore database with 3 …

4 months ago

Learn how to model Firestore data the right way for performance, cost, and …

3 years ago

Learn how to authenticate a user account using the …

❯

tempest.services.disqus.com

tempest.services.disqus.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Start the discussion…

Comment

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
Contact me or enable others to contact me by email with offers for goods or services
Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

Favorite this discussion
Discussion Favorited!

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Best
- Newest
- Oldest

Be the first to comment.

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Twitter Widget Iframe

Firebase Version 9 Tutorial (Modular)

Firebase Version 8 Tutorial (Namespaced)

1. Initialize Firebase SDK To Your Web App

2. Import getAuth & signOut Methods

3. Create a Sign-Out Button

4. Call signOut() Method

tempest.services.disqus.com is blocked

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Discussion Favorited!

live.rezync.com is blocked

pippio.com is blocked