Getting Rid of Passwords and Integrating Google Firebase

Getting Rid of Passwords and Integrating Google Firebase

Preface: As you may know, I’m building a new on-line cybersecurity training environment (Cyber&Data — and partly funded by The Data Lab), and I don’t want to store any passwords and want to drive everything through AWS. Most people have at least one trusted account, and their Google ID is typically the one used. Our students use Microsoft Live, so that’s another one that I need to support. But there needs to be others, so I’ve turned to Google Firebase for a platform to support the login process. This has great advantages for businesses as it will integrate the logon process into a single console, and can then drive a whole lot of analytics. But for me, I just want to authenticate the user into the environment.

Hello Firebase

Years ago I said that JavaScript would never take on, but how wrong could I have been? The cumbersome language is now a foundation element of a new Web. One that has no delays, and is fast. It is one where the browser finally takes over the functionality of the desktop app. And so I’ve added Microsoft and Google login for my site, but I just couldn’t get code for a Twitter login. And so I turned to the new kid on the block … Google Firebase:

It’s here that Google wants to integrate your Google account with your whole business back-end, and really drive analytics. If your user logs in with their Google account, you can almost have a one-to-one conversation with them. One of the elements of Firebase is the integration of authentication, and where Google will manage the federated login process. Unlike Azure's complex tangle of services, Google console is clear and guides you to success.

Getting setup

And so, the great thing about authenticating with Firebase is that it knows how to talk with lots of identity providers, including Google (itself), Facebook, Twitter, GitHub, Yahoo, Apple and Microsoft. Initially, you enable the provider and get your API key and secret for OAuth 2.0 by creating an app in the developer site of the provider. In the following example, we will use Twitter, so you create an App in Twitter, and then get your keys, and past in the Callback URL to Google [here]:

Next, you just enable the provider and paste in the API key and the API secret, and your good to go:

Next, it’s just a quick paste of the main SDK Javascript, a button, and some code:

<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase.js"></script>


<script>// Your web app's Firebase configuration
    var firebaseConfig = {
        apiKey: "AIzaSyC5NGQ9fha1V5HEUv4hvV0TwlxNcwd7css",
        authDomain: "asecuritysite.firebaseapp.com",
        databaseURL: "https://asecuritysite.firebaseio.com",
    };
    // Initialize Firebase

    firebase.initializeApp(firebaseConfig);
    firebase.analytics();</script>


<script>function twitterSignin() {
        var provider = new firebase.auth.TwitterAuthProvider();
        firebase.auth().signInWithPopup(provider)

            .then(function (result) {
                var token = result.credential.accessToken;
                var user = result.user;
                resp = user.email;
                
                document.getElementById("t1").innerHTML = user.displayName;
                document.getElementById("t2").innerHTML = resp;

                document.getElementById('t3').src = user.photoURL

                document.getElementById("t4").innerHTML = user.uid

            }).catch(function (error) {
                console.log(error.code)
                console.log(error.message)
            });
    }

    function twitterSignout() {
        auth.currentUser.signOut()

            .then(function () {
                console.log('Signout successful!')
            }, function (error) {
                console.log('Signout failed!')
            });
    }</script>


<h1 id="logo">Demo logon</h1>
<p>This is just a demo site for federated login. No details are stored.</p>


<table>

    <tr>
        <td>
            <input id="micro" type="image" src="/public/gotwitter.png" alt="Submit" onclick="twitterSignin()" height="50px">
        </td>

        </tr>
    <tr><td colspan="3"><a href="#" onclick="signOut();">Sign out</a></td></tr>
    
</table>

<p>User: <span name="t1" id="t1"></span></p>
<p>Email: <span name="t2" id="t2"></span></p>
<p>Photo: <img id='t3' src="" /></p>
<p>UID: <span name="t4" id="t4"></span></p>

Basically, we just call up the script:

var provider = new firebase.auth.TwitterAuthProvider();

and then it runs:

firebase.auth().signInWithPopup(provider)

An OAuth 2.0 token is then returned to Google, who deals with the callback, and then returns to the page. In this case, there is no call to the back-end, and I just take the details from the returned OAuth 2.0 token to display them:

The details Firebase are stored for the App, and the code is generated for the user to integrate:

An important setting in Twitter is not to give too many rights to login process:

Go on, give it a try:

I’ve used code from other places for Microsoft and Google, but I’m now just going to integrate them all into Google Firebase, and I’ll have a new authentication system for my Cyber&Data site (it’s not finished yet, but will go live in August):