Tic-Tac-Toe with Angular 6 and Firebase – Part 4 – Logout

 Overview

In this short article I will add the logout feature to the tic-tac-toe Angular/Firebase application.  Once the user authenticates, I will also automatically route the user to the dashboard.  In the previous post, I added routing and a route-guard.

Route to Dashboard on Login

A simple change to the login component will allow the user to land in the dashboard upon successfully login.  The login component will now depend on the router (as a constructor parameter).  I updated the successful path of the signInWithEmail method of our auth service to route to the dashboard.


signInWithEmail() {
   this.auth.signInWithEmail(this.email, this.password)
      .then(u => this.router.navigate(["dashboard"]))
      .catch(err => console.log(err));
}

Logout

I added a logout button to the dashboard.  I added a method to AuthService  called signOut which wraps the Firebase authentication service call signOut. The dashboard will now depend on the AuthService.

After logging out the dashboard component will route the user back to the login screen.

Conclusion

As in previous posts, the code snippets are not exhaustive, but the full source up to this point can be found here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s