33## Table of Contents
44
55* [ Overview] ( #overview )
6- * [ Logging Users In] ( #logging -users-in )
6+ * [ Signing Users In] ( #signing -users-in )
77* [ Managing Users] ( #managing-users )
88* [ Retrieving Authentication State] ( #retrieving-authentication-state )
99* [ User-Based Security] ( #user-based-security )
1515## Overview
1616
1717Firebase provides [ a hosted authentication service] ( https://firebase.google.com/docs/auth/ ) which
18- provides a completely client-side solution to account management and authentication. It supports
19- anonymous authentication, email / password login , and login via several OAuth providers, including
18+ provides a completely client-side solution to user management and authentication. It supports
19+ anonymous authentication, email / password sign in , and sign in via several OAuth providers, including
2020Facebook, GitHub, Google, and Twitter.
2121
2222Each provider has to be configured individually and also enabled from the ** Auth** tab of
@@ -25,7 +25,7 @@ to learn more.
2525
2626| Provider | Description |
2727| ----------| -------------|
28- | [ Custom] ( https://firebase.google.com/docs/auth/web/custom-auth ) | Generate your own login tokens. Use this to integrate with existing authentication systems. You can also use this to authenticate server-side workers. |
28+ | [ Custom] ( https://firebase.google.com/docs/auth/web/custom-auth ) | Generate your own authentication tokens. Use this to integrate with existing authentication systems. You can also use this to authenticate server-side workers. |
2929| [ Email & Password] ( https://firebase.google.com/docs/auth/web/password-auth ) | Let Firebase manage passwords for you. Register and authenticate users by email & password. |
3030| [ Anonymous] ( https://firebase.google.com/docs/auth/web/anonymous-auth ) | Build user-centric functionality without requiring users to share their personal information. Anonymous authentication generates a unique identifier for each user that lasts as long as their session. |
3131| [ Facebook] ( https://firebase.google.com/docs/auth/web/facebook-login ) | Authenticate users with Facebook by writing only client-side code. |
@@ -39,16 +39,17 @@ by the Firebase client library. It can be injected into any controller, service,
3939``` js
4040// define our app and dependencies (remember to include firebase!)
4141var app = angular .module (" sampleApp" , [" firebase" ]);
42+
4243// inject $firebaseAuth into our controller
4344app .controller (" SampleCtrl" , [" $scope" , " $firebaseAuth" ,
4445 function ($scope , $firebaseAuth ) {
45- var auth = $firebaseAuth ();
46+ var auth = $firebaseAuth ();
4647 }
4748]);
4849```
4950
5051
51- ## Logging Users In
52+ ## Signing Users In
5253
5354The ` $firebaseAuth ` service has methods for each authentication type. For example, to authenticate
5455an anonymous user, you can use ` $signInAnonymously() ` :
@@ -58,14 +59,14 @@ var app = angular.module("sampleApp", ["firebase"]);
5859
5960app .controller (" SampleCtrl" , [" $scope" , " $firebaseAuth" ,
6061 function ($scope , $firebaseAuth ) {
61- var auth = $firebaseAuth ();
62+ var auth = $firebaseAuth ();
6263
63- $scope .login = function () {
64- $scope .authData = null ;
64+ $scope .signIn = function () {
65+ $scope .firebaseUser = null ;
6566 $scope .error = null ;
6667
67- auth .$signInAnonymously ().then (function (authData ) {
68- $scope .authData = authData ;
68+ auth .$signInAnonymously ().then (function (firebaseUser ) {
69+ $scope .firebaseUser = firebaseUser ;
6970 }).catch (function (error ) {
7071 $scope .error = error;
7172 });
@@ -76,29 +77,28 @@ app.controller("SampleCtrl", ["$scope", "$firebaseAuth",
7677
7778``` html
7879<div ng-app =" sampleApp" ng-controller =" SampleCtrl" >
79- <button ng-click =" login ()" >Login Anonymously</button >
80+ <button ng-click =" signIn ()" >Sign In Anonymously</button >
8081
81- <p ng-if =" authData " >Logged in user: <strong >{{ authData .uid }}</strong ></p >
82+ <p ng-if =" firebaseUser " >Signed in user: <strong >{{ firebaseUser .uid }}</strong ></p >
8283 <p ng-if =" error" >Error: <strong >{{ error }}</strong ></p >
8384</div >
8485```
8586
8687
8788## Managing Users
8889
89- The ` $firebaseAuth ` service also provides [ a full suite of
90- methods] ( /docs/reference.md#firebaseauth ) for
91- managing email / password accounts. This includes methods for creating and removing accounts,
92- changing an account's email or password, and sending password reset emails. The following example
93- gives you a taste of just how easy this is:
90+ The ` $firebaseAuth ` service also provides [ a full suite ofmethods] ( /docs/reference.md#firebaseauth )
91+ for managing users. This includes methods for creating and removing users, changing an users's email
92+ or password, and sending email verification and password reset emails. The following example gives
93+ you a taste of just how easy this is:
9494
9595``` js
9696var app = angular .module (" sampleApp" , [" firebase" ]);
9797
9898// let's create a re-usable factory that generates the $firebaseAuth instance
9999app .factory (" Auth" , [" $firebaseAuth" ,
100100 function ($firebaseAuth ) {
101- return $firebaseAuth ();
101+ return $firebaseAuth ();
102102 }
103103]);
104104
@@ -109,25 +109,22 @@ app.controller("SampleCtrl", ["$scope", "Auth",
109109 $scope .message = null ;
110110 $scope .error = null ;
111111
112- Auth .$createUser ({
113- email: $scope .email ,
114- password: $scope .password
115- }).then (function (userData ) {
116- $scope .message = " User created with uid: " + userData .uid ;
117- }).catch (function (error ) {
118- $scope .error = error;
119- });
112+ // Create a new user
113+ Auth .$createUserWithEmailAndPassword ($scope .email , $scope .password )
114+ .then (function (firebaseUser ) {
115+ $scope .message = " User created with uid: " + firebaseUser .uid ;
116+ }).catch (function (error ) {
117+ $scope .error = error;
118+ });
120119 };
121120
122- $scope .removeUser = function () {
121+ $scope .deleteUser = function () {
123122 $scope .message = null ;
124123 $scope .error = null ;
125124
126- Auth .$removeUser ({
127- email: $scope .email ,
128- password: $scope .password
129- }).then (function () {
130- $scope .message = " User removed" ;
125+ // Delete the currently signed-in user
126+ Auth .$deleteUser ().then (function () {
127+ $scope .message = " User deleted" ;
131128 }).catch (function (error ) {
132129 $scope .error = error;
133130 });
@@ -147,7 +144,7 @@ app.controller("SampleCtrl", ["$scope", "Auth",
147144
148145 <br ><br >
149146
150- <button ng-click =" removeUser ()" >Remove User</button >
147+ <button ng-click =" deleteUser ()" >Delete User</button >
151148
152149 <p ng-if =" message" >Message: <strong >{{ message }}</strong ></p >
153150 <p ng-if =" error" >Error: <strong >{{ error }}</strong ></p >
@@ -157,59 +154,60 @@ app.controller("SampleCtrl", ["$scope", "Auth",
157154
158155## Retrieving Authentication State
159156
160- Whenever a user is authenticated, you can use the synchronous
161- [ ` $getAuth() ` ] ( /docs/reference.md#getauth )
157+ Whenever a user is authenticated, you can use the synchronous [ ` $getAuth() ` ] ( /docs/reference.md#getauth )
162158method to retrieve the client's current authentication state. This includes the authenticated user's
163- ` uid ` (a user identifier which is unique across all providers) and the ` provider ` used to
164- authenticate. Additional variables are included for each specific provider and are covered in the
165- provider-specific links in the table above.
159+ ` uid ` (a user identifier which is unique across all providers), the ` providerId ` used to
160+ authenticate (e.g. ` google.com ` , ` facebook.com ` ), as well as other properties
161+ [ listed here] ( https://firebase.google.com/docs/reference/js/firebase.User#properties ) . Additional
162+ variables are included for each specific provider and are covered in the provider-specific links in
163+ the table above.
166164
167165In addition to the synchronous ` $getAuth() ` method, there is also an asynchronous
168166[ ` $onAuthStateChanged() ` ] ( /docs/reference.md#onauthstatechangedcallback-context ) method which fires a
169167user-provided callback every time authentication state changes. This is often more convenient than
170168using ` $getAuth() ` since it gives you a single, consistent place to handle updates to authentication
171- state, including users logging in or out and sessions expiring.
169+ state, including users signing in or out and sessions expiring.
172170
173- Pulling some of these concepts together, we can create a login form with dynamic content based on
171+ Pulling some of these concepts together, we can create a sign in form with dynamic content based on
174172the user's current authentication state:
175173
176174``` js
177175var app = angular .module (" sampleApp" , [" firebase" ]);
178176
179177app .factory (" Auth" , [" $firebaseAuth" ,
180178 function ($firebaseAuth ) {
181- return $firebaseAuth ();
179+ return $firebaseAuth ();
182180 }
183181]);
184182
185183app .controller (" SampleCtrl" , [" $scope" , " Auth" ,
186184 function ($scope , Auth ) {
187185 $scope .auth = Auth;
188186
189- // any time auth status updates , add the user data to scope
190- $scope .auth .$onAuthStateChanged (function (authData ) {
191- $scope .authData = authData ;
187+ // any time auth state changes , add the user data to scope
188+ $scope .auth .$onAuthStateChanged (function (firebaseUser ) {
189+ $scope .firebaseUser = firebaseUser ;
192190 });
193191 }
194192]);
195193```
196194
197195``` html
198196<div ng-app =" sampleApp" ng-controller =" SampleCtrl" >
199- <div ng-show =" authData " >
200- <p >Hello, {{ authData.facebook .displayName }}</p >
201- <button ng-click =" auth.$signOut()" >Logout </button >
197+ <div ng-show =" firebaseUser " >
198+ <p >Hello, {{ firebaseUser .displayName }}</p >
199+ <button ng-click =" auth.$signOut()" >Sign Out </button >
202200 </div >
203- <div ng-hide =" authData " >
204- <p >Welcome, please log in.</p >
205- <button ng-click =" auth.$signInWithPopup('facebook')" >Login With Facebook</button >
201+ <div ng-hide =" firebaseUser " >
202+ <p >Welcome, please sign in.</p >
203+ <button ng-click =" auth.$signInWithPopup('facebook')" >Sign In With Facebook</button >
206204 </div >
207205</div >
208206```
209207
210208The ` ng-show ` and ` ng-hide ` directives dynamically change out the content based on the
211- authentication state, by checking to see if ` authData ` is not ` null ` . The login and logout methods
212- were bound directly from the view using ` ng-click ` .
209+ authentication state, by checking to see if ` firebaseUser ` is not ` null ` . The sign in and sign out
210+ methods were bound directly from the view using ` ng-click ` .
213211
214212
215213## User-Based Security
@@ -225,7 +223,28 @@ it will contain the following attributes:
225223| Key | Description |
226224| -----| -------------|
227225| ` uid ` | A user ID, guaranteed to be unique across all providers. |
228- | ` provider ` | The authentication method used (e.g. "anonymous" or "google"). |
226+ | ` provider ` | The authentication method used (e.g. "anonymous" or "google.com"). |
227+ | ` token ` | The contents of the authentication token (an OpenID JWT). |
228+
229+ The contents of ` auth.token ` will contain the following information:
230+
231+ ```
232+ {
233+ "email": "[email protected] ", // The email corresponding to the authenticated user 234+ "email_verified": false, // Whether or not the above email is verified
235+ "exp": 1465366314, // JWT expiration time
236+ "iat": 1465279914, // JWT issued-at time
237+ "sub": "g8u5h1i3t51b5", // JWT subject (same as auth.uid)
238+ "auth_time": 1465279914, // When the original authentication took place
239+ "firebase": { // Firebase-namespaced claims
240+ "identities": { // Authentication identities
241+ "github.com": [ // Provider
242+ "8513515" // ID of the user on the above provider
243+ ]
244+ }
245+ }
246+ }
247+ ```
229248
230249We can then use the ` auth ` variable within our rules. For example, we can grant everyone read access
231250to all data, but only write access to their own data, our rules would look like this:
@@ -253,7 +272,7 @@ For a more in-depth explanation of this important feature, check out the web gui
253272
254273Checking to make sure the client has authenticated can be cumbersome and lead to a lot of ` if ` /
255274` else ` logic in our controllers. In addition, apps which use authentication often have issues upon
256- initial page load with the logged out state flickering into view temporarily before the
275+ initial page load with the signed out state flickering into view temporarily before the
257276authentication check completes. We can abstract away these complexities by taking advantage of the
258277` resolve() ` method of Angular routers.
259278
@@ -264,7 +283,7 @@ want to grab the authentication state before the route is rendered. The second h
264283[ ` $requireSignIn() ` ] ( /docs/reference.md#requiresignin )
265284which resolves the promise successfully if a user is authenticated and rejects otherwise. This is
266285useful in cases where you want to require a route to have an authenticated user. You can catch the
267- rejected promise and redirect the unauthenticated user to a different page, such as the login page.
286+ rejected promise and redirect the unauthenticated user to a different page, such as the sign in page.
268287Both of these methods work well with the ` resolve() ` methods of ` ngRoute ` and ` ui-router ` .
269288
270289### ` ngRoute ` Example
@@ -312,12 +331,12 @@ app.config(["$routeProvider", function($routeProvider) {
312331
313332app .controller (" HomeCtrl" , [" currentAuth" , function (currentAuth ) {
314333 // currentAuth (provided by resolve) will contain the
315- // authenticated user or null if not logged in
334+ // authenticated user or null if not signed in
316335}]);
317336
318337app .controller (" AccountCtrl" , [" currentAuth" , function (currentAuth ) {
319338 // currentAuth (provided by resolve) will contain the
320- // authenticated user or null if not logged in
339+ // authenticated user or null if not signed in
321340}]);
322341```
323342
@@ -368,12 +387,12 @@ app.config(["$stateProvider", function ($stateProvider) {
368387
369388app .controller (" HomeCtrl" , [" currentAuth" , function (currentAuth ) {
370389 // currentAuth (provided by resolve) will contain the
371- // authenticated user or null if not logged in
390+ // authenticated user or null if not signed in
372391}]);
373392
374393app .controller (" AccountCtrl" , [" currentAuth" , function (currentAuth ) {
375394 // currentAuth (provided by resolve) will contain the
376- // authenticated user or null if not logged in
395+ // authenticated user or null if not signed in
377396}]);
378397```
379398Keep in mind that, even when using ` ng-annotate ` or ` grunt-ngmin ` to minify code, that these tools
0 commit comments