Skip to content
This repository was archived by the owner on Mar 17, 2025. It is now read-only.

Commit 046e7f8

Browse files
author
jwngr
committed
Merge branch 'master' into jw-signOut-promise
2 parents afd4195 + a736588 commit 046e7f8

File tree

12 files changed

+258
-373
lines changed

12 files changed

+258
-373
lines changed

docs/guide/user-auth.md

Lines changed: 79 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
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)
@@ -15,8 +15,8 @@
1515
## Overview
1616

1717
Firebase 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
2020
Facebook, GitHub, Google, and Twitter.
2121

2222
Each 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!)
4141
var app = angular.module("sampleApp", ["firebase"]);
42+
4243
// inject $firebaseAuth into our controller
4344
app.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

5354
The `$firebaseAuth` service has methods for each authentication type. For example, to authenticate
5455
an anonymous user, you can use `$signInAnonymously()`:
@@ -58,14 +59,14 @@ var app = angular.module("sampleApp", ["firebase"]);
5859

5960
app.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
9696
var app = angular.module("sampleApp", ["firebase"]);
9797

9898
// let's create a re-usable factory that generates the $firebaseAuth instance
9999
app.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)
162158
method 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

167165
In addition to the synchronous `$getAuth()` method, there is also an asynchronous
168166
[`$onAuthStateChanged()`](/docs/reference.md#onauthstatechangedcallback-context) method which fires a
169167
user-provided callback every time authentication state changes. This is often more convenient than
170168
using `$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
174172
the user's current authentication state:
175173

176174
```js
177175
var app = angular.module("sampleApp", ["firebase"]);
178176

179177
app.factory("Auth", ["$firebaseAuth",
180178
function($firebaseAuth) {
181-
return $firebaseAuth();
179+
return $firebaseAuth();
182180
}
183181
]);
184182

185183
app.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

210208
The `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

230249
We can then use the `auth` variable within our rules. For example, we can grant everyone read access
231250
to 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

254273
Checking 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
257276
authentication 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)
265284
which resolves the promise successfully if a user is authenticated and rejects otherwise. This is
266285
useful 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.
268287
Both 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

313332
app.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

318337
app.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

369388
app.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

374393
app.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
```
379398
Keep in mind that, even when using `ng-annotate` or `grunt-ngmin` to minify code, that these tools

docs/migration/1XX-to-2XX.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ Several authentication methods have been renamed and / or have different method
4848
| `$authWithOAuthRedirect(provider[, options])` | `$signInWithRedirect(provider)` | `options` can be provided by passing a configured `firebase.database.AuthProvider` instead of a `provider` string |
4949
| `$authWithOAuthToken(provider, token)` | `$signInWithCredential(credential)` | Tokens must now be transformed into provider specific credentials. This is discussed more in the [Firebase Authentication guide](https://firebase.google.com/docs/auth/#key_functions). |
5050
| `$createUser(credentials)` | `$createUserWithEmailAndPassword(email, password)` | |
51-
| `$removeUser(credentials)` | `$deleteUser()` | Deletes the currently signed in user |
52-
| `$changeEmail(credentials)` | `$updateEmail(newEmail)` | Changes the email of the currently signed in user |
53-
| `$changePassword(credentials)` | `$updatePassword(newPassword)` | Changes the password of the currently signed in user |
51+
| `$removeUser(credentials)` | `$deleteUser()` | Deletes the currently signed-in user |
52+
| `$changeEmail(credentials)` | `$updateEmail(newEmail)` | Changes the email of the currently signed-in user |
53+
| `$changePassword(credentials)` | `$updatePassword(newPassword)` | Changes the password of the currently signed-in user |
5454
| `$resetPassword(credentials)` | `$sendPasswordResetEmail(email)` | |
5555
| `$unauth()` | `$signOut()` | |
5656
| `$onAuth(callback)` | `$onAuthStateChanged(callback)` | |

docs/quickstart.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,10 +201,10 @@ by the Firebase client library. It can be injected into any controller, service,
201201
```js
202202
app.controller("SampleCtrl", function($scope, $firebaseAuth) {
203203
var auth = $firebaseAuth();
204-
204+
205205
// login with Facebook
206-
auth.$authWithOAuthPopup("facebook").then(function(authData) {
207-
console.log("Logged in as:", authData.uid);
206+
auth.$signInWithPopup("facebook").then(function(firebaseUser) {
207+
console.log("Signed in as:", firebaseUser.uid);
208208
}).catch(function(error) {
209209
console.log("Authentication failed:", error);
210210
});

0 commit comments

Comments
 (0)