|  | 
|  | 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