Easy AngularJS Authentication with Auth0

This article has been updated (11.05.2017) to reflect changes to Auth0's API. Securing single-page applications (SPAs) can be challenging. SPAs often consist of a separate front-end (e.g., AngularJS) and a back-end data API. Traditional session-based authentication is unsuitable for this architecture because it introduces state to the API, violating REST principles and hindering mobile app integration.

Key Advantages of this Approach:

• Stateless Authentication: JSON Web Tokens (JWTs) enable secure, stateless authentication, seamlessly integrating with mobile backends.
• Simplified User Management: Auth0 simplifies user authentication management, including social logins and multi-profile support.
• Streamlined Integration: Auth0's libraries and AngularJS modules simplify the authentication process, automating token handling and session management.
• Enhanced Security: JWTs stored securely in local storage enhance security when accessing protected API endpoints.
• Easy Social Login Integration: Enable popular social logins with simple Auth0 dashboard toggles.
• Secure API Endpoints: A NodeJS server with JWT validation protects API endpoints, ensuring only authenticated users access sensitive data.

JSON Web Tokens (JWTs): A Stateless Solution

JWTs overcome the limitations of session-based authentication. This open standard authenticates requests from the AngularJS front-end to the back-end API. Crucially, JWTs contain a JSON payload with custom claims, digitally signed for tamper-proofing.

AngularJS Authentication Implementation

JWTs are ideal for AngularJS authentication. Secured API endpoints are accessed by storing the user's JWT in local storage and including it in the Authorization header of HTTP requests. Invalid or missing JWTs result in access denial.

Beyond basic authentication, a robust AngularJS implementation requires:

• Conditional Rendering: Show/hide elements (login/logout buttons) based on JWT validity.
• Route Protection: Prevent unauthenticated users from accessing specific routes.
• UI Updates: Update the UI when user state changes (JWT expiration, logout).

This tutorial demonstrates a complete AngularJS authentication implementation, including a NodeJS server for protected resource access. Instead of building a user database and JWT issuance, we leverage Auth0's free tier (up to 7,000 active users). Social login integration is also shown.

(Image: Auth0 Dashboard)

Auth0 Setup

1. Create an Auth0 Account: Sign up for an Auth0 account, choosing a domain name (e.g., yourcompany.auth0.com). This cannot be changed later.
2. Configure the Default App: In the Auth0 dashboard, navigate to the Clients section and access the Default App. Configure Allowed Origins and Allowed Callback URLs (e.g., http://localhost:8080 for this tutorial).
3. Create an API: Under the APIs section, create a new API, noting its Identifier (used as the audience in the application).
4. Enable Social Identity Providers (Optional): Enable social logins (e.g., Google, Facebook) by toggling options in the Connections > Social section.

Installation and Configuration

Install necessary packages (using bower install if you've forked the GitHub repo):

npm install -g http-server

Start the server using http-server. Configure app.js and index.html to integrate Auth0. Replace placeholder values with your Auth0 credentials:

// app.js (snippet)
angularAuth0Provider.init({
  clientID: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  responseType: 'token id_token',
  redirectUri: AUTH0_CALLBACK_URL,
  audience: AUTH0_API_AUDIENCE,
});

The app.run.js file handles parsing the hash after authentication:

// app.run.js (snippet)
authService.handleParseHash();

(Image: AngularJS Login Page)

(Image: AngularJS Logged-in State)

(Image: AngularJS Logout State)

Homepage Creation

The home.html file provides a simple UI with login/logout buttons and API call buttons. The home.controller.js file handles API calls using $http:

// home.controller.js (snippet)
vm.getSecretMessage = function() {
  $http.get('http://localhost:3001/api/private', {
    headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') }
  })
  .then(...)
  .catch(...);
};

Authentication Service (auth.service.js)

This service handles login, logout, and authentication state management:

// auth.service.js (snippet)
function authService($state, angularAuth0, authManager) {
  // ... login, handleParseHash, logout, isAuthenticated functions ...
}

NodeJS Server Creation

Create a NodeJS server using Express, express-jwt, jwks-rsa, and cors:

// server/server.js (snippet)
var authCheck = jwt({
  secret: jwks.expressJwtSecret({
    jwksUri: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/.well-known/jwks.json"
  }),
  audience: '{YOUR-AUTH0-API-AUDIENCE}',
  issuer: "https://{YOUR-AUTH0-DOMAIN}.auth0.com/",
  algorithms: ['RS256']
});

app.get('/api/private', authCheck, function(req, res) { ... });

Start the server with node server.js. The AngularJS app can now make requests to the protected API endpoint.

Further Considerations and FAQs

The article concludes with a section on additional Auth0 features (SSO, passwordless login, MFA) and other supported backends and mobile SDKs. A comprehensive FAQ section addresses common questions regarding social login, session management, route security, token refresh, error handling, customization, multi-factor authentication, hooks, testing, and debugging. Remember to replace placeholders like {YOUR-AUTH0-DOMAIN} and {YOUR-AUTH0-API-AUDIENCE} with your actual Auth0 values.

The above is the detailed content of Easy AngularJS Authentication with Auth0. For more information, please follow other related articles on the PHP Chinese website!