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

Overview

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:

react-redux-firebase-auth-example-enable-google-sign-in

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

Goal

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.

react-redux-firebase-auth-example-result-click-sign-in

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

react-redux-firebase-auth-example-result-logged-in

Solution

– 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:

Technologies

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

Project Structure

react-redux-firebase-auth-example-structure

Practice

Setup React Application with Firebase

Please visit How to add Firebase to React App.

react-redux-firebase-add-firebase-webapp-config

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:

react-redux-firebase-auth-example-firebase-database-config-rules

Enable Firebase Auth

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

react-redux-firebase-auth-example-enable-google-sign-in

Initialize Firebase for Google Account Authentication

firebase/firebase.js

Auth Redux Action

actions/auth.js

Auth Redux Reducer

reducers/auth.js

Add Auth to Redux Reducer

store/store.js

Login Component Page

components/Login.js

Logout in Header Component

components/Header.js

Control Route

routers/AppRouter.js

Public/Private Route in Router

routers/PublicRoute.js

routers/PrivateRoute.js

Listen to Auth State and Render App

app.js

Source Code

ReactReduxFirebaseAuth

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

By JavaSampleApproach | 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,
      JSA.

  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 *

*