React Redux Firebase Authentication – Google Account Sign in/Sign out example

In this tutorial, we’re gonna add Firebase Authentication to a React Redux Application with Google Account Sign in/ Sign out.

Related Posts:
How to use Firebase Database CRUD Operations in React Webpack
React Redux – Firebase CRUD Operations example

Firebase Authentication


Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, identity providers like Google, Facebook, Twitter…

Google Account Sign in/Sign out

The easiest way to authenticate users with Firebase using Google Accounts is using Firebase JavaScript SDK. To do this, follow these steps:

Enable Google Sign-In in Firebase console

– Go to Firebase console, open the Auth section.
– On the SIGN-IN METHOD tab, enable the Google and click Save:


Create an instance of the Google provider object

Authenticate with Firebase

Get currently signed-in user

– Recommended way is setting an observer on Auth object:

– We can also use the currentUser property:

Sign out

Example Overview


We will add Google Account Sign in/Sign out to our App:
– When there is no user logging in: only shows Login page.
If we enter any url, app also directs us to this Login page.
Clicking on Login button will popup a window for Google Account.


– When a user is logged in, he can access all the pages, and there is a Logout button in the header for signing out.



– We want a group of urls that can only be accessed by authenticated user, and a group of urls for public.
=> Router with Switch for PrivateRoute and PublicRoute Component.
– We need navigate url to another url in a certain condition.
=> use history from history/createBrowserHistory.

PublicRoute & PrivateRoute have to check an isAuthenticated boolean variable to know what to do. isAuthenticated bases on a global state to choose its own value: state.auth.uid.
=> create a Reducer for authentication that return uid for state.auth when logged-in and empty object when logged-out:

– combine new reducer with the others:

– We need actions for auth reducer, and we also need Firebase actions that will be dispatched:

– To dispatch Firebase actions in a React Component, we use react-redux connect() method with mapDispatchToProps function:

– To dispatch auth actions that affect state.auth.uid (login & logout), we listen to Auth State with onAuthStateChanged:


– React 16.3.0
– Redux 3.7.2
– React Redux 5.0.7
– Webpack 4.4.1
– Firebase 4.13.1

Project Structure



Setup React Application with Firebase

Please visit How to add Firebase to React App.


Config Firebase Database Rules

– Go to Firebase console, open the Database section -> Realtime Database.
– On the RULES tab, change .read and .write values. This will allow full read and write access to authenticated users:


Enable Firebase Auth

– Open the Authentication section.
– On the SIGN-IN METHOD tab, enable the Google and click Save:


Initialize Firebase for Google Account Authentication


Auth Redux Action


Auth Redux Reducer


Add Auth to Redux Reducer


Login Component Page


Logout in Header Component


Control Route


Public/Private Route in Router



Listen to Auth State and Render App


Source Code


For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

By grokonez | April 30, 2018.

Related Posts

3 thoughts on “React Redux Firebase Authentication – Google Account Sign in/Sign out example”

  1. Thanks for the great post!

    In the reducers/auth.js you return the following:

    Shouldn’t you use Object.assign() to always clone the current state?

    1. Hi Miguel Stevens,

      We should use Object.assign(), or we can also enable the object spread operator proposal to write { ...state, ...newState } instead.

      But, in this case, why do we return the object?
      => Because there is only one field of the state for the reducer: uid. Cloning other fields of the current state doesn’t make sense 🙂

      Best Regards,

  2. Thanks in support of sharing such a nice thinking, paragraph is fastidious, thats why i have read it completely

Got Something To Say:

Your email address will not be published. Required fields are marked *