javascript - Authenticate Firebase/Firechat with Wordpress user or database -

i'm trying use wordpress users authenticate automatically firebase/firechat.

you can see here on documentation firebase can use custom authentication, using secure json web tokens: https://firechat.firebaseapp.com/docs/

they refer firebase page describes generating , using these tokens in depth: https://www.firebase.com/docs/web/guide/login/custom.html?utm_source=docs&utm_medium=site&utm_campaign=firechat

so i'm trying accomplish these things:

1. if user logged-in, have firechat recognize user-login , set chat alias that.

2. if not logged-in, can still see chat when go talk should prompt them register or login (if take @ main example in firechat documentation using twitter login, can see using this. firechat example on home page well).

3. set user moderator if author of page. not important i'd rather focus on getting chat work first , worry later.

from understand functionality in firechat, , firebase apparently able authenticate server/system provided can generate proper credentials. can't seem working , must have read documentation hundred times.

with said, here farthest i've gotten:

<!-- jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <!-- firebase --> <script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>  <!-- firechat --> <link rel="stylesheet" href="https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.css" /> <script src="https://cdn.firebase.com/libs/firechat/2.0.1/firechat.min.js"></script>  <?php  include('./wp-blog-header.php'); include( './wp-load.php' );  //wordpress global variables global $user_login; global $post; global $wpdb; global $user_login; global $current_user;  ?>         <div id="firechat-wrapper"></div>      <script type="text/javascript"> var firebasetokengenerator = require("firebase-token-generator"); var tokengenerator = new firebasetokengenerator("firebase-secret"); var catoken = tokengenerator.createtoken({ uid: $user_login });  var chatref = new firebase("https://yourfirebase.firebaseio.com/chat"); chatref.authwithcustomtoken(catoken, function(authdata) {     if (authdata) {         var chat = new firechatui(chatref, document.getelementbyid('firechat-wrapper'));         chat.setuser(authdata.uid, authdata[authdata.provider].displayname);     } });     </script> 

the problem it's not generating token @ all, "firebasetokengenerator" not being called on (it's not included in cdn afaik). i'm not sure how call on javascript, know there php helper library it.

it's simple as:

<?php   include_once "firebasetoken.php";   $tokengen = new services_firebasetokengenerator("<your_firebase_secret>");   $token = $tokengen->createtoken(array("uid" => "custom:1")); ?> 

but problem i've no idea how pass information php javascript. i'm pretty confused how works. have generate new token each user? or 1 time server, , let login system handle authentication?

hopefully i've not left out, if need more information ask! reading.

congratulations!

firebase , firechat fun!

place javascript in scriptfile , localize token data. initialize chat token.

i'm using composer place php-files inside back-end. need both php-jwt , token-generator. take @ packagist browser!

"firebase/php-jwt": "^2.1", "firebase/token-generator": "^2.0" 

https://packagist.org/packages/firebase/php-jwt

https://packagist.org/packages/firebase/token-generator

if not using composer, include downloaded source @ fixed place inside project , include libraries.

implementation example

the php-file initialize chat backend logged-in user:

/* firechat-example.php */ $userdata = get_userdata( get_current_user_id() ); $tokengen = new \services_firebasetokengenerator( "#your-token-from-firebase#" ); $token    = $tokengen->createtoken( array( "uid" => 'custom:'.$userdata->id ), array( "admin" => true ) ); wp_enqueue_script( 'your-chat-js', get_stylesheet_directory_uri() . '/firechat-example.js', [ 'jquery' ], null, true );  $data = [             'token' => $token,             'user_id'   => $userdata->id,             'user_name' => $userdata->display_name,         ];  wp_localize_script( 'your-chat-js', 'firechat_backend', $data ); echo '<div class="firechat-wrapper"></div>' 

and js-file localized wordpress, eg theme or plugin:

/* firechat-example.js */ jquery( document ).ready(function($) {     var firechatref = new firebase('https://your-firebase-app-name.firebaseio.com/chat');     firechatref.authwithcustomtoken( firechat_backend.token, function(error, authdata) {     if (error) {         console.log(error);     }     else {         var chat = new firechatui(firechatref, document.getelementbyid('firechat-wrapper'));         chat.setuser( firechat_backend.user_id, firechat_backend.user_name, function(user) {                 chat.resumesession();             });         }     }); }); 

the hard part customize chat it's story using sourcecode firechat github repo , "grunting" changes new distribution wordpress-chat :-)