ionic login template code example

Example 1: google login issue ionic

1) Remove cordova-plugin-googleplus
	sudo cordova plugin rm cordova-plugin-googleplus
2) Install 5.2.1 version google plus
 	sudo cordova plugin add [email protected] --save --variable REVERSED_CLIENT_ID=com.googleusercontent.apps..... --variable WEB_APPLICATION_CLIENT_ID=.....apps.googleusercontent.com

Check App URL schemes if reversed client id is correct when `Custom scheme uris are not allowed for 'web' client type` error occurs

Example 2: ionic login page

<ion-content color="primary" padding>
  <form #form="ngForm" (ngSubmit)="login(form)">
    <ion-grid>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
          <div text-center>
            <h3>Login</h3>
          </div>
          <div padding>
            <ion-item>
              <ion-input name="email" type="email" placeholder="[email protected]" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
            </ion-item>
          </div>
          <div padding>
            <ion-button size="large" type="submit" [disabled]="form.invalid" expand="block">Login</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

Example 3: facebook login issue ionic

1) Remove Cordova Facebook Plugin
    sudo cordova plugin rm cordova-plugin-facebook4
2) Update Cordova iOS version 
	npm update -g cordova
	cordova platform rm ios
	cordova platform add [email protected]
3) Reinstall cordova facebook plugin
	sudo cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID=.... --variable APP_NAME=...
4) Add this to pod and install pod

	---- PODS ------	
	pod 'FBSDKCoreKit', '5.7.0'
	pod 'FBSDKLoginKit', '5.7.0'
pod 'FBSDKShareKit', '5.7.0'

Example 4: ionic login page

<ion-content  color="primary">
  <form  #form="ngForm" (ngSubmit)="register(form)">
    <ion-grid>
      <ion-row color="primary" justify-content-center>
        <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
          <div text-center>
            <h3>Create your account!</h3>
          </div>
          <div padding>
            <ion-item>
              <ion-input  name="name" type="text" placeholder="Name" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="email" type="email" placeholder="[email protected]" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
            </ion-item>
            <ion-item>
              <ion-input name="confirm" type="password" placeholder="Password again" ngModel required></ion-input>
            </ion-item>
          </div>
          <div padding>
            <ion-button  size="large" type="submit" [disabled]="form.invalid" expand="block">Register</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>