Parse + Login with Facebook

If you create an application you probably will need to handle users somehow. If your application is front-end heavy and didn’t require big, complex database or complex server side login, you don’t want to spend too much time developing it. That was my situation with my extension as well. I wanted only store some user data and the user’s rules. Rules to control their browsing habits. So I searched for an easy to use, fast to setup and a cheap solution. That’s when Parse come into picture.


Parse is a platform. A cloud-based platform that provides a complete backend solution for your application. Parse’s goal is to totally eliminate the need for writing server code or maintaining servers.

The Parse team is using striped 1000 Provisioned IOPS volumes for MongoDB clusters running on Amazon Elastic Compute Cloud (Amazon EC2) instances. What is very impressive to hear. You can read more about it.

But let’s see what it offers to you, to the developer:

Easy to use. It is just some click to create your first application. Creating some tables is easy as well.

TIPP : Adding data and creating some extra relations between tables are more than the Launchpad is capable for. You need to use your code to do that. Sometimes it is not just the easiest way you can find it is recommended by the developers of Parse as well.

Really well documented. The basics are all in the documentation. They have FAQ section with really good answers.

TIPP : Only thing what I couldn’t get from them is a really useful documentation about authentication with Facebook if it isn’t the basic way and third party authentications. But more about it later in the second part of this blog post.

Easy to observe. You can monitor all of your data on the Launchpad. It is easy to check, update and delete the existing data.

TIPP : If you open your app on the Launchpad, choose the Data section and see nothing don’t panic. It shows you always the Analytics tab first. Change to Core and you will get your data you wanted to see.

Easy to use in code. It provides a lot of SDKs and a REST API as well to handle data from any platform.

More. It can do so much more than I used it for. It can send push notifications, show you analytics about everything and more.

Handle growth. If your app grows bigger and require more logic on back-end you have the first option to write some cloud code. There are hooks to handle the incoming and outgoing data.

After getting bigger than this you have one more step not to leave Parse just extend it. The Parse Hooks API that makes it possible to use your own Node.js server in conjunction with Parse.

But if nothing is enough you can easily export your data into JSON. Build your own server side and fill your data into your database with parsing data from the JSON files. Each table with the containing data will be one file.

And not to mention it is free. Free for commercial use until your app will be so big that it isn’t a problem paying for the services.75689840-7165-4c58-a2af-eb8a06a27c20

It is in hands of Facebook. It can build trust and give some kind of guarantee if such a big company is behind it. Like in case of React. It is used and tested in such a big user visited site like Facebook. It is part of the Facebook Open Source Program.

TIPP : Parse’s Javascrip SDK is open-source. Checking the code could help so much if you can’t find or understand something.

Developing with Parse

Parse gives you a really cool REST API to handle data in the universal mode. But if you want to have something platform specific you have options too. It provides a  lot of SDKs. It has Android, iOS, PHP, .NET an so much more. Of course it provides a JavaScript SDK as well. But working with Parse in TypeScript isn’t a problem neither because it has typings available too. You can use a direct link or install it with TSD.

Not to mention if you develop a React application using Parse you get an extra customized SDK to React.

It supports everything we need to start developing our extension.

It is one line only to initialize:


Building blocks of it are the Objects.

Parse.Object contains key-value pairs of JSON-compatible data. This data is schemaless, which means that you don’t need to specify ahead of time what keys exist on each Parse.Object.


You can use your Objects through Querys.


ruleParseObjects is the container list of all the original Parse.Objects.

Objects have the save and destroy methods on itself. So if you cast your data to something else like me you need to handle the linking between the new objects and the Parse objects. I created an IRule object from the Obejcts given by Parse, passing only the data for my React components. So I saved in my parseService class the original Obejcts as well. Linked them with the object ids to the IRule objects.


TIPP : It is important to be careful with naming convention because Parse can’t handle it. It will create new columns in your data table if you misspell something.


It is so easy to use. The goals of this post was only to show you how easy to use Parse for simple problems. After knowing the basics of Parse let’s see the bigger problem that I used it for Parse as the solution. It was the login. It has three parts to get things work. Setting up Facebook, setting up Parse and hacking the crazy things of an extension.

Login with Facebook

Using Facebook logic didn’t come so obvious for me. If you are someone like me you neither like to give access to your profile for unknown applications. But I thought about it and something I more dislike is to register myself again for something new. Problems with giving a unique nickname or finding out a new password – sometimes with too strong requirements – and of course remembering all of that is more frustrating for me. So I decided to save this procedure for my users. Made their life with that easier I think. It is just few click to register and to login. Think about it. It requires only your email – for custom registrations it is also required – your name and sometimes some public data. Only public. Data, what is already available for everyone on the internet. Actually it isn’t so strange to do that from this perspective.

It could be of course not just the Facebook to login. It could be Google+, Twitter or whatever third-party login as well. But Parse gives you the Facebook login out of the box. I decided to lunch my application with it and after some user feedbacks or after a hundred of users I will work on adding other login providers to my app. Doing so isn’t so obvious with Parse.

But let’s see how I built Facebook login into my extension in. It wasn’t as easy as I first thought.

Creating a Facebook app is easy. It is really well documented. (As I mentioned it previously by React and Parse too – Facebook does this documentations thing good, makes developer’s life easier)

Register your Facebook app.

After having the Facebook account registered as a developer the next step is to register the url of your website for getting things done. The url of your extension is chrome-extension://iccdneeippnmcmbaekeoonkckkjhojfi/UI/Popups/index.html. It runs in the local environment of users installed your extension. It isn’t the url you could use. So you can’t register your extension as a web app / website.

Here comes the trick. You need to host a site with the scripts of the Facebook init and login. After that you need to add this site to your extension as a content of an iframe. You didn’t need to create a whole login site and change your extension’s login site to it. I created only a button for this purpose. An iframe with a size of a button and the site hosted somewhere only containing a button.

OK, I can login with Facebook now but how does the extension know about it? – could be a right question. Here comes the messaging system of the extensions into the picture. But let’s see the Parse part of the login first.

Parse part

Parse gives you Facebook login out of the box. After checking the tutorial on the Parse site you could reach an incorrect conclusion as I did. I thought first that I need to use the two together as it is in the examples.



After I logged in the user that way I checked what happened. I had the logged-in user on my site, not in the extension. I thought I can post the required credentials to the extension. I checked what are stored into local storage after the login process because I saw that the Parse.User.current() method operates with the data in the storage. So I passed the local storage data to the extension saved into the local storage of the extension. After reloading the extension it could link the session on Parse side with the local storage data in the extension. Sounds terrible I know and it worked only deterministic way. Sometimes not. I needed to find something better. A real solution.

This was the first time when the documentation of Parse couldn’t help at all. So I searched for similar problems and I could find something. There is an option to give credentials for the FacebookUtils.login method of Parse. It means you can handle the two login separated. Login your user first with Facebook and after that logging your user with the Facebook’s credentials into Parse.


This was the original code of Facebook to handle login and get some user data. This site and this code will be embedded into an iframe – into an iframe of the extension. So the easiest way to send message to the extension’s background page is getting the top window and sending the message from it. The receiver code which will use Parse’s login with passing the credentials is on the following picture.


So this is the way the user can log in with using only one button. With the button loaded into an iframe hosted on a separated site which handles in the background everything else. Logs the user with Facebook in, send the login data to the extension and login user from the extension into Parse leading to the authorized user using your extension. That’s the way you can succeed all the login from the extension. It was not so easy to find out but it’s simple and clean as the result.

Summary of Extension tricks

1, Extension itself doesn’t enough if you want Facebook or Google+ login. Both – and almost all other – requires an address of your site. So you need to have a somewhere hosted site. After having the Facebook website configuration you can’t trick with calling it from your extension. It only works with the origin site built into the extension with an iframe.

2, Login with two separated steps. Login with Facebook on the hosted site and send credentials to the extension through the messaging system of the browser. After that login with this credentials to Parse. That’s how you get an authenticated user in your extension on an easy and fast way.


One thought on “Parse + Login with Facebook

  1. Pingback: Browse Wisely – The Extension | My Journey InTo JavaScript

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s