> For the complete documentation index, see [llms.txt](https://woostore.gitbook.io/woostore-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://woostore.gitbook.io/woostore-docs/social-login.md).
# Social Login
## Uncommenting the code
* Uncomment Facebook and GooglePlus import in **src/app/app.module.ts** ,**src/pages/account/my-account/my-account.ts , src/pages/checkout/billing-address-form/billing-address-form.ts**
```bash
//import { Facebook } from '@ionic-native/facebook';
//import { GooglePlus } from '@ionic-native/google-plus';
```
* Uncomment Facebook and GooglePlus in provides section of **src/app/app.module.ts**
```
// Facebook,
// GooglePlus,
```
{% hint style="info" %}
Social login is used in three pages
1. src/pages/account/my-account
2. src/pages/account/register
3. src/pages/checkout/billing-address-form
I am telling the steps to enable social login on of the pages. Follow the same for other pages
{% endhint %}
* Uncomment GooglePlus, Facebook constructor **src/pages/account/my-account/my-account.ts** file
```
private googlePlus: GooglePlus, private fb: Facebook
```
* Uncomment Social login in **src/pages/account/my-account/my-account.ts** file
```coffeescript
/* facebookLogin() {
this.facebookSpinner = true;
this.fb.login(['public_profile', 'user_friends', 'email']).then((response) => {
this.service.sendToken(response.authResponse.accessToken).then((results) => {
this.facebookSpinner = false;
this.nav.setRoot(TabsPage);
this.functions.showAlert('success', 'Logged in successfully');
});
}).catch((error) => {
console.log(error)
this.facebookSpinner = false;
this.functions.showAlert('Error', error);
});
}
gmailLogin() {
this.googleSpinner = true;
this.googlePlus.login({
'scopes': '',
'webClientId': this.config.webClientId,
'offline': true
}).then((res) => {
this.gres = res;
console.log(this.gres);
this.googleSpinner = false;
this.values.avatar = res.imageUrl;
this.service.googleLogin(res).then((results) => {
this.functions.showAlert('success', 'Logged in successfully');
this.nav.setRoot(TabsPage);
});
}).catch((err) => {
this.googleSpinner = false;
this.error = err;
this.functions.showAlert('Error', err);
console.error(err);
}); } */
```
* Uncomment Social login buttons in **src/pages/account/my-account/my-account.html** file
```markup
```
## **Google Authentication**
1. Get your credentials from Google.
2. Install the Google native plugin.
**1.** **Get your credentials from Google.**
Go to [https://console.firebase.google.com](https://console.firebase.google.com/) and create a project.
Once project is added we need to create both ios and android app in firebase console [https://console.firebase.google.com](https://console.firebase.google.com/).
**let’s start with the iOS one,**
Choose your project. Click **settings icon** and then select **project settings**
Click on **ADD APP** and then choose platform
It will ask you an iOS Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (**id=”com.ionicframework.something”**) from your **config.xml** file.
Click REGISTER APP. It will generate **GoogleService-Info.plist** file.
Click on Download GoogleService-Info.plist file, which is a config file for iOS.
After downloading GoogleService-Info.plist file click on **`Continue > Continue > FINISH`**.
Copy **GoogleService-Info.plist** file to your project root directory.
{% hint style="info" %}
You will get REVERSED\_CLIENT\_ID from the downloaded GoogleService-Info.plist file. REVERSED\_CLIENT\_ID is required while installing Google native plugin at the later stage.
{% endhint %}
**Once we add iOS app, we need to add Android app.**
Click **ADD APP** and choose android platform
It will ask you an Android Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (**id=”com.ionicframework.something”**) from your config.xml file.
Click REGISTER APP. It will generate **google-services.json** file
Click on Download google-services .json file, which is a config file for Android.
After downloading **google-services.json** file click on **`Continue > FINISH`**
Copy **google-services.json** file to your project root directory
You will get CLIENT\_ID from the downloaded google-services.json file.
Add CLIENT\_ID in **src/providers/config.ts** file
```typescript
webClientId: any = '456352511209-fbam1kgj6354543fgfdfdstvfidbs1.apps.googleusercontent.com';
```
2\. **Install the GooglePlus Cordova Plugin.**
We will get REVERSED\_CLIENT\_ID in GoogleService-Info.plist file
Run following command to install GooglePlus Cordova plugin
```
ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=CLIENT_ID
```
```
npm install --save @ionic-native/google-plus
```
## **Facebook Authentication**
Make sure you've registered your Facebook app with Facebook and have an `APP_ID`
1.First have to create a new Facebook App inside of the Facebook developer portal at
Retrieve the `App ID` and `App Name`
2.Add **android** and **ios** platform. Go to settings>basics as shown below and click **Add Platform**.
3.Fill required fields while adding android and ios platforms and save changes.
4.Final step, Change status of the app from **development mode** to **Live .**
Install the Cordova and Ionic Native plugins. where `App ID` and `App Name` are the values from the Facebook Developer portal.
```
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
```
```
npm install --save @ionic-native/facebook
```
{% hint style="info" %}
Make sure to add
``*`yourappid`*``
``*`yourappname`*``
in **platforms/android/app/src/main/res/values/strings.xml**
Now you are ready to build your app.
{% endhint %}
```
ionic cordova build android
```
```
ionic cordova build ios
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://woostore.gitbook.io/woostore-docs/social-login.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.