Firebase authentication is replacing the Google Identity toolkit. I'm not sure if I really understand the 'firebasification' of many of Google's APIS. I think it's confusing whether you should use the Firebase version of things, or the underlying Google APIS (an example is Google Cloud storage and messaging versus their newer Firebase equivalents). In any case, Firebase Authentication is really nicely put together, and you can even make it work with Redux and React. Here's how.
Just as with the Google developer console, there's a firebase console. You create an application there and get some credentials. Click on web setup, and Firebase helpfully sets up some credentials you can copy straight into your app
Here you also provide the authorized domains that can access your app
One of the nice things you get with Firebase is that it manages your registered users for you. This means that you can forget all about keeping a separate store of registered users, unless you want to keep additional information about them other than their identity. If you do, then Firebase also makes that easy by providing a unique id you can use (in another Firebase database) to keep other user related stuff. In a future post, I'll show how to do that too. You can also use the Google credentials (or Twitter, Github, Facebook etc) for sign-in so you don't need to store passwords or email addresses. In my App, I'm only going to use Google sign-in.
Your dashboard shows your user database.
Let's look at integrating all that into React and Redux. In this example I'm using webpack, and building my app in a Node environment, in which I've installed the firebase library, and the main topic is how to interact with the Redux store, but this should be adaptable if you are building an app directly using script tags without Redux (or React), as the principles are the same. You'll also need the Material-UI module.
The UI contains a sign in element on its Appbar. The rest of this post will look at how to manipulate that.
Which changes to this when someone is signed in.
Signing out happens when the ID chip is closed.
You need this
and firebase auth is initialized like this, where ca.config contains the credentials that were produced by the Firebase console.
The render method of the UI component that handles the sign in status looks like this. It uses some components from Material-UI. Note that it uses the status from the store (passed in props from a higher level component) to decide what to render, and the user data from the store if it is available.
The onClick events dispatch action creators to the Redux store which look like this.
Here I'm only using the Google sign-in method, which is asynchronous. For more on dealing with promises in redux action creators, see Creating promise actions in redux
And the signout is also asynchronous
The current uid is used for error logging, so it can be retrieved from the store like this.
The initial state (when there is nobody signed in) is this
Since this is asynchronous we have 3 sub actions for each action to handle. Note that a successful sign in gives you user information plus the credentials property. If you need an access token to get to other APIS (you can specify additional scopes when you make an authentication request), then you'll find it in credentials. Although the user information is also available here, firebase recommends that you pick that up by watching for user changes (which I'll get to in a moment).
When a user signs in or out, firebase fires the onAuthStateChanged event. All you need to do is wait for it to happen. In this example Process.store is my Redux store for my app.
When a change in user is detected, this action is created
This will be called in due course to store (or remove) the user info in the redux store
For those not yet familiar with Redux, this seems like a lot of code in different places to try to follow, but as your app gets more complex, you'll see that the pattern is entirely repeatable for many functions and leads to a much more robust handling of UI asynchronicity.
Services > Desktop Liberation - the definitive resource for Google Apps Script and Microsoft Office automation > React, redux, redis, material-UI and firebase >