Firebase Auth JS/PHP

Question

I\'ve been tasked to build a web interface for an Android app based on firebase. I\'ve got a handful of endpoints, that interact with the database (Cloud functions). To acce

Answer 1

I have to admit, the complexity of the firebase docs and examples and different services, got me so confused, that I thought, authentication for the web is only possible via JavaScript. That was wrong. At least for my case, where I just login with email and password to retrieve a Json Web Token (JWT), to sign all calls to the Firebase cloud functions. Instead of juggling with weird Ajax requests or set the token cookie via JavaScript, I just needed to call the Firebase Auth REST API

Here is a minimal case using the Fatfreeframework:

Login form

<form action="/auth" method="post">
    <input name="email">
    <input name="password">
    <input type="submit">
</form>

Route

$f3->route('POST /auth', 'App->auth');

Controller

class App
{
    function auth()
    {
        $email = $this->f3->get('POST.email');
        $password = $this->f3->get('POST.password');

        $apiKey = 'API_KEY'; // see https://firebase.google.com/docs/web/setup

        $auth = new Auth($apiKey);
        $result = $auth->login($email,$password);

        if($result['success']){
            $this->f3->set('COOKIE.token',$result['idToken']);
            $this->f3->reroute('/dashboard');
        }else{
            $this->f3->clear('COOKIE.token');
            $this->f3->reroute('/');
        }
    }
}

Class

<?php
use GuzzleHttp\Client;

class Auth
{

    protected $apiKey;

    public function __construct($apiKey){
        $this->apiKey = $apiKey;
    }

    public function login($email,$password)
    {

        $client = new Client();
        // Create a POST request using google api
        $key = $this->apiKey;
        $responsee = $client->request(
            'POST',
            'https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=' . $key,
            [
                'headers' => [
                    'content-type' => 'application/json',
                    'Accept' => 'application/json'
                ],
                'body' => json_encode([
                    'email' => $email,
                    'password' => $password,
                    'returnSecureToken' => true
                ]),
                'exceptions' => false
            ]
        );

        $body = $responsee->getBody();
        $js = json_decode($body);

        if (isset($js->error)) {
            return [
                'success' => false,
                'message' => $js->error->message
            ];
        } else {
            return [
                'success' => true,
                'localId' => $js->localId,
                'idToken' => $js->idToken,
                'email' => $js->email,
                'refreshToken' => $js->refreshToken,
                'expiresIn' => $js->expiresIn,
            ];

        }

    }

}

Credits

Answer 2

You really aren't supposed to use sessions in PHP when using tokens. Tokens should be sent in the header on every request (or a cookie works too).

Tokens work like this: 1. You sign in, the server mints a token with some information encoded 2. You send that token back on every request

Based on the information encoded in the token, the server can get information about the user. Typically a User ID of some sort is encoded in it. The server knows it's a valid token because of the way it's encoded.

Send the token on every request you need to make, then in PHP you can just pass that token to the other API

Answer 3

Sounds like @Chad K is getting you on the right track (cookies and ajax - breakfast of champions... :), though I thought to share my code from my working system (with some 'privacy' things, of course!)

Look for /**** type comments for things you need to set up yourself (you may want to do some other firebase things differently as well - see the docs...)

LOGIN.php page (I found it simpler overall to keep this separate - see notes to learn why....)

<script>
    /**** I picked this up somewhere off SO - kudos to them - I use it a lot!.... :) */
        function setCookie(name, value, days = 7, path = '/') {
            var expires = new Date(Date.now() + days * 864e5).toUTCString();
            document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path;
        }

        function getCookie(c_name) {
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=");
                if (c_start !== -1) {
                    c_start = c_start + c_name.length + 1;
                    c_end = document.cookie.indexOf(";", c_start);
                    if (c_end === -1) {
                        c_end = document.cookie.length;
                    }
                    return unescape(document.cookie.substring(c_start, c_end));
                }
            }
            return "";
        }
    </script>
    <script>
        var config = {
            apiKey: "your_key",
            authDomain: "myapp.firebaseapp.com",
            databaseURL: "https://myapp.firebaseio.com",
            projectId: "myapp",
            storageBucket: "myapp.appspot.com",
            messagingSenderId: "the_number"
        };
        firebase.initializeApp(config);
    </script>
<script src="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.css"/>
    <script type="text/javascript">
        /**** set this url to the 'logged in' page (mine goes to a dashboard) */ 
        var url = 'https://my.app/index.php#dashboard';
        /**** by doing this signOut first, then it is simple to send any 'logout' request in the app to 'login.php' - one page does it.... :) */
        firebase.auth().signOut().then(function () {
        }).catch(function (error) {
            console.log(error);
        });
        var signInFlow = 'popup';
        if (('standalone' in window.navigator)
            && window.navigator.standalone) {
            signInFlow = 'redirect';
        }
        var uiConfig = {
            callbacks: {
                signInSuccessWithAuthResult: function (authResult, redirectUrl) {
                    /**** here you can see the logged in user */
                    var firebaseUser = authResult.user;
                    var credential = authResult.credential;
                    var isNewUser = authResult.additionalUserInfo.isNewUser;
                    var providerId = authResult.additionalUserInfo.providerId;
                    var operationType = authResult.operationType;
                    /**** I like to force emailVerified...... */
                    if (firebaseUser.emailVerified !== true) {
                        firebase.auth().currentUser.sendEmailVerification().then(function () {
                            /**** if using this, you can set up your own usermgmt.php page for the user verifications (see firebase docs) */
                         window.location.replace("https://my.app/usermgmt.php?mode=checkEmail");
                        }).catch(function (error) {
                            console.log("an error has occurred in sending verification email " + error)
                        });
                    }
                    else {
                        var accessToken = firebaseUser.qa;
                        /**** set the Cookie (yes, I found this best, too) */
                        setCookie('firebaseRegistrationID', accessToken, 1);
                            /**** set up the AJAX call to PHP (where you will store this data for later lookup/processing....) - I use "function=....." and "return=....." to have options for all functions and what to select for the return so that ajax.php can be called for 'anything' (you can just call a special page if you like instead of this - if you use this idea, be sure to secure the ajax.php 'function' call to protect from non-authorized use!) */
                            var elements = {
                            function: "set_user_data",
                            user: JSON.stringify(firebaseUser),
                            return: 'page',
                            accessToken: accessToken
                        };
                        $.ajaxSetup({cache: false});
                        $.post("data/ajax.php", elements, function (data) {
                            /**** this calls ajax and gets the 'page' to set (this is from a feature where I store the current page the user is on, then when they log in again here, we go back to the same page - no need for cookies, etc. - only the login cookie is needed (and available for 'prying eyes' to see!) */
                            url = 'index.php#' + data;
                            var form = $('<form method="post" action="' + url + '"></form>');
                            $('body').append(form);
                            form.submit();
                        });
                    }
                    return false;
                },
                signInFailure: function (error) {
                    console.log("error - signInFailure", error);
                    return handleUIError(error);
                },
                uiShown: function () {
                    var loader = document.getElementById('loader');
                    if (loader) {
                        loader.style.display = 'none';
                    }
                }
            },
            credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM,
            queryParameterForWidgetMode: 'mode',
            queryParameterForSignInSuccessUrl: 'signInSuccessUrl',
            signInFlow: signInFlow,
            signInSuccessUrl: url,
            signInOptions: [
                firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                //     firebase.auth.FacebookAuthProvider.PROVIDER_ID,
                //     firebase.auth.TwitterAuthProvider.PROVIDER_ID,
                {
                    provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
                    requireDisplayName: true,
                    customParameters: {
                        prompt: 'select_account'
                    }
                }
                /*      {
                        provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
                        // Invisible reCAPTCHA with image challenge and bottom left badge.
                        recaptchaParameters: {
                          type: 'image',
                          size: 'invisible',
                          badge: 'bottomleft'
                        }
                      }
                */
            ],
            tosUrl: 'https://my.app/login.php'
        };
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        (function () {
            ui.start('#firebaseui-auth-container', uiConfig);
        })();
    </script>

Now, on every page you want the user to see (in my case, it all goes through index.php#something - which makes it easier.... :)

 <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script>
    // Initialize Firebase - from https://github.com/firebase/firebaseui-web
    var firebaseUser;
    var config = {
        apiKey: "your_key",
        authDomain: "yourapp.firebaseapp.com",
        databaseURL: "https://yourapp.firebaseio.com",
        projectId: "yourapp",
        storageBucket: "yourapp.appspot.com",
        messagingSenderId: "the_number"
    };
    firebase.initializeApp(config);
    initFBApp = function () {
        firebase.auth().onAuthStateChanged(function (firebaseuser) {
                if (firebaseuser) {
                    /**** here, I have another ajax call that sets up some select boxes, etc. (I chose to call it here, you can call it anywhere...) */
                    haveFBuser();
                    firebaseUser = firebaseuser;
                    // User is signed in.
                    var displayName = firebaseuser.displayName;
                    var email = firebaseuser.email;
                    var emailVerified = firebaseuser.emailVerified;
                    var photoURL = firebaseuser.photoURL;
                    if (firebaseuser.photoURL.length) {
                        /**** set the profile picture (presuming you are showing it....) */
                        $(".profilepic").prop('src', firebaseuser.photoURL);
                    }
                    var phoneNumber = firebaseuser.phoneNumber;
                    var uid = firebaseuser.uid;
                    var providerData = firebaseuser.providerData;
                    var string = "";
                    firebaseuser.getIdToken().then(function (accessToken) {
                        // document.getElementById('sign-in-status').textContent = 'Signed in';
                        // document.getElementById('sign-in').textContent = 'Sign out';
                        /**** set up another ajax call.... - to store things (yes, again.... - though this time it may be due to firebase changing the token, so we need it twice...) */
                        string = JSON.stringify({
                            displayName: displayName,
                            email: email,
                            emailVerified: emailVerified,
                            phoneNumber: phoneNumber,
                            photoURL: photoURL,
                            uid: uid,
                            accessToken: accessToken,
                            providerData: providerData
                        });
                        if (accessToken !== '<?php echo $_COOKIE['firebaseRegistrationID']?>') {
                            console.log("RESETTING COOKIE with new accessToken ");
                            setCookie('firebaseRegistrationID', accessToken, 1);
                            var elements = 'function=set_user_data&user=' + string;
                            $.ajaxSetup({cache: false});
                            $.post("data/ajax.php", elements, function (data) {
                                <?php
                                /**** leave this out for now and see if anything weird happens - should be OK but you might want to use it (refreshes the page when firebase changes things.....  I found it not very user friendly as they reset at 'odd' times....)
                                /*
                            // var url = 'index.php#<?php echo(!empty($user->userNextPage) ? $user->userNextPage : 'dashboard'); ?>';
                            // var form = $('<form action="' + url + '" method="post">' + '</form>');
                            // $('body').append(form);
                            // console.log('TODO - leave this form.submit(); out for now and see if anything weird happens - should be OK');
                            // form.submit();
                            */
                                ?>
                            });
                        }
                    });
                } else {
                    console.log("firebase user CHANGED");
                    document.location.href = "../login.php";
                }
            }, function (error) {
                console.log(error);
            }
        );
    };
    window.addEventListener('load', function () {
        initFBApp();
    });
</script>

Hope this helps. It is from my working system, which includes some extra features I've put in there along the way, but mostly it is directly from firebase so you should be able to follow along well enough.

Seems a much simpler route to take than your original one.