$auth
service is a part of angular-meteor-auth
package, and it located inside angular-meteor.auth
AngularJS module.
This service provides the functionality for authentication for your app.
$auth
wraps Meteor's API for ease of use with AngularJS applications, and also provides the ability to access Meteor's Accounts package from the UI.
In order to use this service, you will need to add the package to your project and add it's module as a dependency to your AngularJS app:
meteor add angular-meteor-auth
angular.module('myApp', [
'angular-meteor',
'angular-meteor.auth'
]);
waitForUser
is a method of $auth
which waits for any user to log in.
It is a wrapper for Meteor.loggingIn
method, but it's return value is a promise which can be only resolved, when any user is done with the login process.
It is useful when you want to run part of your code only after the user logs in.
angular.module('myApp').directive('myComponent', function() {
return {
link: function($auth) {
$auth.waitForUser().then(() => {
// Login is done!
});
}
};
});
requireUser
provides a useful functionality for performing a one-time login check, with a promise.
It's very useful for angular-ui-router
's resolve functionality.
It's return value is a promise, which resolves when the login process is done, and the Meteor.user()
is valid and not null
.
$stateProvider
.state({
template: '<my-component></my-component>',
resolve: {
user: ($auth) => {
return $auth.requireUser();
}
}
});
requireValidUser
uses requireUser
method, but adding another custom check that provided by the user.
It's return value is a promise, which resolves if the user is logged in and the custom validation method returns true
.
If the user validation message returns anything other than true
, the promise will rejected and the promise failure argument will be the return value of the validation message.
In this example, we will allow only logged in users, with firstName
equals to Uri
.
$stateProvider
.state({
template: '<my-component></my-component>',
resolve: {
user: ($auth) => {
return $auth.requireValidUser((user) => {
if (user.firstName === 'Uri') {
return true;
}
else {
return 'You are not Uri!';
}
}
}
}
});
$auth
service also provides two useful properties that are useful in views:
$auth.currentUser
is a property of the $auth
service, which contain the current logged in user in every time.
It automatically changes when the user logs in or logs out, and it can be used from the view or the AngularJS controller/components.
It's very useful for hiding / showing parts of the view depending on the login status.
<div ng-show="$auth.currentUser">I am visible only for logged in users!</div>
<div ng-hide="$auth.currentUser">I am visible only for guests!</div>
angular.module('myApp').directive('myComponent', function() {
return {
link: function($auth) {
$auth.waitForUser().then(() => {
let currentUser = $auth.currentUser;
});
}
};
});
$auth.loggingIn
is a property of the $auth
service, which contain the current login status.
It's a wrapper for Meteor.loggingIn method.
It's value is true
if a login method (such as Meteor.loginWithPassword
, Meteor.loginWithFacebook
, or Accounts.createUser
) is currently in progress.
You can use this property in your view in order to display a spinner or a "Logging you in..." message!
<div ng-show="$auth.loggingIn">Logging in...</div>
<div ng-show="$auth.currentUser">I am visible only for logged in users!</div>
<div ng-hide="$auth.currentUser">I am visible only for guests!</div>