AngularJS Popup Window Social Authentication Directive

Handsontable JavaScript Spreadsheet Most popular component for web apps

AngularJS Auth Facebook Login Directive
full code in repo:

Quick example of how you can use JavaScript to open a popup and authenticate a user using Facebook login and return the values back to your Angular app. I have turned the code into an angular directive which is on my github.

I am using:
– AngularJS front-end
– Laravel PHP back-end
– Facebook Auth 2.0 SDK PHP

This is the workflow.

popup window code dual screen [link]
laravel facebook login example [link]
social authentication options [link]

User clicks the login with Facebook button and popup window is loaded.

When the user logs in with Facebook and they see this:

Then, the user has options to select what they give to us.

They click OK and it returns to the callback url (specified in app settings or passed in value).

This is the debug return from back-end (the user does not see this).
We can auto close the popup by checking in intervals for a popup window value, when it changes we grab it and close the popup.

There is a strict cross origin (domain) policy which exists between parent window and child (the popup window). So we need to put the check in a try and catch the error so we can continue to check for completion of the auth. The facebook auth returns a code parameter so when this is present we know it has finished and we can close the child and finish the login.

If login was successful, we redirect to the home route. This will load in our user data from the back-end.


“You are using a display type of ‘page’ in a small browser window or popup. For a better user experience, show this dialog with our JavaScript SDK without specifying an explicit display type. The SDK will choose the best display type for each environment. Alternatively, use display type ‘popup’ if you have special requirements precluding you from using the SDK. This message is only visible to developers of your application.

I guess we need a bigger popup. However “This message is only visible to developers of your application.” so no need to worry about it.


Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

5 thoughts on “AngularJS Popup Window Social Authentication Directive

Leave a Reply to ameanmbot Cancel reply

Your email address will not be published. Required fields are marked *