frankhock / auth0-angular

Auth0 with AngularJS

Auth0 and AngularJS

This AngularJS module will help you implement client-side and server-side (API) authentication. You can use it together with Auth0 to add username/password authentication, support for enterprise identity like Active Directory or SAML and also for social identities like Google, Facebook or Salesforce among others to your web, API and mobile native apps.

Auth0 is a cloud service that provides a turn-key solution for authentication, authorization and Single Sign On.

NPM / Bower users: Find this dependecy as auth0-angular. Take into account that you will need to include either auth0-widget.js or auth0.js in order to run the examples using Bower or Auth0 Angular (they can be found as dependencies of this module).

Usage

function onLoginSuccess () { $location.path('/'); }
function onLoginFailure () { $scope.message = 'invalid credentials'; }

$scope.submit = function () {
  var options = { connection: 'my-connection', username: $scope.username,  password: $scope.password, scope: 'openid name email' }; 

  // auth should be injected in your controller
  auth.signin(options).then(onLoginSuccess, onLoginFailure);
};

$scope.doGoogleAuthWithPopup = function () {
  var options = { popup: true, connection: 'google-oauth2', scope: 'openid name email' };
  
  // auth should be injected in your controller
  auth.signin(options).then(onLoginSuccess, onLoginFailure);
};

Tutorials

There are two ways of implementing signin/singup.

• Login Widget: A complete Login UI ready to go, that can be customized, translated and expanded. You can check the following getting started guides:
• JavaScript SDK: You can write your own UI from scratch in order to provide a more tailored user experience.

With the Login Widget

The following guides will help you getting started:

User/Password + Social Login with Auth0 Widget (popup mode)

Authenticate using the Login Widget and get back a promise. Your angular app won't refresh because it uses window.open popup for social providers and an ajax call for user/password auth).

→ Read the tutorial

User/Password + Social Login with Auth0 Widget (redirect mode)

Authenticate using the Login Widget and listen to an event. Your angular app will be refreshed when it comes back from Auth0 as opposed to the popup mode.

→ Read the tutorial

With your own UI

User/Password Login

Authenticate user/passwords and get back a promise.

→ Read the tutorial

Social Login with Popup

Authenticate using social providers and get back a promise.

→ Read the tutorial

Also, we have an examples section that contains comprehensive scenarios.

Documentation

• Using Redirect Mode
• Consuming a protected REST API
• Advanced Routing Scenarios
• Join or Link Accounts
• FAQ
• jwt.io: Useful for debugging JWT.
• Changelog

Development

• How to run auth0-angular tests

What is Auth0?

Auth0 helps you to:

• Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
• Add authentication through more traditional username/password databases.
• Add support for linking different user accounts with the same user.
• Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
• Analytics of how, when and where users are logging in.
• Pull data from other sources and add it to the user profile, through JavaScript rules.

Create a free account in Auth0

1. Go to Auth0 and click Sign Up.
2. Use Google, GitHub or Microsoft Account to login.