
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
auth0-angular
Advanced tools
This AngularJS module will help you implement client-side and server-side (API) authentication. You can use it together with [Auth0](https://www.auth0.com) to add support for username/password authentication, enterprise identity providers like Active Dire
This AngularJS module will help you implement client-side and server-side (API) authentication. You can use it together with Auth0 to add support for username/password authentication, enterprise identity providers like Active Directory or SAML and also for social identity providers 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.
JWT
in every request that is made to your API after the user is authenticatedYou can install this plugin several ways
bower install auth0-angular
npm install auth0-angular
<script type="text/javascript" src="//cdn.auth0.com/w2/auth0-widget-5.js"></script>
<script type="text/javascript" src="//cdn.auth0.com/w2/auth0-angular-1.js"></script>
angular.module('myCoolApp', ['auth0'])
.config(function(authProvider, $httpProvider) {
// routing configuration and other stuff
// ...
authProvider.init({
domain: 'mydomain.auth0.com',
clientId: 'myClientId',
loginUrl: '/login',
callbackUrl: location.href
});
// This automatically adds the token in every request
$httpProvider.interceptors.push('authInterceptor');
})
.run(function(auth) {
auth.hookEvents();
});
// LoginCtrl.js
angular.module('myCoolApp').controller('LoginCtrl', function(auth) {
$scope.signin = function() {
auth.signin({popup: true}).then(function() {
$location.path('/user-info')
}, function(err) {
console.log("Error :(", err);
});
}
});
<a href="" ng-click="signin()" />
// UserInfo.js
angular.module('myCoolApp').controller('UserInfoCtrl', function(auth) {
$scope.profile = auth.profile;
});
<!-- userInfo.html -->
<span>{{profile.first_name}} {{profile.email}}</span>
There're 2 modes to handle authentication with all the Providers (Facebook, Linkedin, Github, AD, LDAP, etc.) that Auth0 can handle. Redirect mode implies that the page you're seeing is going to get redirected to the page of the provider so that you can login. Popup mode implies that your angular app will open a popup window which will go to the provider website so that you can login and then close itself to show the Angular app again. This is really important to your app because if you use Redirect Mode, it means that your angular app will get reloaded completely after the user is authenticated with the provider. In Popup mode, the angular app will remain open.
auth0-angular depends on either auth0.js
or auth0-widget.js
.
If you want to use Auth0's beautiful Widget UI, you need to include auth0-widget.js
. This lets you configure Title and Icons, but the UI is taken care for you. For all the customization properties, please check out tihs link
Otherwise, if you'll use a custom UI, you need to include auth0.js
.
It's important to note that this scripts must be included before auth0-angular.
If you're using bower
or npm
, this 2 scripts are set as a dependency of auth0-angular so that you choose the best for you. Otherwise, you can include them from the CDN:
<!-- Either this -->
<script type="text/javascript" src="//cdn.auth0.com/w2/auth0-widget-5.js"></script>
<!-- or -->
<script type="text/javascript" src="//cdn.auth0.com/w2/auth0-3.js"></script>
This is the API for the SDK. []
means optional parameter.
This method does the signin for you. If you're using auth0-widget
, it'll display Auth0's widget, otherwise it'll just do the login with the Identity provider that you ask for.
The most important option is the popup
option. If set to true
, popup mode will be used and as the Angular page will not reload, you can use a promise to handle the sigin success and failure.
auth.signin({popup: true}).then(function(
// All good
$location.path('/');
), function(error) {
// Error
})
If you set popup
option to false
(this is the default value), redirect mode will be used. As Angular page is realoded, you cannot use promises to handle login success and failure. You'll need to use events
to handle them:
// app.js
module.config(function(authProvider) {
authProvider.on('loginSuccess', function($location) {
$location.path('/');
});
authProvider.on('loginFailure', function($location, error) {
$location.path('/error');
});
});
// LoginCtrl.js
auth.signin(
// popup: false. This is the default
);
You can read a more extensive tutorial on how to use auth0-angular with popup mode here and with redirect mode here.
The rest of the options that can be sent can be checked here.
This shows the widget but in signup
mode. It has the same options and parameters as the login. It's important to note that it'll perform a login after a successful signup.
This will show the Forgot your password window. It returns a promise that will tell you if the change was done successfully or not.
This signouts the user. Deletes the token from the client storage.
This property contains the profile from the user. This will be filled after the user has logged in successfully. If you want to use information from auth.profile
only after the user is logged in, you can just do a $watch
on this property to wait until it's set.
This flag returns wether there's a user authenticated or not.
This property contains the tokens returned after the user is logged in. Mostly for internal usage.
You can configure your token to expire after certain time. If you don't want your user to login again, you can just refresh the current token, which means getting a new token that will be valid for a certain amount of time.
For example, let's imagine you have a token valid for 10 hours. After 9 hours, you can refresh the token to get a new token that's going to be valid for another 10 hours. You just need to call this method in that case and we'll handle everything for you.
auth0-angular takes care of checking that unauthenticated users canoot access restricted resources. For that, auth0-angular hooks to internal angular events so that we can redirect the user to the login page if he doesn't have the right permission to access a page. For that, you need to hook auth0-angular to all of this events on application run
First, you need to configure the restricted routes:
// Using ngRoute
module.config(function($routeProvider) {
$routeProvider.
when('/info', {
templateUrl: 'info.html',
controller: 'InfoCtrl',
requiresLogin: true
}).
when('/login', {
tempalteUrl: 'login.html',
controller: 'LoginCtrl'
});
authProvider.init({
domain: 'domain',
clientId: 'clientId',
callbackUrl: location.href,
loginUrl: '/login'
})
})
// Using ui-router
module.config(function($stateProvider) {
$stateProvider.
state('info', {
url: '/info'
templateUrl: 'info.html',
controller: 'InfoCtrl',
data: {
requiresLogin: true
}
}).
state('login', {
url: '/login'
tempalteUrl: 'login.html',
controller: 'LoginCtrl'
});
authProvider.init({
domain: 'domain',
clientId: 'clientId',
callbackUrl: location.href,
loginState: 'login'
})
});
Then, you just call hookEvents
in the run
method
module.run(function(auth) {
auth.hookEvents();
});
To learn more about routing and using ngRoute
or ui-router
with your app, please read this tutorial
This method does a Delegation Token request. Imagine you have 2 APIs. The user in your angular app is loged in to your angular app that uses API #1. If you want to use API #2, you need to exchange the token you have for the API #1 for a valid one for API #2. This is what this method does. The targetClientId
parameter is just the identifier of the API #2 in this case.
To learn more about delegated access please click here.
This returns if a particular token has expired or not. Mostly for internal usage.
You use this method to configure the auth service. You must set the following options:
location.href
You can configure the handlers for all the different events that can happen in your app. The following are the available events right now:
profile
and token
from the usererror
which was thrownIt's important to note that in the case of redirect mode, it's mandatory to handle login events in this way. In the case of popup mode, you can still handle the login events this way, but you can also handle them with a promise on the signin method.
This is the list of all of the available tutorials.
Click here to read the tutorial Click here to see the tutorial
Clcik here to read the tutorial Click here to see the example
Click here to read the tutorial Click here to see the example
Click here to read the tutorial Click here to see the example
Click here to read the tutorial Click here to see the example
Click here to read the tutorial
Click here to read the tutorial Click here to see the ui-router example Click here to see the ngRoute example Click here to see the html5mode example
Click here to see the delegation token example
Click here to see the delegation token example
Click here to see the SSO example
Check the CHANGELOG file to see the changes from version to version
Read here how to run auth0-angular tests
Auth0 helps you to:
FAQs
Angular SDK to use with Auth0
The npm package auth0-angular receives a total of 170 weekly downloads. As such, auth0-angular popularity was classified as not popular.
We found that auth0-angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.