In this tutorial we’ll cover how to implement Facebook Login in Angular 10 with an example app that allows you to login with Facebook and view/update/delete accounts registered in the Angular app.
The first time you login with Facebook an account is registered in the Angular app with your Facebook id so it can identify you when you login again with Facebook. The account is created with the name from your Facebook account and an extraInfo field with some default text, both the name and extra info can be updated in the Angular app, and updating account details only changes them in the app it doesn’t affect anything on Facebook.
Angular Facebook Login App Details
The example app contains the following three routes (pages) to demonstrate logging in with Facebook, viewing accounts and updating account details:
- Login (
/login) - contains a Facebook login button that triggers authentication with Facebook and registration/authentication with the Angular app. - Home (
/) - displays a list of all accounts in the Angular app with buttons to edit or delete any of them. - Edit Account (
/edit/:id) - contains a form to update the specified account details.
Facebook App is required for Facebook Login
To integrate Facebook Login into a website or application you need to create a Facebook App at https://developers.facebook.com/apps/ and set up the Facebook Login product under the App. Creating a Facebook App will provide you with a Facebook App ID which is required when initializing the Facebook JavaScript SDK (FB.init(...)). For more info see the Facebook Login docs at https://developers.facebook.com/docs/facebook-login/web.
The example Angular app uses a Facebook App named JasonWatmore.com Login Example that I created for this tutorial (App ID: 314930319788683). The Facebook App ID is located in environment.ts and environment.prod.ts in the example.
Fake backend API
The example Angular app runs with a fake backend api by default to enable it to run completely in the browser without a real api (backend-less), the fake api contains routes for authentication and account CRUD operations and it uses browser local storage to save data. To disable the fake backend you just have to remove a couple of lines of code from the app module, you can refer to the fake-backend to see what’s required to build a real api for the example.
Updates only affect data in the Angular app
Updating or deleting account information in the Angular app will only change the data saved in the app, it won’t (and can’t) change anything in the associated Facebook account.
Authentication flow with Facebook access tokens and JWT tokens
Authentication is implemented with Facebook access tokens and JWT tokens. On successful login to Facebook an access token is returned to the Angular app, which is then used to authenticate with the api (or fake backend) which returns a short lived JWT token that expires after 15 minutes. The JWT is used for accessing secure routes on the api and the Facebook access token is used for re-authenticating with the api to get a new JWT token when (or just before) it expires, the Angular app starts a timer to re-authenticate for a new JWT token 1 minute before it expires to keep the account logged in.
#angular #angular 10 #facebook
