11# Using AngularFire with Ionic
22
3- This tutorial provides a walkthrough of integrating ANgularFIre Authentication with Ionic 3 /Angular 4+.
4- The below setup has been tested on Windows 10, but it should be same for Mac/ Linux.
3+ This tutorial provides a walkthrough of integrating AngularFire Authentication with Ionic 3 /Angular 4+.
4+ The below setup has been tested on Windows 10 and macOS Sierra , but it should be same for Linux.
55
66Note: - If you're working with Ionic2 and Angular2.0, then you should refer to ** Auth-with-Ionic2** tutorial
77[ here] ( https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic2.md )
88
9- Ensure that you're executing these commands as ** Administrator** on Windows and ** sudo** on Mac/Linux to avoid any errors.
9+ Ensure that you're executing these commands as ** Administrator** on Windows and ** sudo** on Mac/Linux if you get any permission errors.
1010
11- This tutorial uses ** Facebook** as the sign-in provider. After completion of this tutorial, you should be able to configure
11+ This tutorial uses ** Facebook** as the sign-in provider. After completing this tutorial, you should be able to configure
1212other sign-in providers like ** Twitter** , ** Google** on your own.
1313
1414### Prerequisites
1515The first step is to ensure you have latest version of ** Node** installed.
16- You can get the latest version from [ here ] ( https://nodejs.org ) .
17- This will install both node and npm.
16+ You can get the latest version from [ nodejs.org ] ( https://nodejs.org ) .
17+ This will install both ` node ` and ` npm ` .
1818
1919After installing node, check the version by executing the following command in your prompt window:
2020
2121``` bash
2222
23- C: \p rojects > node -v
23+ $ node -v
2424v6.10.2
25-
2625```
26+
2727As of this writing, this is the most stable version. If you're not on this version,
28- please upgrade yourself to latest version by installing node from [ here ] ( https://nodejs.org ) .
28+ please upgrade yourself to latest stable version by installing node from [ nodejs.org ] ( https://nodejs.org ) .
2929
3030Check your npm version by executing the following command:
3131``` bash
3232
33- C: \p rojects > npm -v
33+ $ npm -v
34343.10.10
35-
3635```
3736Install the Angular CLI, which will be used to build our Angular project and install Angular version 4 or later.
3837
3938``` bash
40- C: \p rojects > npm install -g @angular/cli
39+ $ npm install -g @angular/cli
4140```
4241Check your angular version by executing the following command:
4342
4443``` bash
45- C: \p rojects > ng -v
44+ $ ng -v
4645
4746@angular/cli: 1.0.0
4847node: 6.10.2
@@ -57,39 +56,34 @@ Execute the following commands.
5756
5857``` bash
5958
60- C:\p rojects> npm install -g cordova
61-
62- C:\p rojects> npm install -g ionic
63-
59+ $ npm install -g cordova ionic
6460```
6561
66- Once the above commands are executed successfully, check the versions of cordova and ionic by executing the following commands.
62+ Once the above command is executed successfully, check the versions of cordova and ionic:
6763
6864``` bash
69- C: \p rojects > cordova -v
65+ $ cordova -v
70667.0.1
7167
72- C: \p rojects > ionic -v
68+ $ ionic -v
73693.4.0
7470```
7571
76- These are the latest versions as of this writing.
77-
78- On successful execution of the above commands, you're all set to create your app with Ionic framework.
72+ You're all set to create your app with Ionic framework.
7973
8074To create your app, change into the directory where you want your app to reside and execute the following command:
8175
8276``` bash
83- C: \p rojects > ionic start auth-ng4-ionic3-af2 blank
77+ $ ionic start auth-ng4-ionic3-af2 blank
8478```
8579
86- > The command ionic start will create the project with name "Ionic_AngularFire2_Project " using "blank" template.
80+ > The command ionic start will create the project with name "auth-ng4-ionic3-af2 " using "blank" template.
8781
8882Change to the project directory, which was just created with the above command.
8983
90- > C:\projects\auth-ng4-ionic3-af2>ionic info
84+ ```
85+ $ ionic info
9186
92- ``` bash
9387global packages:
9488
9589 @ionic/cli-utils : 1.4.0
@@ -151,40 +145,41 @@ To start your app, execute the following command:
151145
152146``` bash
153147
154- C:\p rojects\a uth-ng4-ionic3-af2> ionic serve
155-
148+ $ ionic serve
156149```
157150If everything is installed correctly, the app should open your browser with the dev server running at the following url
158151** ` http://localhost:8100 ` ** and will display default home page.
159152
160153### Configuring AngularFire2 and Firebase
161154
162- Install angularfire2 and firebase by executing the following command in your project directory:
155+ Install the required packages in your project directory:
163156
164157``` ts
165158
166- C :\ projects \ auth - ng4 - ionic3 - af2 > npm install angularfire2 firebase promise - polyfill -- save
159+ $ npm install angularfire2 firebase promise - polyfill -- save
167160
168161```
169162
170- _ This should add angularfire2 and firebase entry in your project's package.json file in dependencies section . Something similar _
163+ _ This should add angularfire2, promise-polyfill and firebase entry in your project's package.json file as dependencies. Something similar to: _
171164
172- > "angularfire2": "^4.0.0-rc.1",
173-
174- > "firebase": "^4.1.3",
165+ ```
166+ "angularfire2": "^4.0.0-rc.1",
167+ "firebase": "^4.1.3",
168+ "promise-polyfill": "^6.0.2",
169+ ```
175170
176171### Setup @NgModule
177172
178173Open your project in your favourite editor and open the ` app.module.ts ` file, under ` src/app `
179174and add the following three entries.
180175
181- > 1 ) Import AngularFireModule and AngularFireDatabaseModule at top.
176+ 1 ) Import AngularFireModule and AngularFireDatabaseModule at top.
182177
183- > 2 ) Define your firebaseConfig constant.
178+ 2 ) Define your firebaseConfig constant.
184179
185- > 3 ) Initialize your app, by adding AngularFireModule and AngularFireAuthModule in the "imports" array in @NgModule
180+ 3 ) Initialize your app, by adding AngularFireModule and AngularFireAuthModule in the "imports" array in @NgModule
186181
187- > 4 ) Also, add AngularFireDatabase in the "providers" array in @NgModule
182+ 4 ) Also, add AngularFireDatabase in the "providers" array in @NgModule
188183
189184your ` app.module.ts ` file should look something like this.
190185
0 commit comments