Jump to Firebase Console , login if required, and create a new project.

Give it a cool name, agree to the terms and Create your project

Now, on the Firebase dashboard, click on Authentication on the left panel, then move to Sign-in method tab

Make sure you enable all required providers using which your user may want to signin.

Twitter, Facebook and GitHub login

In order to login using any of 3rd party providers, you might need to follow their setup guide (you can do by clicking Learn more)

So good, sooo faaaar.

Now, If you are hosting it on a domain (and not localhost), you MUST add your domain as one of trusted ones. To do this, scroll down for Authorized Domains and add your domain name to it.

This needs some concentration and enough patience.

Now, let's Setup Firebase in Web

We might want to replace lines in js that has your project configs. To do this, first move to your Firebase Project's dashboard. In there click the Web icon, to get your project config

You will be provided with something similar to this. Copy the contents inside THE RECTANGLE BOX highlighted

Now open XAMPP/htdocs/play/js/fb.js or /var/www/public_cpps/play/js/fb.js

In the beginning of the file, paste what you have copied, so it would look something similar to this,

Note: If you are hosting on DOMAIN (not on localhost), you might want to change url: 'http://play.localhost/member', just few lines below (as seen in the pic)

Next, open XAMPP/htdocs/play/js/member.js or /var/www/public_cpps/play/js/member.js and repeat the same procedure as you did for fb.js.

Now, in this same member.js file, If you are hosting on DOMAIN and not localhost, you should change all occurance of localhost to your domain name

Also, this file contains URLs for Avatar (change it as required)

This file also contains POST requests to TimeFlex server, it's already listening on a cloudflare supported HTTP port. Change it as required.

In order for this Firebase integration to work, you require a specialized login system - autologin, that logs you in via firebase authentication system.

To do this, first you need to download autologin.swf into your client folder.

Now to edit dependencies.json, open the file media1/play/v2/client/dependencies.json

Find the following

{
	"id": "login",
	"title": "Login Screen"
}

After that add a comma (,) and paste the following

{
	"id": "autologin",
	"title": "Auto Login"
}

It should look something like

Save. And it's all DONE!

Make sure you have Timeline v7.2 or later, in order to support Firebase Login System.

Now, go to Firebase Project' dashboard, click on the gear (setting) icon, click Project Settings, go to Service accounts tab

Scroll down, click on Generate new private key button

You will receive a popup, click on Generate Key. A json file will download.

Rename the json file to FirebaseCredential.json

Now, move the FirebaseCredential.json file to Desktop/Timeline-master/configs/ folder

You will have something similar to this

You are done with Timeline setup. Make sure you have installed firebase-admin python module (pip install firebase-admin)

First, install required python modules

Good, now download TimeFlex webserver

Open Database.py inside TimeFlex-master folder. Edit your mysql configurations, and save the file.

Open Flex.py, find the following

CORS(app, supports_credentials=True, origins=['play.localhost', 'localhost'])

replace localhost, or add your own domains through which you are going to send request to TimeFlex.

Tip? Just change localhost to your domain name like mycpps.pw

Now one IMPORTANT stuff to do - FirebaseCredential.json, copy the same FirebaseCredential.json you have downloaded in previous topic, that you have placed in Timeline-master/configs, and place the file in TimeFlex/config. So you would have something like

Now, all that's left to do is Run TimeFlex

To do that, execute the following command

YaYYYY! all done now you can just visit play.localhost or play.mycpps.pw and enjoy the brand new login system

Below is a look at the login system