Facebook Account Kit integration with Angular 4

One week ago, I moved to a company in where I asked to design/develop a dashboard for controlling mobile application requests/responses using Angular 4.

I did some applications before using Angular 2/4 but all of them done using JWT authentication; I haven’t heard of Facebook Account Kit until I had asked to do the authentication of the system using it.

After Googling on the web I didn’t find much resources to do so, so today I’m gonna explain how to use Facebook Account Kit with Angular

1. Facebook Developers

Before you start, you have to create a Facebook developer account, and configure your app with { APP ID, APP Secret for the backend server,Version, State, tokens, etc..}. Also customizing your color set to match the design of your main app made it awesome.

You can find how to do the configuration in this video: Facebook Account Kit for web

Getting started with the configuration.

Customizing the UI for the modal.

After the integration with the Backend server, you’ll have these properties like appId, state, version

2. Front-end Plugin

For me, I found this helpful plugin Ng2-account-kit on Github, following the installation instructions with some modifications from my side to make it work fine with email login.

• NPM installation

npm i --save-dev ng2-account-kit

• Add SDK to index.html

• Initialize Account Kit and set up a JavaScript handler for login callback in index.html

 <script>
    AccountKit_OnInteractive = function() {
      AccountKit.init({
        appId:"187260727967251",
        state:"xx",
        version:"v1.2",
        fbAppEventsEnabled:true,
        debug:true
      });
    };
  </script>

• Integrate Account Kit login/register function your service

login(f): void {
  var emailAddress: string = f.value.emailAddress;
  AccountKit.login('EMAIL', { countryCode: "", emailAddress } ).then(
    (response: AuthResponse) => {
      console.log(response.code);
      // Your auth service to subscribe
    },
    (error: any) => console.error(error)
  );
}

Notes

• This is the login integration with Email, you’ll find the phone (SMS code) integration in FB Account Kit docs_** here
• In the plugin documentation, the owner didn’t mention that countryCode is mandatory even if you’re using the Email service, so I forked the repository with an optional countryCode found here_** d3vma-ng2-account-kit **if you don’t want to write a NULL countryCode property.

In collaboration with @Amr Ragaey