#userapp

I hope this helps someone else...

I have been using UserApp.io for user management, and could not, for the life of me, figure out the HTTP docs for retrieving members.

AngularJS is an amazing framework, and it's very easy to use. But adding user authentication to an AngularJS app is not that simple. Many single-page apps need protected routes, auto redirect on login/logout, store the session in a cookie, etc. There's a lot of stuff to keep track on. But the AngularJS module for UserApp takes care of all this.

UserApp is a cloud-based user management API that relieves you from the struggles of writing code for login, sign-up, user storage, invoicing, and more.

In this tutorial you will learn how easy it is to add a full-blown user authentication to your AngularJS web app. This tutorial is also available as a course on Codecademy.

Step 1: Create a UserApp account

Before we get started, you'll need to sign up for a UserApp account. So head to the sign-up page) and get your account now!

Step 2: Include the UserApp JavaScript library and the AngularJS module

In 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>

Step 3: Inject the UserApp module and service in app.js

Add 'UserApp' to the list of services, filters and directives that you include in your app:

angular.module('myApp', ['UserApp'])

In the run() function, inject the user service as an argument:

app.run(function($rootScope, user) { ... });

Step 4: Configure the service in app.js

.run(function($rootScope, user) { user.init({ appId: 'YOUR_APP_ID' }); });

Replace YOUR_APP_ID with your UserApp App Id.

Step 5: Login and signup routes

Create routes + templates for login and signup, and use the directives to connect them to UserApp (examples: login.html and signup.html):

Add public: true on the routes you want to make public (i.e. /login and /signup). Add login: true on the login route. The otherwise() route should be set to the route that should be shown after login.

$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true}); $routeProvider.otherwise({redirectTo: '/home'});

Step 6: Add a log out link

<a href="#" ua-logout>Log Out</a>

When clicked, this will end the session and redirect to the login route.

Step 7: Hide elements

Hide elements that should only be visible when logged in:

<div ng-show="user.authorized">Welcome!</div>

Show elements based on which permissions or features the logged in user has:

<div ua-has-permission="permission1 permission2">You have all the required permissions!</div> <div ua-has-feature="feature1">You have enabled feature 1</div>

Step 8: The user profile

Use the user object to access properties on the logged in user:

<span>{{ user.first_name }}</span>

That's basically it! To authenticate to your back-end services, just get the session token with user.token() and send it with your AJAX requests. At the back-end, validate the token using the UserApp API (user.get or token.heartbeat).

Then log in to the UserApp Dashboard to set up permissions, price lists, and manage your users.