AngularJS module that adds user authentication to your app with UserApp. It supports protected/public routes, rerouting on login/logout, heartbeats for status checks, stores the session token in a cookie, directives for signup/login/logout, OAuth, etc.
UserApp is a cloud-based user management API for web apps with the purpose to relieve developers from having to program logic for user authentication, sign-up, invoicing, feature/property/permission management, and more.
Take the course on Codecademy
or
-
Include the UserApp JavaScript library and this AngularJS module in your index.html:
<script src="https://app.userapp.io/js/userapp.client.js"></script> <script src="https://rawgithub.com/userapp-io/userapp-angular/master/angularjs.userapp.js"></script>
(You can also install the module with bower: $ bower install userapp-angular
)
-
Add the
UserApp
module to your app's dependencies (app.js):var app = angular.module('myApp', ['UserApp']);
-
Inject and initiate the service in your root scope (app.js) with your App Id:
app.run(function($rootScope, user) { user.init({ appId: 'YOUR_APP_ID' }); });
-
Create routes + templates for login and signup, and use the directives to connect them to UserApp (examples: login.html and signup.html):
$routeProvider.when('/login', {templateUrl: 'partials/login.html'}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html'});
Note: If you are using ui-router, all you have to do is to create states instead of the routes above.
-
Set
public
totrue
on the routes you want to make public. And setlogin
totrue
on the login route:$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
The .otherwise()
route should be set to where you want your users to be redirected after login. Example:
$routeProvider.otherwise({redirectTo: '/home'});
Note: If you are using ui-router, place the public
and login
flags inside data
instead.
-
Add a log out link:
<a href="#" ua-logout>Log Out</a>
(Ends the session and redirects to the login route)
-
Hide elements that should only be visible when logged in:
<div ng-show="user.authorized">Welcome!</div>
-
Use the
user
object to access properties on the logged in user:<div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>
-
Read this documention and the UserApp Documentation to learn how to use the full API!
The main service with all session handling etc.
-
user.init(config)
Initiate the service with your App Id.
user.init({ appId: 'YOUR_APP_ID' });
-
user.status()
Returns the status of the session:
{ authorized: false }
-
user.appId([value])
Sets and gets the App Id.
-
user.token([value])
Sets and gets the session token (stored in a cookie).
-
user.current
The logged in user. See User documentation for more info.
-
user.signup(user[, callback])
Sign up a user, log in, and redirect to default route.
user.signup({ login: 'timothy', email: 'timothy.johansson@userapp.io', password: 't1m0thy' }, function(error, result) {});
-
user.login(user[, callback])
Log in a user and redirect to default route.
user.login({ login: 'timothy', password: 't1m0thy' }, function(error, result) {});
-
user.logout([callback])
Log out the logged in user and redirect to the log in route.
user.logout(function(error, result) {});
-
user.hasPermission(permissions)
Returns
true
if the user has all the permissions in the string or arraypermissions
. Else it returnsfalse
.var result = user.hasPermission('edit'); var result = user.hasPermission(['edit', 'post']);
-
user.hasFeature(features)
Returns
true
if the user has all the features in the string or arrayfeatures
. Else it returnsfalse
.var result = user.hasFeature('editor'); var result = user.hasFeature(['editor', 'another_feature']);
Exposes the full UserApp API with the JavaScript library.
-
ua-login
Add this to a form tag to attach it to the
user.login()
function. Useua-error
to specify an error element.<form ua-login ua-error="error-msg"> <input name="login" placeholder="Username"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Log In</button> <p id="error-msg"></p> </form>
-
ua-logout
Add this to a log out link to attach it to the
user.logout()
function.<a href="#" ua-logout>Log Out</a>
-
ua-signup
Add this to a form tag to attach it to the
user.signup()
function. Useua-error
to specify an error element. Useua-is-email
on the login input to specify that login is the same as email. All input field names must reflect the user's properties.<form ua-signup ua-error="error-msg"> <input name="first_name" placeholder="Name"><br> <input name="login" ua-is-email placeholder="Email"><br> <input name="password" placeholder="Password" type="password"><br> <button type="submit">Create Account</button> <p id="error-msg"></p> </form>
-
ua-oauth-link
Add this to a link tag in order to authenticate using an OAuth provider. The value should be an OAuth provider id such as
google
,github
,facebook
orlinkedin
. Additionally: Useua-error
to specify an error element. Useua-oauth-scopes
to specify OAuth scopes to request by provider. The scopes must be a comma-separated list of scopes, i.e.user,user:email
. Useua-oauth-redirect-uri
to explicitly specify the URI to be redirected to after provider has performed authentication. If not specified, the default URI will be/#/oauth/callback/
.<a href="" ua-oauth-link="google">Log in with Google</a>
-
ua-has-permission="permissions"
Add this to an element to attach it to the
user.hasPermission()
function. The element will be hidden if not all permissions are true. Multiple permissions are separated with whitespace.<a href="#" ua-has-permission="edit">Edit Post</a>
-
ua-has-feature="features"
Add this to an element to attach it to the
user.hasFeature()
function. The element will be hidden if not all features are true. Multiple features are separated with whitespace.<a href="#" ua-has-feature="fancy_feature">Go to Fancy Feature...</a>
-
user.error
Event triggered when an error occurs.
$rootScope.$on('user.error', function(sender, error) { console.log(error.message); });
-
user.login
Event triggered when user logs in.
$rootScope.$on('user.login', function() { console.log(user.current); });
-
user.logout
Event triggered when user logs out.
$rootScope.$on('user.logout', function() { console.log('Bye!'); });
See example/ for a demo app based on angular-seed.
To connect your AngularJS app to a back-end API, perform the AJAX requests on the same domain. And then on the back-end, get the cookie ua_session_token
and use UserApp's token.heartbeat() or user.get() to verify that the user is authenticated. The result should then be cached to reduce round-trips to UserApp.
Contact us via email at support@userapp.io or visit our support center. You can also see the UserApp documentation for more information.
MIT, see LICENSE.