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 access those endpoints I need to authenticate an user with email and password[1], retrieve an accessToken[2] und authorize every request to the endpoints with an Authorization: Bearer {accessToken} header.

I use php and struggle to wrap my mind around how to manage authenticated user in my app.

TL;DR please see my final solution in php only. https://stackoverflow.com/a/52119600/814031

I transfer the accessToken via ajax in a php session, to sign the cURL requests to the endpoints. Apparently there is no other way around than use the firebase JS auth (not as far as I understand[4]).

My question is: Is it enough to save the accessToken in a php session and compare it with every page load via an ajax POST request (see code below)? What would be a more robust strategy to handle that in php?

Edit: A user pointed out that using classic php sessions with JWT tokens don't make much sense and I read up about that topic. So regarding Firebase - is this something to consider? https://firebase.google.com/docs/auth/admin/manage-cookies

Firebase Auth provides server-side session cookie management for traditional websites that rely on session cookies. This solution has several advantages over client-side short-lived ID tokens, which may require a redirect mechanism each time to update the session cookie on expiration:

Here is what I got:

1. Login Page

As described in the Firebase examples[3]

function initApp() {

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in.

      // obtain token, getIdToken(false) = no forced refresh
      firebase.auth().currentUser.getIdToken(false).then(function (idToken) {

        // Send token to your backend via HTTPS
        $.ajax({
          type: 'POST',
          url: '/auth/check',
          data: {'token': idToken},
          complete: function(data){
            // data = {'target' => '/redirect/to/route'}
            if(getProperty(data, 'responseJSON.target', false)){
              window.location.replace(getProperty(data, 'responseJSON.target'));
            }
          }
        });
        // ...
      }).catch(function (error) {
        console.log(error);
      });


    } else {
      // User Signed out
      $.ajax({
        type: 'POST',
        url: '/auth/logout',

        complete: function(data){
          // data = {'target' => '/redirect/to/route'}
          if(getProperty(data, 'responseJSON.target', false)){
            // don't redirect to itself
            // logout => /
            if(window.location.pathname != getProperty(data, 'responseJSON.target', false)){
              window.location.replace(getProperty(data, 'responseJSON.target'));
            }
          }
        }
      });

      // User is signed out.
    }

  });
}

window.onload = function () {
  initApp();
};

2. a php controller to handle the auth requests

public function auth($action)
{

  switch($action) {
    // auth/logout
    case 'logout':

      unset($_SESSION);
      // some http status header and mime type header
      echo json_encode(['target' => '/']); // / => index page
    break;

    case 'check':

      // login.
      if(! empty($_POST['token']) && empty($_SESSION['token'])){

        // What if I send some bogus data here? The call to the Endpoint later would fail anyway
        // But should it get so far?

        $_SESSION['token'] = $_POST['token'];

        // send a redirect target back to the JS
        echo json_encode(['target' => '/dashboard']);
        break;
      }


      if($_POST['token'] == $_SESSION['token']){
        // do nothing;
        break;
      }
    break;
  }
}

3. the Main controller

// pseudo code
class App
{
  public function __construct()
  {
    if($_SESSION['token']){
      $client = new \GuzzleHttp\Client();
      // $user now holds all custom access rights within the app.
      $this->user = $client->request(
        'GET', 
        'https://us-centralx-xyz.cloudfunctions.net/user_endpoint',
        ['headers' => 
                [
                    'Authorization' => "Bearer {$_SESSION['token']}"
                ]
            ]
        )->getBody()->getContents();
    }else{
      $this->user = null;
    }
  }

  public function dashboard(){
    if($this->user){
      var_dump($this->user);
    }else{
      unset($_SESSION);
      // redirect to '/' 
    }
  }
}

Note: I'm aware of this sdk https://github.com/kreait/firebase-php and I read a lot in the issues there and in posts here on SO, but I got confused, since there is talk about full admin rights etc. and I really only interact with the endpoints that build upon firebase (plus firebase auth and firestore). And I'm still on php 5.6 :-/

Thanks for your time!

marcus marcus · Accepted Answer · 2018-08-31T16:34:43

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

Firebase Auth JS/PHP

3 Answers