Step by step guide to adding facebook login to your Angular project
To add Facebook login functionality to your Angular project, you can use the ‘angularx-social-login’ library. Here’s a step-by-step guide:
Step 1: Create a Facebook App and Configure OAuth
- Go to the Facebook Developers.
- Create a new app or select an existing one.
- In the app dashboard, navigate to “Settings” > “Basic.”
- Note down the App ID and App Secret.
- Under “Add a Product,” choose “Facebook Login” and configure the OAuth settings. Add http://localhost:4200 to the Valid OAuth Redirect URIs for development.
- Save the changes.
Step 2: Create an Angular Project
If you haven’t created an Angular project yet, use Angular CLI:
ng new my-facebook-login-app cd my-facebook-login-app
Step 3: Install angularx-social-login
Install the ‘angularx-social-login’ library:
npm install angularx-social-login
Step 4: Configure Social Login Module
Configure the ‘SocialLoginModule’ in your Angular app. Open your ‘app.module.ts’ file and update it like this:
// src/app/app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login'; import { FacebookLoginProvider } from 'angularx-social-login'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, SocialLoginModule ], providers: [ { provide: 'SocialAuthServiceConfig', useValue: { autoLogin: false, providers: [ { id: FacebookLoginProvider.PROVIDER_ID, provider: new FacebookLoginProvider('YOUR_FACEBOOK_APP_ID') // Replace with your actual Facebook App ID }, ], } as SocialAuthServiceConfig, } ], bootstrap: [AppComponent] }) export class AppModule { }
Replace ‘YOUR_FACEBOOK_APP_ID’ with the actual App ID you obtained from the Facebook Developers portal.
Step 5: Create a LoginComponent
Create a new component named ‘login.component.ts’:
// src/app/login/login.component.ts import { Component } from '@angular/core'; import { SocialAuthService, FacebookLoginProvider } from 'angularx-social-login'; @Component({ selector: 'app-login', template: ` `, }) export class LoginComponent { constructor(private authService: SocialAuthService) {} signInWithFacebook(): void { this.authService.signIn(FacebookLoginProvider.PROVIDER_ID).then( (userData) => { console.log('Facebook login success:', userData); // Handle the successful login, e.g., set user state, store tokens, etc. }, (error) => { console.error('Facebook login failure:', error); // Handle the login failure, e.g., show an error message } ); } }
Step 6: Use LoginComponent in App Component
Update your ‘app.component.ts’ file to use the ‘LoginComponent’:
// src/app/app.component.ts import { Component } from '@angular/core'; import { LoginComponent } from './login/login.component'; @Component({ selector: 'app-root', template: `Angular Facebook Login
`, }) export class AppComponent {}
Step 7: Run Your Angular App
Save your files and run:
ng serve
Visit http://localhost:4200 in your browser. When you click the “Sign in with Facebook” button, it should trigger the Facebook login process.
Remember to replace ‘YOUR_FACEBOOK_APP_ID’ with your actual Facebook App ID. Additionally, handle the success and failure callbacks according to your application’s requirements.