Skip to content

Commit f2bfda9

Browse files
hiepxanhdavideast
authored andcommitted
docs(): authentication tutorial with ionic and rxjs compact for angularfire2 ^rc.10 (angular#1721)
* authentication tutorial with ionic authentication with ionic and firebase * fix typo error thank you @davideast for guiding me to present the article better * small changes * update rxjs-compat for angular v6 * update for angularfire rc 11 * no shortcode
1 parent 3152fc4 commit f2bfda9

File tree

2 files changed

+105
-0
lines changed

2 files changed

+105
-0
lines changed

docs/ionic/authentication.md

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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)

docs/ionic/v3.md

+4
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,10 @@ _This should add angularfire2, promise-polyfill and firebase entry in your proje
168168
"promise-polyfill": "^6.0.2",
169169
```
170170

171+
As the Angularfire2 v5+ rc10 requires rxjs6, you need to install rxjs-compat for angular version < 6.0:
172+
```
173+
npm install rxjs@6 rxjs-compat@6 promise-polyfill --save
174+
```
171175
### Setup @NgModule
172176

173177
Open your project in your favourite editor and open the `app.module.ts` file, under `src/app`

0 commit comments

Comments
 (0)