| 
 | 1 | +# Step 1: install this plugin:   | 
 | 2 | +```  | 
 | 3 | +ionic cordova plugin add cordova-universal-links-plugin  | 
 | 4 | +ionic cordova plugin add cordova-plugin-buildinfo  | 
 | 5 | +ionic cordova plugin add cordova-plugin-browsertab  | 
 | 6 | +ionic cordova plugin add cordova-plugin-inappbrowser  | 
 | 7 | +(for ios)  | 
 | 8 | +ionic cordova plugin add cordova-plugin-customurlscheme   | 
 | 9 | +```  | 
 | 10 | + | 
 | 11 | +# Step 2: Add Firebase to your Ionic  | 
 | 12 | + | 
 | 13 | + **Install firebase to angular project**  | 
 | 14 | + | 
 | 15 | +Follow [this tutorial](https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md) to make a basic setup for your Ionic project.  | 
 | 16 | + | 
 | 17 | + **To set up in an Android app**   | 
 | 18 | + | 
 | 19 | +Go to [Firebase console](https://console.firebase.google.com/) then click **Add Firebase to your Android app** and follow the setup steps.  | 
 | 20 | + | 
 | 21 | + | 
 | 22 | +# Step 3: Set up Firebase Authentication for Cordova ( summary from [firebase instruction](https://firebase.google.com/docs/auth/web/cordova))  | 
 | 23 | + | 
 | 24 | + **Setup Dynamic Link**  | 
 | 25 | + In the Firebase console, open the **Dynamic Links** section at bottom left panel, setup by their instruction  | 
 | 26 | + | 
 | 27 | + **Add dynamic link**  | 
 | 28 | + *Add this to config.xml at root level of project:*  | 
 | 29 | +```xml  | 
 | 30 | +     <universal-links>  | 
 | 31 | +        <!-- this is dynamic link created in firebase -->  | 
 | 32 | +        <host name="zm4e4.app.goo.gl" scheme="https" />  | 
 | 33 | +        <!-- this is your firebase app link -->  | 
 | 34 | +        <host name="routing-aadd4.firebaseapp.com" scheme="https">  | 
 | 35 | +            <path url="/__/auth/callback" />  | 
 | 36 | +        </host>  | 
 | 37 | +    </universal-links>  | 
 | 38 | +    <!-- for android -->  | 
 | 39 | +    <preference name="AndroidLaunchMode" value="singleTask" />  | 
 | 40 | +```  | 
 | 41 | + | 
 | 42 | +  *Make sure your `<widget id="com.yourandroid.id" ... >` the same with android app's id you   | 
 | 43 | +  added in firebase*  | 
 | 44 | + | 
 | 45 | +# Step 4: Add login code:  | 
 | 46 | +at `login.service.ts` add this function:   | 
 | 47 | +```ts  | 
 | 48 | + | 
 | 49 | +import { AngularFireAuth } from 'angularfire2/auth';  | 
 | 50 | +import * as firebase from 'firebase/app';  | 
 | 51 | +import AuthProvider = firebase.auth.AuthProvider;  | 
 | 52 | + | 
 | 53 | +export class AuthService {  | 
 | 54 | +    private user: firebase.User;  | 
 | 55 | +	constructor(public afAuth: AngularFireAuth) {  | 
 | 56 | +		afAuth.authState.subscribe(user => {  | 
 | 57 | +			this.user = user;  | 
 | 58 | +		});  | 
 | 59 | +	}  | 
 | 60 | +    | 
 | 61 | +  signInWithFacebook() {  | 
 | 62 | +		console.log('Sign in with google');  | 
 | 63 | +		return this.oauthSignIn(new firebase.auth.FacebookAuthProvider());  | 
 | 64 | +	}  | 
 | 65 | + | 
 | 66 | +  signInWithGoogle() {  | 
 | 67 | +		console.log('Sign in with google');  | 
 | 68 | +		return this.oauthSignIn(new firebase.auth.GoogleAuthProvider());  | 
 | 69 | +	}  | 
 | 70 | + | 
 | 71 | +  private oauthSignIn(provider: AuthProvider) {  | 
 | 72 | +		if (!(<any>window).cordova) {  | 
 | 73 | +			return this.afAuth.auth.signInWithPopup(provider);  | 
 | 74 | +		} else {  | 
 | 75 | +			return this.afAuth.auth.signInWithRedirect(provider)  | 
 | 76 | +			.then(() => {  | 
 | 77 | +				return this.afAuth.auth.getRedirectResult().then( result => {  | 
 | 78 | +					// This gives you a Google Access Token.  | 
 | 79 | +					// You can use it to access the Google API.  | 
 | 80 | +					let token = result.credential.accessToken;  | 
 | 81 | +					// The signed-in user info.  | 
 | 82 | +					let user = result.user;  | 
 | 83 | +					console.log(token, user);  | 
 | 84 | +				}).catch(function(error) {  | 
 | 85 | +					// Handle Errors here.  | 
 | 86 | +					alert(error.message);  | 
 | 87 | +				});  | 
 | 88 | +			});  | 
 | 89 | +		}  | 
 | 90 | +	}  | 
 | 91 | +}  | 
 | 92 | +```  | 
 | 93 | + | 
 | 94 | +# Common problems  | 
 | 95 | + | 
 | 96 | +If you got error when build code like this:  | 
 | 97 | +`UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'manifest' of undefined`  | 
 | 98 | + | 
 | 99 | +Please, using this fix from [issue](https://github.com/nordnet/cordova-universal-links-plugin/issues/134):  | 
 | 100 | +> Making this change in 'cordova-universal-links-plugin/hooks/lib/android/manifestWriter.js' fixed this issue for me:  | 
 | 101 | +> [b2c5784#diff-d5955d9f4d88b42e5efd7a3385be79e9](https://github.com/nordnet/cordova-universal-links-plugin/commit/b2c5784764225319648e26aa5d3f42ede6d1b289#diff-d5955d9f4d88b42e5efd7a3385be79e9)  | 
0 commit comments