37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to use TypeScript and Auth0 to secure a feature-complete Fastify API. Tutorial on how to use Auth0 to implement authorization in Fastify.

Fastify and TypeScript Tutorial: Secure a Content API

Learn how to use TypeScript to build a feature-complete Fastify API. Tutorial on how to use TypeScript with Fastify to create, read, update, and delete data.

Fastify and TypeScript Tutorial: Build a CRUD API

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

Learn how to keep tokens more secure by using the Backend for Frontend (BFF) architectural pattern.

One of the biggest challenges for applications using OAuth 2.0 and OpenID Connect is token security. Preventing an ID, access, or refresh token from falling into the wrong hands is a priority of these protocols. The specs have adopted several technical solutions, and some best practices have been proposed. Among the latter is the use of the Backend for Frontend pattern, whose rationale and architecture we will analyze in this article.

## OAuth 2.0 Client Types and Security

OAuth 2.0 defines two types of client applications: public and confidential clients. This classification is based on the application's ability to keep authentication credentials secure. From [the specs](https://datatracker.ietf.org/doc/html/rfc6749#section-2.1):

- **Confidential**. Clients capable of maintaining the confidentiality of their credentials (e.g., client implemented on a secure server with restricted access to the client credentials), or capable of secure client authentication using other means.
- **Public**. Clients incapable of maintaining the confidentiality of their credentials (e.g., clients executing on the device used by the resource owner, such as an installed native application or a web browser-based application), and incapable of secure client authentication via any other means.

In a nutshell, confidential clients are those applications that run in a protected environment, such as a server, while public clients are applications that run in an uncontrolled environment, such as the user's device. Typical confidential clients are traditional web applications, while typical public clients are Single-Page Applications (SPA), desktop and mobile apps.

From a security perspective, public clients can't store their credentials securely. There is a high risk of tokens falling into the wrong hands. This can happen either because of a potential lack of protection on the local system or because of the potentially large number of instances of the application that increase the attack surface.

To mitigate the problem of issuing a token to a client that can't be authenticated (i.e., a public client), a specific flow has been designed: the [Authorization Code Flow with PKCE](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce). Anyway, this does not solve all the concerns about the security of a public client.

## SPA Security and Tokens

Another concern for public clients is token storage. Once an ID or access token is received from the server, how can a public client protect it from unauthorized access? As long as the application is running, the application memory is the safest place to store tokens. But what if the application stops running temporarily?

For example, consider a SPA that has a token in memory. What happens when the user refreshes the page on which the application is running? The token is lost, and the user is forced to authenticate again for the application to obtain a new token.

You could consider storing the token in the browser's local storage or in a cookie and reloading it after the refresh, but this is not a recommended practice. A malicious user or application could gain access to the local storage or cookie and obtain the token. See [this article for more information on the risks of using browser storage](https://auth0.com/blog/secure-browser-storage-the-facts/).

Something similar happens with native applications (desktop and mobile): when the user closes the application, all tokens are lost, requiring authentication the next time the application is opened. While this may be acceptable in certain contexts, many users have become accustomed to not having to authenticate every time they open their app, especially in the mobile environment. However, native applications have an advantage over SPAs. The presence of secure storage mechanisms in most popular operating systems, such as Keychain in iOS/Mac or Keystore in Android.

The level of security required by an application depends on its specific functionality. It is the result of balancing the data confidentiality requirements with the ease of implementation. Therefore, in some contexts, using the Authorization Code Flow with PKCE and all the concerns about token management in a SPA may be acceptable. In other contexts, it is not. What can you do for those contexts where you can't absolutely risk a token falling into the wrong hands?

## The Backend For Frontend Pattern

A seemingly marginal note in [the definition of client in the OAuth 2.0 specification](https://datatracker.ietf.org/doc/html/rfc6749#section-2.1) suggests a solution:

*A client may be implemented as **a distributed set of components, each with a different client type and security context** (e.g., a distributed client with both a confidential server-based component and a public browser-based component).*

This paves the way for the adoption of a well-known architectural pattern: the **Backend for Frontend** (BFF) pattern. This is a popular pattern to address specific needs for a client platform by building a dedicated backend. The needs may be of various types: decoupling of concerns, flexibility and maintainability, optimized performance, security, etc.

> Read [this document](https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html) to learn how this architectural pattern was born.

In our case, we are interested in strengthening the security of SPAs in the context of OIDC and OAuth 2.0, and the [best current practices](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#name-backend-for-frontend-bff) give us some guidelines about using this pattern.

Let's explore how the BFF pattern works.

### The BFF architecture

The actors involved in a typical scenario where a SPA uses the Authorization Code Flow with PKCE are shown in the following diagram:

![Architecture of a SPA using OIDC and OAuth2](https://images.ctfassets.net/23aumh6u8s0i/4PBIbTFxPR4PalUltQQEgV/69698b96960c0368e7429f6d1e3d8549/spa-oidc-oauth-architecture.png)

The SPA interacts with the authorization server to get the ID, access, and refresh tokens. Then, the SPA uses the ID token to get data about the user, the access token to call an API, and the refresh token to get a new access token once it expires.

In this scenario, all the tokens are in the hands of the SPA.

By applying the BFF pattern, we are going to enter a new component in this architecture, the dedicated backend, as shown below:

![BFF architecture](https://images.ctfassets.net/23aumh6u8s0i/43eXspNnMJS3ImbvAva0R9/5cf40b564dcbd03eb7394c15078d8b63/bff-architecture.png)

In this new scenario, the backend has three core responsibilities:

- It interacts with the authorization server as a confidential client.
- It manages all the tokens on behalf of the SPA, which can't access them anymore.
- It proxies all requests to the API, embedding the access token before forwarding them.

The SPA only interacts with the backend, relying on traditional cookies for authenticated sessions. Basically, the backend exposes a number of endpoints that let the SPA access the user profile data and the remote API.

This architecture improves the security of token negotiation, since it now happens via a confidential client, and token storage, since it now occurs on the server side.

### The BFF flow

Let's take a look at how the actors in this architecture interact with each other by following this diagram:

![Backend for Frontend flow](https://images.ctfassets.net/23aumh6u8s0i/6uM2x48XekNyFpODMiFjJq/c351e6278219b3865bd0bc6dd33e828b/backend-for-frontend-bff-flow.png)

Here are the descriptions for each step:

1. The SPA points to a backend URL (`/login` in the example above) to let the user authenticate.
2. The backend starts the usual OpenID Connect negotiation with the authorization server: it redirects the user browser to the authorization endpoint to authenticate the user and get the needed tokens.
3. The authorization server issues the tokens to the backend, which can store it in a cache.
4. The backend issues a cookie representing the user session and triggers the reloading of the SPA in the browser.
5. The SPA makes an API request to the backend including the cookie.
6. The backend validates the SPA request, retrieves the associated access token, and uses the token to make a call to the API.
7. The API returns a response to the backend.
8. The backend forwards the response to the SPA.

## Caveats and Variations

The BFF pattern solves the main concerns about using SPAs in an OIDC/OAuth 2.0 flow:

- There is no longer a public client negotiating the tokens, but this negotiation is now the responsibility of a confidential client represented by the backend.
- The SPA no longer needs to store tokens to prevent user re-authentication after page refresh.

To properly implement the BFF, there are a few caveats you need to pay attention to:

- The session cookie issued by the backend must be marked `Secure` and `HttpOnly`.
- The cookie must be associated with the token(s) issued by the authorization server.
- The tokens can be stored on the server side or in the session cookie. In the latter case, the cookie must be encrypted.
- The backend must implement all the measures to prevent Cross-Site Request Forgery (CSRF) attacks.
- The BFF pattern does not work for a standalone SPA that relies on calling a protected API directly from JavaScript. The SPA must be hosted by the backend, which is implemented as a regular web application.

While the BFF pattern solves the main security concerns of token exchange and storage for SPAs, some developers are concerned about performance issues. Specifically, the mediation run by the backend as a proxy API can be a bottleneck in some contexts. There is an alternative to the BFF pattern that meets this need, but it comes at the cost of reduced security.

This alternative is the [Token-Mediating Backend pattern](https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps#name-token-mediating-backend), which allows the backend to negotiate the tokens as in the BFF pattern but provides the access token to the SPA. This way, the SPA can directly call the protected API using the access token. While this pattern keeps token negotiation secure by always relying on the backend as a confidential client, it leaves the issue of storing and protecting the access token open. To overcome this issue, you can consider [using OAuth 2.0 with DPoP](https://auth0.com/blog/oauth2-security-enhancements/#Demonstrating-Proof-of-Possession--DPoP), which binds an access token to the client, making it no longer a bearer token. In this case, you need a DPoP-enabled authorization server, of course.

## Summary

Now you have a better understanding of the concerns related to token management and SPAs. You learned that SPAs, like any public client, are not always a safe place to handle ID, access, and refresh tokens. Much depends on the specific business requirements of the application, of course.

If you need a more secure architecture for your SPA, you can apply the Backend for Frontend pattern. This pattern introduces a dedicated backend for token negotiation and management on behalf of the SPA. This way, no tokens will reach the SPA, while the backend will also take charge of proxying the requests to a protected API.

The Backend for Frontend Pattern

matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

Build an Ionic + Angular frontend for your Spring Boot backend, all using the power of JHipster! Secured by OpenID Connect.

Build Secure Ionic Apps with Angular and JHipster

Learn how to use TypeScript and Auth0 to secure a feature-complete Express.js API. Tutorial on how to use Auth0 to implement authorization in Express.

Node.js and TypeScript Tutorial: Secure an Express API

bruno-krebs

I am passionate about developing highly scalable, resilient applications. I love everything from the database, to microservices (Kubernetes, Docker, etc), to the frontend. I find amazing to think about how all pieces work together to provide a fast and pleasurable experience to end users, mainly because they have no clue how complex that "simple" app is.

R&D Content Architect

Bruno Krebs

Learn how to integrate your Android application with a backend API.

Android Tutorial: Building and Securing Your First App (Part 2)

001c9ddc5ceb9829b6aaf24f5d28502a

I am software developer with a keen interest in open-source technologies, Linux, and native development. I've worked on many different platforms Android, iOS, Win32, Linux, FreeRTOS, the Web, and others. I've gone through the whole stack and I enjoy learning and using the latest technologies. I now work as a full-stack developer at Auth0.

Senior Engineer

Sebastian Peyrott

See how easy it is to integrate Java's powerful backend technologies with the latest frontend libraries using Yeoman + JHipster

<div class="alert alert-success alert-icon">
 <i class="icon-budicon-500"></i>
 <strong>Hey there! We wrote a new and updated version of this blog post that you can find in here: <a href="https://auth0.com/blog/full-stack-java-with-react-spring-boot-and-jhipster/">Full Stack Java with React, Spring Boot, and JHipster</a>.</strong>
</div>

Java's library ecosystem is deep and complex. This is both a blessing and a curse: there are great tools out there, but picking the right combination and setting them up to work together can be quite complex. Furthermore, the depth and breath of many of these libraries makes the getting-started step somewhat hard. [JHipster](http://jhipster.github.io/) comes to the rescue. See how easy it is to get started on your new Java + JavaScript web app with it. Read on!

<include src="TweetQuote" quoteText="Java's library ecosystem is deep and complex. This is both a blessing and a curse."/>

-----

## Introduction: Java in the Modern Web
Java's viability as a web platform is tried and tested. Huge projects, such as Netflix, have been in production mode using Java technologies in the backend for extended periods of time. Although popular technologies such as Node.js, Ruby on Rails and Django have been on the rise among startups and a new generation of developers, Java's benefits are undeniable. Although some may find tried and tested technologies boring, Java remains a safe bet for a big number of use cases. So how does Java fit in the ever changing landscape of web development nowadays?

### Modern web apps: REST and Microservices
The rise of [IaaS](https://en.wikipedia.org/wiki/Infrastructure_as_a_service) and [PaaS](https://en.wikipedia.org/wiki/Platform_as_a_service) solutions has pushed [microservices](https://auth0.com/blog/2015/09/04/an-introduction-to-microservices-part-1/) to the forefront. Familiarity with the web has also made [REST](https://en.wikipedia.org/wiki/Representational_state_transfer) the preferred architectural style. Java's extensive support for all sorts of technologies does not fail in this case. A whole bunch of libraries and frameworks are available to pick from. So what are some of the most popular alternatives?

#### Spring
For a long time, [Spring](https://spring.io/) has been one of the most used frameworks in the Java world. With a strong [inversion-of-control (IoC)](https://en.wikipedia.org/wiki/Inversion_of_control) ideology and a somewhat pervasive reliance on annotations in recent releases, Spring has use cases in nearly any backend application. Spring covers many areas of backend development: authentication/authorization, data access, messaging, transaction management, REST services, testing, among others.

#### Netflix Tools
Netflix has contributed a series of open-source tools based on their necessities. [Eureka](https://github.com/Netflix/eureka/wiki/Eureka-at-a-glance), a service registry and failover service that goes hand-in-hand with microservice-based architectures; [Zuul](https://github.com/Netflix/zuul/wiki), a proxy with dynamic routing; and [Ribbon](https://github.com/Netflix/ribbon/wiki), a load-balancer.

#### Hibernate
[Hibernate](http://hibernate.org/), an implementation of the Java Persistence API, is a popular alternative for object-relational mapping (ORM). Although you may prefer to skip ORM, Java has great support for it.

#### SQL and NoSQL
Popular choices in the SQL camp include [MySQL/MariaDB](https://en.wikipedia.org/wiki/MariaDB) and [PostgreSQL](http://www.postgresql.org/). In the NoSQL camp: [MongoDB](https://www.mongodb.org/) and [Cassandra](http://cassandra.apache.org/) are good alternatives.

Setting up a combination of these libraries, frameworks and tools can be quite bothersome. Let's see how we can do that with JHipster.

## Setup a New Project with JHipster
First, we have to make sure we have all the baseline dependencies: [Java 8](https://java.com/en/download/) and [Node.js](https://nodejs.org/en/).

#### 1. Install JHipster

```sh
npm install yo generator-jhipster
```

It is also a good idea to make sure Gulp and Bower are available:

```sh
npm install gulp bower
```

> You can perform global installations using `npm install -g <package>`.

#### 2. Create a Project

```sh
yo jhipster
```

![JHipster screenshot](https://images.ctfassets.net/23aumh6u8s0i/3GJoD0dvqAPO7uPSV60VAC/1cccdf552ba212a328291e78c4d2851d/jhipster)

You will be asked a series of questions about your project. Most of these are [self explanatory](http://jhipster.github.io/creating-an-app/). There is one question that may not be entirely obvious: monolithic vs microservice application. JHipster makes a hard distinction between applications that bundle frontend and backend components in a single distributable/runnable artifact and applications that don't. As you can imagine, monolithic applications are those that bundle frontend and backend components together. The [microservices profile](http://jhipster.github.io/microservices-architecture/) allows you to build independent components that run in separate instances, usually providing RESTful services. In this case, Netflix Eureka is used to register services and make sure they are running. If these are your first steps developing Java + JavaScript apps, go for the monolithic approach. You will find it simpler, for now.

After all questions are answered, run the boot step. This will make sure all dependencies are installed and you are ready to start working on your app:

```sh
# In case you picked Maven:
mvn spring-boot:run

# In case you picked Gradle:
gradle bootRun
```

#### 3. Fire up Your IDE!
I love [IntelliJ IDEA](https://www.jetbrains.com/idea/). Most Java IDEs can import Maven and Gradle project setups. Open your IDE and point it to your new JHipster project directory.

![Import JHipster project](https://images.ctfassets.net/23aumh6u8s0i/2rprBw9UpYSHWdJGwueJt2/ed9c265b3b1196171b6f5b68348ae567/import)

Additional IDE specific settings may improve your experience. For instance, you may want to setup autocompletion for the frontend libraries if supported. JHipster docs provide details for [Eclipse and IntelliJ IDEA](http://jhipster.github.io/configuring-ide/).

#### 4. Next Steps
The sky is the limit. In general, you will want to create new views, models and controllers and create some sort of mapping between them and other components in your application. JHipster's help does not stop at the project creation stage: it can help you add new components to your existing app. For this, we can create *entities* using `yo jhipster:entity <entityName>`. New entities create database documents or tables, the necessary ORM code, an AngularJS controller (and router and service), a HTML view and tests. In other words, JHipster does all the boilerplate for you.

But there's more. Complex applications usually have many entities and relationships. Keeping track of these can be problematic. Furthermore, designing a coherent architecture can be troublesome without proper visualization tools. Again, JHipster comes to the rescue: [JHipster-UML](http://jhipster.github.io/jhipster-uml/) and [JDL-Studio](http://jhipster.github.io/jdl-studio/). JHipster-UML takes the output from common UML editors (such as Modelio) and generate entities from them. JDL-Studio, on the other hand, is a web-based UML-like visual editor that can create `JDL` files. These files can then be fed to JHipster's entity generator. How cool is that?!

![JHipster's JDL studio](https://images.ctfassets.net/23aumh6u8s0i/4qIrzSGvdooiOSctkqc8dQ/2612d9e791f40faef5ae94ee51fbb9e3/jdl-studio)

Application logic may be more complex than what can be reasonably put inside entities. In this case, separate units of work may be required. These are called [services](http://jhipster.github.io/creating-a-service/) by JHipster. A call to `yo jhipster:service <serviceName>` will create a service stub for you to modify.

You will also want to focus on cross-cutting concerns such as authentication/authorization, logging and monitoring. Fortunately, Spring excels at this thanks to its aspect-oriented design. The base JHipster project has a good example of this in the `LoggingAspect` class.

## Aside: Did you know you can use Auth0 with Java?
JHipster comes with three choices for authentication: standard session based authentication, OAuth2 authentication and JWT authentication. If you know what we do at Auth0, you know we use JWTs everywhere. Therefore, it should come as no surprise to know you can add Auth0 to a JHipster app.

But before getting started a word of caution: JHipster generators write a lot of code for you. In fact, the basic application generated by JHipster sets up a database for authentication when picking JWT as the choice. Therefore, some work is needed to set up Auth0 as the backend. We will use the monolithic base application, using JWT as an auth mechanism. So, let's get started!

<include src="TweetQuote" quoteText="JHipster generators write a lot of code for you."/>

#### 1. Set up Auth0 Lock and its frontend dependencies
As JHipster apps are Angular apps, adding the dependencies is as easy as:

```sh
bower install auth0-lock auth0-angular a0-angular-storage --save
gulp # to automatically update the index.html file.
```

#### 2. Set up Auth0's Java library
If you picked Gradle, open `build.gradle` and add the following dependency:

```Groovy
dependencies {
    compile 'com.auth0:auth0:0.1.1'
    // (...)
}
```

Or, if you picked Maven:

```XML
<dependency>
  <groupId>com.auth0</groupId>
  <artifactId>auth0</artifactId>
  <version>0.1.1</version>
</dependency>
```

#### 3. Set up Auth0 Lock
Create a new app in the [Auth0 dashboard](https://manage.auth0.com) and get the application domain and client id. Then set these in `src/main/webapp/app/app.module.js`:

```JavaScript
angular
    .module('testApp', [
        'ngStorage',
        'tmh.dynamicLocale',
        'pascalprecht.translate',
        'ngResource',
        'ngCookies',
        'ngAria',
        'ngCacheBuster',
        'ngFileUpload',
        'ui.bootstrap',
        'ui.bootstrap.datetimepicker',
        'ui.router',
        'infinite-scroll',
        // jhipster-needle-angularjs-add-module JHipster will add new module here
        'angular-loading-bar',
        'angular-storage', // <---- ADD THIS
        'auth0'            // <---- ADD THIS
    ])
    .config(config)
    .run(run);

// New config function, add it.
function config(authProvider) {
    authProvider.init({
        domain: 'YOUR_AUTH0_DOMAIN',
        clientID: 'YOUR_CLIENT_ID'
    });

    authProvider.on('loginSuccess', function($location, profilePromise, idToken, store, $localStorage) {
        profilePromise.then(function(profile) {
            $localStorage.authenticationToken = idToken;
        });
    });

    authProvider.on('loginFailure', function($location, error) {
        console.log('Login error');
    });

    authProvider.on('authenticated', function($location) {
        console.log('Still authenticated');
    });
}
```

#### 4. Set the right client secret in Application.yml
Open `Application.yml`, find `jhipster.security.authentication.jwt.secret` and set it to the client secret found in your Auth0 dashboard.

```yml
jhipster:
    security:
        authentication:
            jwt:
                secret: YOUR_CLIENT_SECRET
```

#### 5. Show Auth0 Lock when requested
Now, when the user wants to login, rather than show JHipster's custom login form, we will show Auth0 Lock. To do this, edit `login.service.js`. You can find this file at `src/main/webapp/app/components/login/login.service.js`:

```JavaScript
function LoginService ($uibModal, auth, $localStorage, $rootScope) {
    var service = {
        open: open
    };

    var modalInstance = null;
    var resetModal = function () {
        modalInstance = null;
    };

    return service;

    function open () {
        auth.signin({
            authParams: {
                scope: 'openid app_metadata'
            }
        });
    }
}
```

Normally at this point you would set up an Angular HTTP interceptor to add the JWT to each HTTP request. Fortunately this was already done by JHipster. You can see this at `src/main/webapp/app/blocks/interceptor/auth.interceptor.js`.

#### 6. Add roles to your users!
A piece of cake. Go to to the Auth0 dashboard, then go to [rules](https://manage.auth0.com/#/rules). Add a new rule:

```JavaScript
function (user, context, callback) {
  user.app_metadata = user.app_metadata || {};
  // You can add a Role based on what you want
  // In this case I check domain
  var addRolesToUser = function(user, cb) {
    var endsWith = '@admindomain.com';
    if (user.email && (user.email.substring(user.email.length - endsWith.length, user.email.length) === endsWith)) {
      if (!user.email_verified) {
        return callback(new UnauthorizedError('Please verify your email before logging in.'));
      } else {
        return callback(null, user, context);
      }
      cb(null, ['admin']);
    } else {
      cb(null, ['user']);
    }
  };

  addRolesToUser(user, function(err, roles) {
    if (err) {
      callback(err);
    } else {
      user.app_metadata.roles = roles;
      auth0.users.updateAppMetadata(user.user_id, user.app_metadata)
        .then(function(){
          context.idToken['https://admindomain.com/roles'] = user.app_metadata.roles;
          callback(null, user, context);
        })
        .catch(function(err){
          callback(err);
        });
    }
  });
}
```

This rule will make all users with `admindomain.com` emails administrators by adding the `admin` role to their JWT.

> **Note:** Since you are giving the `admin` role to some users, it will be a good idea to require that these users have to [verify their emails before proceeding](https://auth0.com/rules/email-verified).

#### 7. Change the backend to pick the roles from the right key
Go to `TokenProvider.java` and change `getAuthentication` in the following manner:

```Java
public Authentication getAuthentication(String token) {
    Claims claims = Jwts.parser()
        .setSigningKey(secretKey)
        .parseClaimsJws(token)
        .getBody();

    String principal = claims.getSubject();

    // CHANGES START HERE
    String roles = claims.get(AUTHORITIES_KEY, Map.class).get("roles").toString();
    if(roles != null && roles.length() > 0) {
        roles = roles.substring(1, roles.length() - 1);
    }

    Collection<? extends GrantedAuthority> authorities =
        Arrays.asList(roles.split(",")).stream()
            .map(authority -> new SimpleGrantedAuthority("ROLE_" + authority.toUpperCase()))
            .collect(Collectors.toList());    

    return new UsernamePasswordAuthenticationToken(principal, token, authorities);
}
```

As you can see, roles are present in a different key in JHipster example. With the above code, our new roles key works as expected.

Also note that the token is now passed to `UsernamePasswordAuthenticationToken`. This makes it easy to retrieve the id token in the future.

#### 8. Go nuts!
Now its time to wreak havoc. It is up to you to choose what you prefer at this point. JHipster's `UserRepository`, `UserService`, `UserDetailsService`, `AccountResource`, `UserResource` and `UserJWTController` handle logins by fetching user information from a database. You may choose to follow this path by mapping or creating new users in this database with the information provided by Auth0. Or you may choose to remove all this code and settle with a simple proxy to Auth0's user profile service. Whatever you choose, these classes and their respective frontend counterparts will need to be modified. Bear in mind Auth0's Java API does not provide a user list service. In other words, user management as shown by JHipster's sample application cannot be implemented without a database in your backend.

Retrieving the user profile is as easy as:

```Java
@Service //Or some other Spring-enabled entity
public class SomeClass {
    private static final Auth0 auth0 = new Auth0("YOUR_AUTH0_DOMAIN", "YOUR_CLIENT_ID");

    public Request<UserProfile> getUserProfile() {
        SecurityContext securityContext = SecurityContextHolder.getContext();
        Authentication authentication = securityContext.getAuthentication();
        String token = (String)authentication.getCredentials();
        AuthenticationAPIClient client = auth0.newAuthenticationAPIClient();
        return client.tokenInfo(token);
    }
}
```

Using the returned `Request` object is simple enough:

```Java
request.start(new BaseCallback<UserProfile>() {
    @Override
    public void onSuccess(UserProfile u) {
        //u.getId()
        //u.getEmail()
        //u.getName()        
    }
    @Override
    public void onFailure(Auth0Exception error) {
    }
});
```

For simpler use cases there is also `spring-security-auth0`, a library to easily secure request paths using Auth0 and Spring. See the [docs](https://auth0.com/docs/server-apis/java-spring-security) to find if this fits your use case the best. Or <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up</a> and try it yourself!

## Conclusion
Java frameworks are complex beasts. Dependency injection, broad applications, and great flexibility come at a cost: getting started can be quite a burden. Fortunately JHipster can take a lot of that pain away, as long as the choice of preselected tools is what you had in mind. If Angular.js + Spring is your cup of tea, forget about the boilerplate and get started in a few minutes. Try it, you might be pleasantly surprised.

<div class="mv-widget" data-widget="poll" data-id="HJuZF52qot0XaO0wpIP1YT6z1mv" data-width="100%" data-height="auto"></div>
<script src="//d6launbk5pe1s.cloudfront.net/widget.js" async></script>


Easily Generate a Full-Stack Java + JavaScript App with JHipster

pablo-cibraro

Pablo is an internationally recognized expert and entrepreneur with more than 22 years of experience in designing and implementing large distributed systems with Microsoft technologies and a Connected System MVP. <br>
For the last few years, Pablo has helped numerous Microsoft teams develop tools and frameworks for building service-oriented and web applications with .NET. <br>
Pablo now focuses on technologies that enable developers to build large-scale systems and web applications on the cloud, such as HTML5, Node.js, ASP.NET, Windows Azure and Amazon AWS.

Agilesight Cofounder

Pablo Cibraro

Understand the Backend For Frontend authentication pattern and how it can be implemented in ASP.NET with Auth0.

Backend For Frontend Authentication Pattern with Auth0 and ASP.NET Core

How to set up non-interactive apps using the client credentials grant and Auth0 to perform IoT device, CLI tool, and more machine to machine API authorization.



Many times, a secure, authorized communication channel between different parts of an autonomous system is required. Think of two backend services from different companies communicating through the internet. For these cases, OAuth 2.0 provides the [client credentials grant](https://tools.ietf.org/html/rfc6749#section-4.4) flow. In this post, we will take a look at how the client credentials grant from [OAuth 2.0](https://tools.ietf.org/html/rfc6749) can be used with Auth0 for [machine to machine (M2M) communications](https://auth0.com/machine-to-machine).

<include src="TweetQuote" quoteText="Learn to use machine to machine authorization with Auth0!"/>

[Get the code](https://github.com/auth0-samples/auth0-api-auth-samples) for the sample in this post.

---

<AmpContent>
<amp-youtube
    data-videoid="9ivMf15wl1A"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>
<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/9ivMf15wl1A' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## Machine to Machine Communications
There are many parts of a system where machine to machine communications make sense: service to service, daemon to backend, CLI client to internal service, [IoT](https://auth0.com/blog/javascript-for-microcontrollers-and-iot-part-1/) tools. The key aspect of these communications lies on the fact that the element to establish trust in the system is the _client_. What does this mean? In contrast to usual systems where an authorization process attempts to establish trust by authorizing _a user_, in this case what must be authorized and trusted is the client. In other words, there is no need for a user to interact with the system to authenticate, rather the system must authenticate and authorize the _client_. To be clear, in this case, the client is simply an application, process or even an autonomous system. For these scenarios, typical authentication schemes like username + password, social logins, etc. don't make sense.

The [client credentials grant] from OAuth 2.0 attempts to fulfill the need for these scenarios. In the client credentials grant, the client holds two pieces of information: the client ID and the client secret. With this information, the client can request an access token for a protected resource.

![Client Credentials Grant](https://images.ctfassets.net/23aumh6u8s0i/3bJ99s5VK6bB85bS9eiBOf/26c0da9d6918894b66e44a87c9b5edf2/client-credentials-grant)

1. The client makes a request to the authorization server sending the `client ID`, the `client secret`, along with the `audience` and other claims claims.
2. The authorization server validates the request, and, if successful, sends a response with an access token.
3. The client can now use the access token to request the protected resource from the resource server.

Since the client must always hold the client secret, this grant is only meant to be used in _trusted_ clients. In other words, clients that hold the _client secret_ must always be used in places where there is no risk of that secret being misused. For example, while it may be a good idea to use the client credentials grant in an internal daemon that sends reports across the web to a different part of your system, it cannot be used for a public tool that any external user can download from GitHub.

## Client Credentials Grant
The client credentials grant is very simple to use. The following are the relevant HTTP requests:

```
POST https://<YOUR_AUTH0_DOMAIN>/oauth/token
Content-Type: application/json
{
  "audience": "<API_IDENTIFIER>",
  "grant_type": "client_credentials",
  "client_id": "<YOUR_CLIENT_ID>",
  "client_secret": "<YOUR_CLIENT_SECRET>"
}
```

A successful authorization request results in a response like the following:

```
HTTP/1.1 200 OK
Content-Type: application/json
{
  "access_token": "eyJz93a...k4laUWw",
  "token_type": "Bearer",
  "expires_in": 86400
}
```

In Auth0, to use the client credentials grant, you can [create a new "machine to machine" application from the dashboard:](https://auth0.com/docs/applications/machine-to-machine)

![Machine to Machine in the Auth0 Dashboard](https://images.ctfassets.net/23aumh6u8s0i/77BJOc4RrLIp07FLtdX5SV/491323d54c787864e5ce322c225bd6b8/2-create)

A machine to machine application requires the selection of at least one API. This is the API that gets selected through the `audience` claim in the HTTP request above.

![Select API in the Auth0 Dashboard](https://images.ctfassets.net/23aumh6u8s0i/4TEwKo6fti1umT59Ui5fHp/c4da3c10ee49b6c2784e731b9d25ea91/3-select-api)

You can create audiences for your APIs and protected resources in the [API](https://manage.auth0.com/#/apis) section of the Auth0 Dashboard. You can enable or disable these APIs in the `APIs` tab of your application.

### Granular Permissions in Auth0
Thanks to the use of [Hooks in Auth0](https://auth0.com/docs/hooks), it is very easy to have granular permissions for [machine to machine communications](https://auth0.com/machine-to-machine). Using Node.js code, you are able to customize the actions of Auth0 and extend the functionality of the Auth0 base platform.

<include src="TweetQuote" quoteText="With Auth0 Hooks, you can have powerful granular permissions even for machine to machine authorization!"/>

The Auth0 utility (auth0) is part of `wt-cli`. More information on `wt-cli` can be [found here](https://webtask.io/docs/wt-cli) and configuring the wt-cli for use can be [found here](https://manage.auth0.com/#/tenant/webtasks).

If you wanted to create a Hook, this is how the CLI process would go:

Scaffold the sample code from Auth0:

```bash
auth0 scaffold -t pre-user-registration > file.js
```

Then create the Hook:

```bash
auth0 create -t pre-user-registration --name my-extension-1 -p auth0-default file.js
```

Along with this process, the [Auth0 Management Dashboard](https://auth0.com/docs/hooks/dashboard) also provides an interface for managing your Hooks. This dashboard can do any of the CLI functions except for the "Identify and get log data from a Hook".

If you don't need the flexibility of Hooks, you can still achieve a level of granularity with scopes. These can be enabled on a per API and per application/client basis.

## Common Use Cases for M2M Communications
In this section, we will take a look at common scenarios where M2M communications might make sense.

### Backend-to-Backend (Services/Daemons)
This is one of the most common scenarios. Let's say you have different internal services that produce data in the form of logs. You are storing those logs locally in your own data warehouse. However, as part of your policies, you also want those logs to be stored offsite in a cold storage solution. You send those logs over the internet to the cold storage service in a different cloud provider. To authorize log storage from different services in your network, you use the client credentials grant, giving each client a client ID and a client secret.

![Machine to Machine Logging](https://images.ctfassets.net/23aumh6u8s0i/yAy6yj6lBIkpSajKLnNdM/3d9c1f1aeffc1c33e20a5a982dc43e7d/3-backend-to-backend)

What about other common services like job schedulers, daemons, continuous processes? These are also great scenarios where machine to machine authorization makes sense. Say you have a job scheduler that lives in your network but on a different cloud provider that offers a great deal for GPU processing. You only want your authorized clients to make use of the service. For this reason, you use the client credentials grant and only authorize those client IDs that you want to allow.

### Internet of Things Devices
The rise of [Internet of Things devices](https://auth0.com/blog/javascript-for-microcontrollers-and-iot-part-1/) makes a great case for machine to machine solutions. Many (if not most) of IoT devices are small, autonomous, specialized devices that collect and send data to a server. Let's say you have a fleet of small IoT devices that you use to collect data on the number of cars that are parked in your parking lot. You have many devices that are continuously reporting data to a central server. These devices communicate over WiFi. To avoid intrusions, and even though your WiFi network is password protected, you use the client credentials grant, giving each IoT device its own client ID and client secret. These devices are trusted: you set them up and no-one else can interact with them.

### CLI clients
When systems become big, automation starts to make more and more sense. Many tasks that are repetitive, but that still require an administrator to supervise them, start to become scripts. These scripts are run when administrators need to run them. Since these scripts interact with sensitive parts of a company's architecture, they usually have some sort of protection. In these cases, administrators may choose to create CLI apps that have the necessary rights to perform the actions, but that are only available in certain computers, like their own, or in mainframes. In these cases, the client credentials grant also makes sense. These CLI apps are trusted, but they also need access to sensitive parts of a system. Protecting access to sensitive parts of the system by requiring the client ID and client secret can be a solution.

## Code Example: Gift Deliveries App
If you are interested in seeing code that can apply to a real-world scenario, we have a sample app just for that purpose. The [Gift Deliveries app](https://github.com/auth0-samples/auth0-api-auth-samples/tree/master/machine-to-machine) shows how two backend services from the same company can interact securely with the use of the client credentials grant.

In this app, one service, the [World Mappers API](https://github.com/auth0-samples/auth0-api-auth-samples/tree/master/machine-to-machine/worldmappers-api-nodejs) exposes an API that can be used to find coordinates, addresses, and directions; while another service, the [Gift Deliveries Service](https://github.com/auth0-samples/auth0-api-auth-samples/tree/master/machine-to-machine/giftdeliveries-nodejs), uses the `World Mappers API` to get directions from one point to the destination address (to send a gift).

![Gift Deliveries App](https://images.ctfassets.net/23aumh6u8s0i/3cGGMA4TtCldPmX8vPe2j9/96f1aedf84c2eab44a86b783d5e74823/4-gift-deliveries-app)

Both of these services run in the internal network of an online shop, therefore, the `Gift Deliveries` client is a trusted client, which allows it to use the client credentials grant.

If you take a look at the `giftdeliveries-nodejs/index.js` file you will see the code that gets an access token using the client credentials grant:

```javascript
var getAccessToken = function(callback) {
  if (!env('AUTH0_DOMAIN')) {
    callback(new Error('The AUTH0_DOMAIN is required in order to get an access token (verify your configuration).'));
  }

  logger.debug('Fetching access token from https://' + env('AUTH0_DOMAIN') + '/oauth/token');

  var options = {
    method: 'POST',
    url: 'https://' + env('AUTH0_DOMAIN') + '/oauth/token',
    headers: {
      'cache-control': 'no-cache',
      'content-type': 'application/json'
    },
    body: {
      audience: env('RESOURCE_SERVER'),
      grant_type: 'client_credentials',
      client_id: env('AUTH0_CLIENT_ID'),
      client_secret: env('AUTH0_CLIENT_SECRET')
    },
    json: true
  };

  request(options, function(err, res, body) {
    if (err || res.statusCode < 200 || res.statusCode >= 300) {
      return callback(res && res.body || err);
    }

    callback(null, body.access_token);
  });
}
```

If you want to run this app, <a href="https://a0.to/blog_signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a>, clone the [repository](https://github.com/auth0-samples/auth0-api-auth-samples) and follow the [README](https://github.com/auth0-samples/auth0-api-auth-samples/blob/master/machine-to-machine/README.md).

<include src="SignupCTA" text="Try out the most powerful authentication platform for free." linkText="Get started →" />

## Conclusion

[Machine to machine communications](https://auth0.com/machine-to-machine) are part of almost any modern architecture. OAuth 2.0 and Auth0 provide the necessary building blocks to make its use in your architectures a breeze. From backend-to-backend, services, daemons, IoT devices, and even CLI tools, the client credentials grant remains a simple yet useful approach to the problem of authorization between autonomous and semi-autonomous system. This grant, augmented with the power of hooks, can cover all common use cases while remaining flexible for more granular security needs in the future. If you are using, or interested in using, machine to machine communications in your products, leave us a comment below. If you are unsure how any of this can apply to your architecture, [hit the "talk to sales" button in our homepage](https://auth0.com/), we can help you out!


Using Machine to Machine (M2M) Authorization

tadej-slamic

With over a decade in the software industry, I've helped startups launch their first product, assisted FTSE100 enterprises with digital transformation, been a part of the fintech boom, and helped particle accelerators cool down. I enjoy architecting and creating scalable backends and crafting modern mobile, web, and desktop apps.

CTO at Shortcut AS

Tadej Slamic

Learn how to use Spring Boot, Java, and Auth0 to secure a feature-complete API. Learn how to use Auth0 to implement authorization in Spring Boot.

Spring Boot Authorization Tutorial: Secure an API (Java)

Learn how to create real-time web applications by using the Server-Sent Events specification.

Developing Real-Time Web Applications with Server-Sent Events

Learn how to use Spring and Java to build a feature-complete API. Learn how to use Spring Boot to create, read, update, delete, and validate data.

Spring Boot Tutorial: Build a CRUD API (Java)

Learn how to use TypeScript to build a feature-complete Express API. Tutorial on how to use TypeScript with Express to create, read, update, and delete data.

Node.js and TypeScript Tutorial: Build a CRUD API

5e074956ee8ba1fea26e30d28c190495?s=300 avatar

5e074956ee8ba1fea26e30d28c190495?s=300

Full stack developer creating content at Auth0. I love taking a deep dive into hard-to-understand concepts and creating content that makes them easier to grasp. In my free time you can usually find me reading, hanging out with my dogs, or curling in the squat rack.

Former Developer Content Manager

Holly Guevara

Learn how to use the Auth0 Management API to build an admin dashboard with Express and Vue



<details>
<summary>Starting from this chapter?</summary>

Clone the application starter repo:

``` bash  
git clone git@github.com:auth0-blog/vue-express-auth.git
```

Follow the directions in the [project README](https://github.com/auth0-blog/vue-express-auth#set-up-the-express-server).

In the [Auth0 dashboard](https://manage.auth0.com/dashboard), click on "APIs" in the left menu and then select "Auth0 Management API". From there, select "Machine to Machine Applications" and find the "Vue Express API" you just created. Click the switch next to it so that it says "Authorized".

![Auth0 authorized API](https://images.ctfassets.net/23aumh6u8s0i/3bnn4TcXg4JJ6Ti42f4ymi/1545602b9f43d8c6dcfafda536730d27/auth0-management-api-authorized)

Next, add permissions to the application. Click on the down arrow V next to the authorized switch. Select `read:users`, `delete:users`, and `read:user_idp_tokens` and then click "Update".

</details>


## Calling the Management API with Express

The Express API is now registered in the dashboard, and the Auth0 Management API is set up and ready to issue an access token to the Express API. So what's next? Now, you have to do the [**client credentials**](https://auth0.com/docs/flows/concepts/client-credentials) dance to get an access token.

## Client Credentials Flow

The [OAuth 2.0 RFC 6794](https://tools.ietf.org/html/rfc6749#section-4.4) defines how trusted clients (your Express API) can use the client credentials to request an access token from a resource owner (the Auth0 Management API):

> ❗ The client can request an access token using only its client credentials (or other supported means of authentication) when the client is requesting access to the protected resources under its control, or those of another resource owner that have been previously arranged with the authorization server (the method of which is beyond the scope of this specification).

Because the Management API access token is requested on behalf of the Express application, not a user, it doesn't make sense to ask for a username and password to verify who the requester is. Instead, you can use the Express application's client credentials (`client_id` and `client_secret`) to authenticate the application.

![Machine to machine client credentials grant](https://images.ctfassets.net/23aumh6u8s0i/3nVhN6jBKCjJxpO2BhcxOW/af8eaeabf5529b52e5e5ce865d045045/auth-sequence-client-credentials)
> This diagram depicts the client credentials grant flow described below

* The Express application authenticates with the Auth0 Authorization Server using its `client_id` and `client_secret`
* The Auth0 Authorization Server validates the  `client_id` and `client_secret`
* The Auth0 Authorization Server issues an access token and passes it back to your application
* The Express application passes this token when it makes a request to the Management API
* The Management API responds with the requested data

## Requesting an Access Token  

The Express application needs to request an access token for the Management API from the Auth0 server. There are **three ways** to do this.

1) Make a `POST` request to the token endpoint using your Express API client ID and client secret, as shown below:

<include src="AmpWarning" fullUrl="https://auth0.com/blog/build-an-admin-dashboard-with-express-and-vue-creating-the-backend"/>

``` js  
let request = require("request");

let options = {
    method: 'POST',
    url: 'https://YOUR-DOMAIN.auth0.com/oauth/token',
    headers: { 'content-type': 'application/json' },
    body: '{
        "client_id": "yourclientid",
        "client_secret": "yourclientsecret",
        "audience": "https://YOUR-DOMAIN.auth0.com/api/v2",
        "grant_type": "client_credentials"
    }'
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);
});
```

This will return the **access token** (with a 24-hour expiration) and **token type**:

``` js  
{
  "access_token": "somelongstring",
  "token_type": "Bearer"
}
```

2) Use the [Auth0 Node Authentication API Client](https://www.npmjs.com/package/auth0#authentication-api-client)

``` js  
let AuthenticationClient = require('auth0').AuthenticationClient;
 
let auth0 = new AuthenticationClient({
  domain: '{YOUR_ACCOUNT}.auth0.com',
  clientId: '{CLIENT_ID}',
  clientSecret: '{CLIENT_SECRET}'
});
 
auth0.clientCredentialsGrant(
  {
    audience: 'https://{YOUR_ACCOUNT}.auth0.com/api/v2/',
    scope: '{MANAGEMENT_API_SCOPES}'
  },
  function(err, response) {
    if (err) {
      // Handle error.
    }
    console.log(response.access_token);
  }
);
```

This performs a Client Credentials Grant using the `clientId` and `clientSecret` of the client that was registered in the Auth0 dashboard, in this case, the Express API. This will return the **access token**, **scopes**, **expiration**, and **token type**. You'll then send this access token along with every request you make to the Management API.

3) Use the [Auth0 Node Management API Client](https://www.npmjs.com/package/auth0#management-api-client)

``` js  
let ManagementClient = require('auth0').ManagementClient;

let auth0 = new ManagementClient({
  domain: '{YOUR_ACCOUNT}.auth0.com',
  clientId: '{YOUR_CLIENT_ID}',
  clientSecret: '{YOUR_CLIENT_SECRET}',
  scope: 'read:users delete:users'
});
```

Finally, there also exists an option to **automatically receive an access token in the background** using the [Auth0 Node Management API Client](https://www.npmjs.com/package/auth0#management-api-client). This is similar to option 2. The Client Credentials Grant still takes place behind the scenes and will retrieve a Management API access token along with its expiration. It then automatically caches this access token for the time specified in the expiration.

For this tutorial, you'll be using the third option. This option allows you to use the [Management Client to easily make requests to the Management API](https://auth0.github.io/node-auth0/module-management.ManagementClient.html).

## Getting your Access Token in Express

Now that you know how the client credentials flow works and how you're going to implement it in your application, it's finally time to write some code!

Head back to your code editor and open `server/server.js` from the [Vue Express application you cloned earlier](https://github.com/auth0-blog/vue-express-auth).

📝 Here's an overview of what you're going to do:

- Install and import the Auth0 `ManagementClient`
- Create a `.env` file for your confidential values
- Add `clientId` and `clientSecret` to your `authConfig` object
- Create a new instance of the `ManagementClient` with your `domain`, `clientId`, and `clientSecret`

Make sure you're in the `server` directory in your terminal and install the [`node-auth0`](https://www.npmjs.com/package/auth0) package by running:

``` bash  
npm install auth0
```

Find the `require` functions at the top of your `server/server.js` file and add the following line to import `ManagementClient`.

``` js  
// ...
// import statements
const ManagementClient = require('auth0').ManagementClient;
// app.use 
```

Next, toward the top of the file, you should see an `authConfig` object directly underneath the `require` and `use` methods. This needs to be modified to include your client secret and client ID from the Express API.

Because these are sensitive values, you should not save them directly in the code. If you ever share this code or upload it to GitHub, you [risk leaking your client secret](https://auth0.com/blog/developers-guide-to-common-vulnerabilities-and-how-to-prevent-them/#Mishandling-Sensitive-Data). Instead, it's best to create a `.env` file and add this file to your `.gitignore`. To do this, navigate to the `server` directory and run the following command in your terminal: 

``` bash  
npm install dotenv
```

At the top of your `server/server.js` file add this line:

``` js  
require('dotenv').config();
```

Now create a file in the root of the `server` directory called `.env` and add the following to it:

``` js  
AUTH0_DOMAIN = your-domain.auth0.com
AUTH0_AUDIENCE = https://your-api-audience.com
CLIENT_ID = yourclientid
CLIENT_SECRET = yourclientsecret
```

The values for `CLIENT_ID` and `CLIENT_SECRET` can be found back in the [Auth0 dashboard](https://manage.auth0.com/dashboard) on the Auth0 Management API page that you set up earlier.

If you already closed this tab, just click on "**APIs**" > "**Auth0 Management API**" > "**Test**" and then select the Express API from the dropdown. Next, click on "**Node.JS**", and you can copy the `client_id` and `client_secret` from the resulting code below.

If you followed the setup instructions from the README, you should already have an object in `server.js` called `authConfig` that contains the audience and domain values. Grab those and paste them into their corresponding spots in `.env`.

If you don't have the domain and audience values, they can be found by clicking on "**APIs**" in the left-hand menu and then selecting the Vue Express API. Next, click on "**Quick Start**" and then select "**Node.js**". You'll see a value for `audience`, which you can paste directly into `AUTH0_AUDIENCE` and then another value for `issuer`. Copy this and paste it into `AUTH0_DOMAIN`.

> ⚠️ Important: For `AUTH0_DOMAIN`, omit the `https://` and the trailing `/`. It should be formatted exactly as shown above.

Next, modify the `authConfig` object in `server/server.js` to use those environment variables as follows:

``` js  
// Set up Auth0 configuration
const authConfig = {
  domain: process.env.AUTH0_DOMAIN,
  audience: process.env.AUTH0_AUDIENCE,
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET
};
```

And finally, you'll create a new instance of the `ManagementClient`, which takes an object that contains your Auth0 domain, client ID, and client secret.

Paste this just below the `authConfig` object in `server/server.js`:

``` js  
const managementAPI = new ManagementClient({
  domain: authConfig.domain,
  clientId: authConfig.clientId,
  clientSecret: authConfig.clientSecret
});
```

Now, when you use `managementAPI`, it will automatically perform the Client Credentials Grant in the background using the domain, client ID, and the client secret, which will result in an access token that can be used to make requests to the Management API.

Now it's time to test it out.

## Calling the Management API

Back in `server/server.js`, scroll down to where the `events` array is defined. Paste in the following code right below it:

``` js  
app.get('/users', (req, res) => {
  managementAPI
    .getUsers()
    .then(function(users) {
      res.send(users);
    })
    .catch(function(err) {
      console.log(err);
    });
});
```

This will create an API route in your Express application that calls the [Management API Node Client to get all users](https://auth0.github.io/node-auth0/module-management.ManagementClient.html#getUsers) whenever that route is accessed.

To verify that it's working, switch to your terminal and start your Express application if you haven't already by running:

``` bash  
npm start
```

Navigate to [`http://localhost:8000/users`](http://localhost:8000/users) in your browser, and you should see all of the users that have signed up for your application! 💃

If you're getting an error, **reach out in the comments below**, and I'll try to help troubleshoot.

You're also going to need a route to delete a user, so since you're here, just set that up now. Below the previous route, paste in:

``` js  
app.get('/users/:id/delete', (req, res) => {
  managementAPI
  .deleteUser({ id: req.params.id })
  .then(response => {
    res.send('User deleted!');
  })
  .catch(function(err) {
    res.send(err);
  });
});
```

This will grab the `id` of the user, which will be passed to the server from the Vue client. Then it will call the Management API to do the deletion.

Now that you're able to pull all of your users into the application and delete a user, it's time to switch to the frontend.

<include src="tutorial/NextButton" nextPart="build-an-admin-dashboard-with-express-and-vue-creating-the-frontend/" completedMessage="I've set up the Express backend"/>

<include src="tutorial/IssueButton" communityTopic="53302"/>


Build an Admin Dashboard with Express and Vue: Creating the Backend

Learn about the new features and changes in the latest Laravel 8 release.




It feels like just yesterday we were reading about what's coming in Laravel 6. And here we are today, learning about what's new in Laravel 8! 🤯

Whether you're getting started with Laravel or just want to check out the [latest and greatest](https://laravel.com/docs/8.x/releases), keep on reading.

## Laravel Jetstream

[Laravel Jetstream](https://jetstream.laravel.com/1.x/introduction.html), the new Laravel application scaffolding, was released with the new version of Laravel.

Jetstream provides a fantastic starting point for your Laravel applications with the following built-in options:

- Login and registration
- Email verification
- Two-factor authentication (2FA)
- Session management
- [Laravel Sanctum](https://laravel.com/docs/8.x/sanctum) API support
- Designed with Tailwind CSS
- Choice of two frontend stacks: [**Livewire + Blade**](https://laravel-livewire.com/) or [**Inertia.js + Vue.js**](https://inertiajs.com/)

![Laravel Jetstream Livewire installation](https://images.ctfassets.net/23aumh6u8s0i/5bC4p3YLjRj30EO0VlIRSs/aa91442260d3618589c60fcd808383f6/laravel-jetstream-livewire)

### How to use Laravel Jetstream

You can create a new application with Jetstream using the [Laravel installer](https://laravel.com/docs/8.x/installation#installing-laravel). Make sure the Laravel installer is updated to `v4.0`, and then run the following:

``` bash  
laravel new your-project --jet
```

Choose which stack you want to use: Livewire or Inertia. Next, run your database migrations with:

``` bash  
php artisan migrate
```

Finally, see your application at [`http://localhost:8000`](http://localhost:8000) by running:

``` bash  
php artisan serve
```

And now, you're ready to [explore your new Laravel Jetstream application](https://jetstream.laravel.com/1.x/installation.html)!

If you'd prefer to use Composer, you can find the [Composer installation instructions](https://jetstream.laravel.com/1.x/installation.html#composer-installation) in the Laravel Jetstream documentation.

## Models Updates

### Welcome back, `Models` directory!

The `app/Models` directory is back! Years ago, when Laravel 5 launched, a lot of developers noticed the `Models` directory was missing. Instead, new models were created directly in the `app` directory. Surprisingly, this caused quite the uproar in the community. You could still manually create the folder, and a lot of developers did, but it was considered an extra nuisance by some.

With Laravel 8, the beloved `app/Models` directory has been restored! If you prefer the old structure, you can always modify your codebase to remove the `Models` directory again.

### Model factory classes

[Taylor Otwell](https://github.com/taylorotwell) spent some time rewriting the Eloquent model factories as classes.

Let's compare the changes by looking at the default `User` factories from both Laravel 7 and 8. 

**User factory in Laravel 7.x:**

``` php  
// database/factories/UserFactory.php

use Faker\Generator as Faker;
use Illuminate\Support\Str;

$factory->define(App\User::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),
    ];
});
```

**User factory in Laravel 8:**

``` php  
// database/factories/UserFactory.php

namespace Database\Factories;

use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

class UserFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = User::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            'name' => $this->faker->name,
            'email' => $this->faker->unique()->safeEmail,
            'email_verified_at' => now(),
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
        ];
    }
}
```

In Laravel 8, factories are now classes that extend the base Laravel factory class. Glancing at the default file, you'll see the `model` property and `definition` method. The `definition` method then returns the model attributes.

Compare this to Laravel 7 and below, where the `UserFactory` is defined with a [Closure](https://www.php.net/manual/en/class.closure.php) and returns the specified model attributes.

Both of these still have access to Faker, as expected. Let's look at the difference between *using* factories in Laravel 7 versus Laravel 8.

**Using factories in Laravel 7:**

Before this update, you would use the `factory` helper function in your seeder files to generate model instances.

``` php  
// database/seeds/UserSeeder.php

class UserSeeder extends Seeder
{
  /**
  * Run the database seeds.
  *
  * @return void
  */
  public function run()
  {
    // Create three App\User instances
    $users = factory(App\User::class, 3)->create();
  }
}
```

**Using factories in Laravel 8:**

With Laravel 8, you can use the `factory` directly on the model instance. This is because the default models now include a `HasFactory` trait, as shown in the simplified code below. 

``` php  
// database/seeders/UserSeeder.php

class UserSeeder extends Seeder
{
  /**
    * Run the database seeds.
    *
    * @return void
    */
  public function run()
  {
    // Create three App\User instances
    User::factory(3)->create();
  }
}
```

``` php  
// app/Models/User.php
<?php
namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
// ...

class User extends Authenticatable
{
    use HasFactory;
    // ...
}

```

> ❗ If you have existing factories on a Laravel 7.x project or older and you're planning on upgrading, you can use the [`laravel/legacy-factories`](https://github.com/laravel/legacy-factories) package that was created to simplify the upgrade process.

## Migration Squashing

😱 Laravel 8 introduces another exciting feature: migration squashing! No longer do you have to scroll for five minutes when you open up your `migrations` folder! With migration squashing, you can now condense your migration files into a single SQL file with the following commands:

``` bash  
php artisan schema:dump
php artisan schema:dump --prune
```

Laravel will write the new `schema` file to `database/schema`. Then when you run your migrations, Laravel will run the SQL from the schema file first before moving on to anything created later in the `migrations` folder.

> Note: Migration squashing is currently only supported for MySQL and Postgres.

## Job Batching

In Laravel, jobs are tasks that can be performed as part of a queue to accomplish something in the background. The new [job batching feature](https://laravel.com/docs/8.x/queues#job-batching) allows you to execute several [jobs](https://laravel.com/docs/8.x/queues#creating-jobs) together.

To use the new batching feature, first define your job as you normally would. The example below has been simplified to show the new `Batchable` trait.

``` php  
<?php
namespace App\Jobs;

use Illuminate\Bus\Batchable;
// ...

class SendEmail implements ShouldQueue
{
  use Batchable;

  /**
    * Execute the job.
    *
    * @return void
    */
  public function handle()
  {
    if ($this->batch()->cancelled()) {
      // Detected cancelled batch...

      return;
    }
    // Batched job executing...
  }
}
```

Once you have your job defined, you can dispatch a batch of jobs in your controller using the `batch` method of the `Bus` facade.

``` php  
  use App\Jobs\SendEmail;
  use App\User;
  use Illuminate\Bus\Batch;
  use Illuminate\Support\Facades\Batch;
  use Throwable;

  $batch = Bus::batch([
    new SendEmail(User::find(1)),
    new SendEmail(User::find(2)),
    new SendEmail(User::find(3)),
  ])->then(function (Batch $batch) {
    // All jobs completed successfully...
  })->catch(function (Batch $batch, Throwable $e) {
    // First batch job failure detected...
  })->finally(function (Batch $batch) {
    // The batch has finished executing...
  })->dispatch();

  return $batch->id;
```

You'll also notice the addition of the `then`, `catch`, and `finally` methods. You can use these to define completion callbacks for your batch of jobs.

## Better Rate Limiting


**Rate limiting in Laravel 7**

``` php  
Route::middleware('auth:api', 'throttle:10,1')->group(function () {
  Route::get('/login', function () {
    //
  });
});
```

**Rate limiting in Laravel 8**

In Laravel 8, you can define your rate limiters in `app/Providers/RouteServiceProvider.php` using the `for` method of the `RateLimiter` facade. The `for` method will accept a name and a Closure, which returns the rate limiting details that you set up. 

``` php  
use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Support\Facades\RateLimiter;

RateLimiter::for('login', function (Request $request) {
  return Limit::perMinute(10);
});
```

You can now apply this pre-configured rate limiter to routes with `throttle:` followed by the rate limiter name.

``` php  
Route::middleware(['throttle:login'])->group(function () {
  Route::post('/login', function () {
    //
  });
  Route::post('/register', function () {
    //
  });
});
```

> Note: The `throttle` middleware API from previous Laravel versions will still remain functional.

For more about rate limiting options, see the [Laravel routing docs](https://laravel.com/docs/8.x/routing#rate-limiting). 

## Maintenance Mode

Laravel 8 also brings some improvements to maintenance mode. Maintenance mode is a really helpful feature that allows you to "disable" your application while you're making updates to it.

In previous versions, you would have to specify the IPs that would still be allowed to access the application with the `allow` option:

``` bash  
php artisan down --allow=127.0.0.1 --allow=192.168.0.0/16
```

With Laravel 8, you no longer need to allow certain IPs explicitly. Instead, you can use the `secret` option to create a maintenance mode bypass token:

``` bash  
php artisan down --secret="1630542a-246b-4b66-afa1-dd72a4c43515"
```

You can then access your application while in maintenance mode by appending the token to your application's URL, e.g., `https://example.com/1630542a-246b-4b66-afa1-dd72a4c43515`. The bypass cookie will be saved to your browser, and you can continue navigating your application from its normal URL, e.g., `https://example.com`.

## Routing Namespacing

In Laravel 8, the `namespace` property in `app/Providers/RouteServiceProvider.php` is now `null` by default, as you can see below.

``` php  
// app/Providers/RouteServiceProvider.php
<?php

namespace App\Providers;

// ...
class RouteServiceProvider extends ServiceProvider
{
    // ...
    /**
     * If specified, this namespace is automatically applied to your controller routes.
     *
     * In addition, it is set as the URL generator's root namespace.
     *
     * @var string
     */
    protected $namespace = null; // <--- LARAVEL 8 CHANGE
    // ...
}
```

In previous versions, the `$namespace` property was set to `App\Http\Controllers`.

This change means that controller route definitions will no longer include automatic namespace prefixing. The example below demonstrates how routing namespacing differs between Laravel 7 and Laravel 8.

**Laravel 7:**

``` php  
// routes/web.php

Route::get('/posts', 'PostController@index'); 
```

**Laravel 8:**

``` php  
// routes/web.php
use App\Http\Controllers\PostController;

Route::get('/posts', [PostController::class, 'index']);
```

If you prefer the old way, you can change the `$namespace` value back to `App\Http\Controllers` in `app/Providers/RouteServiceProvider.php`.

For more about routing namespacing updates, see the [Laravel routing documentation](https://laravel.com/docs/8.x/routing#basic-routing).

## Wrap Up

As always, Taylor Otwell and the rest of the Laravel team have been hard at work to deliver us some awesome and welcome updates to Laravel! Now that you have some background about what's new and what changed with Laravel 8, feel free to go off and [explore on your own](https://laravel.com/docs/8.x)! Leave a comment below letting me know your favorite change in Laravel 8 and what you're planning on building. Cheers!

<include src="asides/AboutAuth0" />


What's New in Laravel 8?

Learn how to use NestJS, a Node.js framework powered by TypeScript, to build a secure API.



<details>
<summary>Are you starting from this chapter?</summary>

Clone the application repo and check out the `creating-data-models-and-service` branch:

``` bash  
git clone git@github.com:auth0-blog/wab-menu-api-nestjs.git \
nest-restaurant-api \
--branch creating-data-models-and-service
```

Make the project folder your current directory:

``` bash  
cd nest-restaurant-api
```

Then, install the project dependencies:

``` bash  
npm i
```

Finally, create a `.env` hidden file:

``` bash  
touch .env
```

Populate `.env` with this:

``` bash  
PORT=7000
```

</details>

## Define the Endpoints

For this application, you'll create endpoints to access an `items` resource to perform read, write, update, and delete operations on menu items:

``` bash  
# get all items
GET items/
# get a single item using an id parameter
GET items/:id
# create an item
POST items/
# update an item
PUT items/
# delete an item using an id parameter
DELETE items/:id
```

Only the `GET` endpoints will be public, so let's start with those.

## Create a NestJS Controller

To create an `ItemsController`, execute the following command:

``` bash  
nest generate controller items --no-spec
```

Once executed, this command creates an `items.controller.ts` file under the `src/items` directory. The CLI automatically registers `ItemsController` as a controller of `ItemsModule` for you.

``` typescript  
// src/items/items.module.ts

import { Module } from '@nestjs/common';
import { ItemsService } from './items.service';
import { ItemsController } from './items.controller';

@Module({
  providers: [ItemsService],
  controllers: [ItemsController],
})
export class ItemsModule {}
```

Your application will only recognize `controllers` registered in the metadata object that the `@Module` decorator receives as argument.

Following the architectural conventions of other frameworks, [NestJS controllers](https://docs.nestjs.com/controllers) are responsible for mapping endpoints to functionality. Controllers are created using a class and a decorator as follows:

``` typescript  
@Controller('path')
export class NameController {}
```

The `@Controller` decorator takes as argument the resource path that it will handle.

Populate `src/items/items.controller.ts` as follows to create all of your application endpoints:

``` typescript  
import {
  Body,
  Controller,
  Delete,
  Get,
  Param,
  Post,
  Put,
} from '@nestjs/common';
import { ItemsService } from './items.service';
import { Items } from '../items';
import { Item } from '../item';

@Controller('items')
export class ItemsController {
  constructor(private readonly itemsService: ItemsService) {}

  @Get()
  async findAll(): Promise<Items> {
    return this.itemsService.findAll();
  }

  @Get(':id')
  async find(@Param('id') id: number): Promise<Item> {
    return this.itemsService.find(id);
  }

  @Post()
  async create(@Body('item') item: Item): Promise<void> {
    this.itemsService.create(item);
  }

  @Put()
  async update(@Body('item') item: Item): Promise<void> {
    this.itemsService.update(item);
  }

  @Delete(':id')
  async delete(@Param('id') id: number): Promise<void> {
    this.itemsService.delete(id);
  }
}
```

Let's explore in detail what's happening within `ItemsController`.

All of your endpoints share the same resource path: `items/`. You pass the path _without_ the trailing forward slash to the `@Controller` decorator as argument.

You import the `Item` and `Items` classes to add typings to your controller handlers as needed.

To handle specific HTTP requests that use the controller's path, like `GET` or `POST`, you create class methods for each one of them. These methods are called _route handlers_ and use HTTP request method decorators, like `@Get` or `@Post`, that match the type of request they handle:

``` typescript  
  @Post()
  async create(@Body('item') item: Item): Promise<void> {
    this.itemsService.create(item);
  }
```

The function name of the route handler is not relevant to how your API is consumed by clients, but it helps you to easily identify the method for code maintenance and debugging. 

Notice that the `findAll` handler is an `async` function. Why's that?

``` typescript  
  @Get()
  async findAll(): Promise<Items> {
    return this.itemsService.findAll();
  }
```

As mentioned in the [_Asynchronicity_ document](https://docs.nestjs.com/controllers#asynchronicity), data extraction is mostly asynchronous. For this reason, NestJS supports modern `async` functions, which must return a `Promise`. As such, you can return deferred values that NestJS will be able to resolve by itself.

In order to keep `ItemsController` lightweight, you delegate the business logic of each endpoint to methods from `ItemsService`. To access this service within your controller class, you inject an instance of the `ItemsService` class into it through its class constructor. The service instance is marked `private readonly` to make this instance unchangeable and only visible inside the controller class.

``` typescript  
constructor(private readonly itemsService: ItemsService) { }
```

## Make API Requests

With the service and controller in place, you can start the API and make a request to `GET items/`:

``` bash  
# start the development server
npm run start:dev

# make a request to GET items/
curl http://localhost:7000/items/
```

If the app is working as expected, you get an object containing items data as response. The `curl` command works on both macOS and Linux terminal apps as well as on Windows PowerShell.

> Developing on Windows? Learn more about [Windows PowerShell Commands for Web Developers](https://auth0.com/blog/powershell-commands-for-web-developers/#Marking-Server-Requests).

When handling requests that have a payload, you need to extract the payload data from the `body` property of the `request` object that the route handler receives. With that goal in mind, you use the `@Body()` parameter decorator to pluck properties from the `body` property. `@Body()` receives the name of the property that you want to pluck as an argument; in this case, you want the `item` property:

``` typescript  
@Post()
create(@Body('item') item: Item) {
  this.itemsService.create(item);
}
```

The argument passed to the `@Controller()` decorator defines the route path prefix, which is a path shared by all the endpoints defined within the controller. You can then create different path branches by using _route parameters_, such as `:id`. This allows you to create two distinct `GET` endpoints within the same controller:

``` bash  
GET items/
GET items/:id
```

You then pass the route parameter, `:id`, as an argument to the HTTP request decorators `@Get()`, `@Put()`, and `@Delete()` to define dynamic paths. Consequently, this route parameter lets you update, delete, and retrieve a single record.

Using the `@Param()` decorator, you can pluck properties from the `params` property of the `request` object and access the value of `id`:

``` typescript  
@Get(':id')
async find(@Param('id') id: number): Promise<Item> {
  return this.itemsService.find(id);
}
```

> `@Params()` and `@Body()` are both decorators that extract data from the `request` object.

Test the `POST items/` endpoint by executing the following command:

``` bash  
curl -X POST -H 'Content-Type: application/json' -d '{
  "item": {
    "name": "Salad",
    "price": 4.99,
    "description": "Fresh",
    "image": "https://cdn.auth0.com/blog/whatabyte/salad-sm.png"
  }
}' http://localhost:7000/items -i
```

> The `-i` flag includes protocol headers in the output.

You should get `HTTP/1.1 201 Created` as response.

Verify that an item named "Salad" has been added to the store:

``` bash  
curl http://localhost:7000/items -i
```

## Enable Data Validation in NestJS

As explained before, using classes to create custom types is recommended since they are persisted as JavaScript entities after TypeScript transpilation. During development, TypeScript's type system will help you catch errors and debug your code. However, during production, your API will face unpredictable request payloads. You can mitigate this point of failure by validating the data it receives as payload.

To validate incoming requests, you can add validators to your `Item` class properties and execute them by using the built-in NestJS validation pipe.

As it is, the application won't return an error status if you `POST` invalid data. For example, the following request should return a [`400 Bad Request`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400) response status; but instead, it returns a [`201 Created`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/201) response status:

``` bash  
curl -X POST -H 'Content-Type: application/json' -d '{
  "item": {
    "name": 1.99,
    "price": "Salad",
    "description": "Fresh",
    "image": "https://cdn.auth0.com/blog/whatabyte/salad-sm.png"
  }
}' http://localhost:7000/items -i
```

_Output_:

``` bash  
HTTP/1.1 201 Created
X-Powered-By: Express
Date: Fri, 20 Sep 2019 23:48:46 GMT
Connection: keep-alive
Content-Length: 0
```

To solve this problem, you'll set up your app to automatically validate all incoming requests using the built-in `ValidatorPipe`. In NestJS, a pipe is a class used to transform input data to a desired output or to validate input data.

To enable auto-validation, install the following NPM packages that are leveraged by `ValidationPipe`:

``` bash  
npm install class-validator class-transformer
```

[`class-validator`](https://github.com/typestack/class-validator) makes validation easy by using TypeScript decorators. [`class-transformer`](https://github.com/typestack/class-transformer) offers proper decorator-based transformation, serialization, and deserialization of plain JavaScript objects to class constructors.

Once that's installed, update `src/main.ts` as follows:

``` typescript  
// src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as dotenv from 'dotenv';
import { ValidationPipe } from '@nestjs/common';

dotenv.config();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(process.env.PORT);
}
bootstrap();
```

Next, you need to add validation decorators to your `Item` class. Update `src/item.ts` like so:

``` typescript  
// src/item.ts

import { IsString, IsNumber, IsOptional } from 'class-validator';

export class Item {
  @IsNumber() @IsOptional() readonly id: number;
  @IsString() readonly name: string;
  @IsNumber() readonly price: number;
  @IsString() readonly description: string;
  @IsString() readonly image: string;
}
```

In essence, since you expect the payload to your endpoints to have the same structure of an `Item` object, the `Item` class is doubling as a type class and [a data transfer object (DTO) class](https://en.wikipedia.org/wiki/Data_transfer_object). As requirements change, you may need to create a separate class to define a data transfer object for a payload that includes more data than what the `Item` class provides. Increasing the data present in the payload is done to reduce the number of method calls needed for your application to fulfill a request.

The `id` property is marked as optional since the `POST items/` endpoint doesn't require an `id` as a route parameter or a payload property. Remember that the `id` of a new `Item` is created automatically by the `create` method of `ItemsService`.

Using this pipe, if the data is invalid, you throw an exception and return an error message to the client.

To test this, issue the following invalid `POST` request:

``` bash  
curl -X POST -H 'Content-Type: application/json' -d '{
  "item": {
    "name": 1.99,
    "price": "Salad",
    "description": "Fresh",
    "image": "https://cdn.auth0.com/blog/whatabyte/salad-sm.png"
  }
}' http://localhost:7000/items -i
```

This time, you do get a `400 Bad Request` response. The `message` property of the response object also reveals the payload type errors:

``` json  
{
  "statusCode": 400,
  "error": "Bad Request",
  "message": [
    {
      "target": {},
      "property": "name",
      "children": [],
      "constraints": {
        "isString": "name must be a string"
      }
    },
    {
      "target": {},
      "property": "price",
      "children": [],
      "constraints": {
        "isNumber": "price must be a number"
      }
    }
  ]
}
```

You can disable detailed validation error messages by passing an options object to the constructor of the `ValidationPipe` pipe if you need to:

``` typescript  
// Extract from src/main.ts

app.useGlobalPipes(
  new ValidationPipe({
    disableErrorMessages: true,
  }),
);
```

With error messages disabled, the response to an invalid payload looks like this:

``` bash  
{"statusCode":400,"error":"Bad Request"}
```

<include src="tutorial/NextButton" nextPart="developing-a-secure-api-with-nestjs-adding-authorization/" completedMessage="I've created endpoints with validation for my NestJS app"/>

<include src="tutorial/IssueButton" communityTopic="developing-a-secure-api-with-nestjs/33026"/>


Developing a Secure API with NestJS: Creating Endpoints



<details>
<summary>Are you starting from this chapter?</summary>

Clone the application repo and check out the `getting-started` branch:

``` bash  
git clone git@github.com:auth0-blog/wab-menu-api-nestjs.git \
nest-restaurant-api \
--branch getting-started
```

Make the project folder your current directory:

``` bash  
cd nest-restaurant-api
```

Then, install the project dependencies:

``` bash  
npm i
```

Finally, create a `.env` hidden file:

``` bash  
touch .env
```

Populate `.env` with this:

``` bash  
PORT=7000
```

</details>

## Organize NestJS Apps Using Modules

A project of large size is easier to maintain and grow when its architecture is predictable and well-organized instead of being a spaghetti-like mess. NestJS uses modules to help you organize your application logically and to establish clear feature boundaries.

![NestJS takes you from messy code to organized code](https://images.ctfassets.net/23aumh6u8s0i/7fZuSQuPAWZY5gt3hjFMMQ/7ca680157e8314b68a423751c8ae4b22/nest-js-modules)

Each application has at least one module, the **root module**, and any number of **feature modules** that encapsulate components related to a specific application feature. NestJS uses the root module as a data structure to track and resolve the relationships between all your application components. 

This application needs **three modules**: the **root module**, `AppModule`, and **two feature modules**: `ItemsModule` to encapsulate logic related to the `items` resource and `AuthModule` to handle anything related to API authorization.

Start by creating an `ItemsModule` using the NestJS CLI, which was installed as one of your `devDependencies` when you scaffolded your NestJS project:  

``` bash  
nest generate module items
```

Under the `src` directory, the CLI creates a new `items` directory to host your module files, which includes `items.module.ts` to define the `ItemsModule`. As you can see, a module is a class annotated with a `@Module()` decorator, which provides metadata that NestJS uses to organize the application structure.

Additionally, as you create new feature elements (such as classes, controllers, and services), the NestJS CLI updates the dependencies of your modules automatically. Open `src/app.module.ts` and notice how `AppModule` lists `ItemsModule` as an element of its `imports` array:

``` typescript  
// src/app.module.ts

import { Module } from '@nestjs/common';
import { ItemsModule } from './items/items.module';

@Module({
  imports: [ItemsModule],
  controllers: [],
  providers: [],
})
export class AppModule {}
```

<include src="TweetQuote" quoteText="As an architecture framework, NestJS takes the guesswork out of project structure and lets you focus on what matters the most: building robust applications"/>

## Create Data Models with TypeScript

Before creating any controllers and services, define the structure of the data you want to manage. A menu item has the following properties:

- `id`: (number) Unique identifier for the item record
- `name`: (string) Name of the item
- `price`: (number) Price of the item in dollars
- `description`: (string) Description of the item
- `image`: (string) URL pointing to the item's image

![WHATBYTE Dashboard full menu item](https://images.ctfassets.net/23aumh6u8s0i/wkMDo6PoCvR0u3QPD22BX/88843cd23660418920811bfdfc0aa08c/whatbyte-dashboard-full-menu-item)

With TypeScript, you can use either classes or interfaces to define and enforce the structure of objects during development. NestJS recommends using classes as these are preserved as real entities in the compiled JavaScript. Classes can also use decorators on its member variables to enhance them, which is quite helpful for data validation.

Using the CLI generate an `Item` class:

``` bash  
nest generate class item --no-spec
```

NestJS creates an `item.ts` file under the `src` directory for you. Open this file and populate it like so:

``` typescript  
// src/item.ts

export class Item {
  readonly id: number;
  readonly name: string;
  readonly price: number;
  readonly description: string;
  readonly image: string;
}
```

It would be best to put these objects of type `Item` in a key-value store with the `id` property serving as the key and the `Item` object as the value.

Using the CLI generate an `Items` class:

``` bash  
nest generate class items --no-spec
```

Update the newly created `src/items.ts` file as follows:

``` typescript  
// src/items.ts

import { Item } from './item';

export class Items {
    [key: number]: Item;
}
```

As you'll use these class definitions to type the methods of controllers and services that you'll create in the next sections, it's fine for these files to live under the `src` directory.

## Create a NestJS Service

Initially, you'll use an in-memory store to hold application data. Eventually, you'd want to persist those records in a [MongoDB](https://auth0.com/blog/auth0-tutorials-using-mongodb-atlas-as-a-custom-database/) or [PostgreSQL](https://auth0.com/blog/how-we-store-data-in-the-cloud-at-auth0/#PostgreSQL) store &mdash; or any other database. To migrate stores easily, you can use a pattern common to MVC architectures: lightweight controllers that delegate business logic to services. 

As such, you'll create a service to encapsulate all the business logic related to read and write operations on the menu items store. In turn, this service will expose an interface for your controllers to perform these data operations. You'll end up with a modular and reusable service that you can eventually modify to use different stores without changing the code of any of its consumers.

Use the NestJS CLI to create an `ItemsService` as follows:

``` bash  
nest generate service items --no-spec
```

> The `--no-spec` flag prevents the generation of files related to testing.

NestJS creates `items.service.ts` under the `src/items` directory. The newly defined `ItemsService` is also automatically registered as a provider of `ItemsModule`.

``` typescript  
// src/items/items.module.ts

import { Module } from '@nestjs/common';
import { ItemsService } from './items.service';

@Module({
  providers: [ItemsService],
})
export class ItemsModule {}
```

`ItemsService` will define an object to hold your store records along with methods to perform data operations on the store.

Update `src/items/items.service.ts` with the following code:

``` typescript  
// src/items/items.service.ts

import { Injectable } from '@nestjs/common';
import { Item } from '../item';
import { Items } from '../items';

@Injectable()
export class ItemsService {
  private readonly items: Items = {
    1: {
      id: 1,
      name: 'Burger',
      price: 5.99,
      description: 'Tasty',
      image: 'https://cdn.auth0.com/blog/whatabyte/burger-sm.png',
    },
    2: {
      id: 2,
      name: 'Pizza',
      price: 2.99,
      description: 'Cheesy',
      image: 'https://cdn.auth0.com/blog/whatabyte/pizza-sm.png',
    },
    3: {
      id: 3,
      name: 'Tea',
      price: 1.99,
      description: 'Informative',
      image: 'https://cdn.auth0.com/blog/whatabyte/tea-sm.png',
    },
  };

  findAll(): Items {
    return this.items;
  }

  create(newItem: Item): void {
    const id = new Date().valueOf();
    this.items[id] = {
      ...newItem,
      id,
    };
  }

  find(id: number): Item {
    const record: Item = this.items[id];

    if (record) {
      return record;
    }

    throw new Error('No record found');
  }

  update(updatedItem: Item): void {
    if (this.items[updatedItem.id]) {
      this.items[updatedItem.id] = updatedItem;
      return;
    }

    throw new Error('No record found to update');
  }

  delete(id: number):void {
    const record: Item = this.items[id];

    if (record) {
      delete this.items[id];
      return;
    }

    throw new Error('No record found to delete');
  }
}
```

Notice that the `create` method creates a unique `id` property automatically for you  when a new `Item` object is created using the [JavaScript Date API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date):

``` typescript  
const id = new Date().valueOf();
```

This `id` value is based on the number of milliseconds between `1 January 1970 00:00:00 UTC` and the current time.

<include src="tutorial/NextButton" nextPart="developing-a-secure-api-with-nestjs-creating-endpoints/" completedMessage="I've created my NestJS data models and a data service"/>

<include src="tutorial/IssueButton" communityTopic="developing-a-secure-api-with-nestjs/33026"/>


Developing a Secure API with NestJS: Creating Data Models and Services

Developing a Secure API with NestJS: Managing Roles

Developing a Secure API with NestJS: Managing Identity



<div class="alert alert-info alert-icon">
<i class="icon-budicon-500"></i>
<strong>
We tested this tutorial using NestJS <code>v7.0.0</code>, Node.js <code>v10.16.3</code>, and npm <code>v6.9.0</code>.
</strong>
</div>

NestJS is known as an architecture framework for Node.js, but what is an "architecture framework"?  Is this yet another buzzword? Nope! It's legit.

NestJS may feel like the [Laravel](https://auth0.com/blog/build-a-laravel-6-app-with-authentication/) or [Rails](https://auth0.com/blog/ruby-on-rails-killer-workflow-with-docker-part-1/) of the Node.js world as it favors convention over configuration. It offers you _opinionated_ guidelines and code conventions. So, instead of worrying about naming or organizing files and folders, you can focus on building features for your product.

On its mission to remove the guesswork out of API development, NestJS offers first-class support for [TypeScript](https://auth0.com/blog/typescript-practical-introduction/) to add static type-checking to your projects. Your API code becomes self-documented: you'll know if a method expects a `string`, a ` number`, a `Cat`, or a [`TwitterHotTake`](https://twitter.com/auth0/status/1123248195369353218).

Today, you'll learn how to build a secure API with [NestJS](https://docs.nestjs.com/) and create your _own opinion_ on the framework.

## What You Will Build

Your goal is to create and secure a feature-complete API, which lets clients perform data operations on a mock restaurant menu. To test, consume, and even try to hack your API, you'll use a demo client called ["WHATABYTE Dashboard"](https://dashboard-v1.whatabyte.app/).

![WHATBYTE Dashboard](https://images.ctfassets.net/23aumh6u8s0i/4lvQzkec18pvBbWjwGP87q/f4ce15742f30695af44a1811c7a4ec7d/whatabyte-dashboard)

![WHATBYTE Dashboard menu item](https://images.ctfassets.net/23aumh6u8s0i/8x6EQECtV02vPAebNC1XQ/645f7768ccb740dab396d77775f84038/whatabyte-dashboard-menu-item)

> This dashboard is inspired by the [sleek web player from Spotify](https://open.spotify.com/search).

We tested this tutorial using Node.js `v10.16.3` and NPM `v6.9.0`. If you need to install any of them, follow the [instructions provided by the Node.js Foundation for your operating system](https://nodejs.org/en/download/).

For **simplicity**, you'll store data in-memory and not in an external database.

For **security**, you'll limit API access by following these business rules:

- Anyone can read data.

- Only users with a `menu-admin` role are authorized to write data: create, update, or delete menu items.

## Get Started with NestJS

NestJS offers a powerful CLI tool to build your application. To generate a new project, use `npx` to run the NestJS CLI without installing it globally in your system:

``` bash  
npx @nestjs/cli new nest-restaurant-api
```

> The `npx` command is available with `npm v5.2.0` and higher.

The CLI asks you to choose a package manager, `npm` or `yarn`, and proceeds to install project dependencies using your selection. To follow this tutorial, choose `npm`.

![Using the NestJS CLI to scaffold a new project](https://images.ctfassets.net/23aumh6u8s0i/gT39eDyAeWwkFqmoO3IA7/b9821bf48f0b066b2b161b40e3fef23b/using-the-nestjs-cli-to-scaffold-a-new-project)

Once the installation is complete, you get a directory called `nest-restaurant-api`. Navigate to this directory:

``` bash  
# move into the project directory
cd nest-restaurant-api
```

## Clean Up the NestJS Starter

For simplicity, you won't be writing any tests in this tutorial. However, it would be best if you wrote robust tests for any production-ready application. As such, delete the `test` directory and the `src/app.controller.spec.ts` file from your project:

``` bash  
rm -rf test/
rm src/app.controller.spec.ts
```

> Refer to the [NestJS Testing documentation](https://docs.nestjs.com/fundamentals/testing) for details on how to perform automated tests.

After that, delete the files defining `AppController` and `AppService`:

``` bash  
rm src/app.controller.ts src/app.service.ts
```

Deleting these files breaks `AppModule` as it depends on `AppController` and `AppService`. To fix that, open the project in your preferred IDE and update `src/app.module.ts` as follows:

``` typescript  
// src/app.module.ts

import { Module } from '@nestjs/common';

@Module({
  imports: [],
  controllers: [],
  providers: [],
})
export class AppModule {}
```

## Use Environmental Variables

`src/main.ts` is the entry point of your application. However, this file uses a hard-coded port number to listen for incoming requests, `3000`, making your application less adaptable to different development and production environments.

To fix that, you can store environmental variables locally in a `.env` file and use a package like [`dotenv`](https://www.npmjs.com/package/dotenv) to load them into the global variable `process.env`.

To start, install `dotenv` in your project:

``` bash  
npm i dotenv
```

Then, create this hidden file under the root project directory:

``` bash  
touch .env
```

Open `.env` and populate it with the following data:

``` bash  
PORT=7000
``` 

To attach data from `.env` into `process.env`,  you need to call the `dotenv.config()` method at the top of each module that needs that data. As such, update `src/main.ts` to replace the hard-coded port number with `process.env.PORT` as follows:

``` typescript  
// src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as dotenv from 'dotenv';

dotenv.config();

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT);
}
bootstrap();
```

Now when your application runs, it listens for requests on whatever the value of `process.env.PORT` may be &mdash; `7000` in this case.

> ⚠️ Caution: `.env` may eventually contain sensitive information, such as API keys or secrets. Add it to `.gitignore` before committing code to version control.

<include src="tutorial/NextButton" nextPart="developing-a-secure-api-with-nestjs-models-data-service/" completedMessage="I am ready to start building my NestJS app"/>

<include src="tutorial/IssueButton" communityTopic="developing-a-secure-api-with-nestjs/33026"/>

<include src="TweetQuote" quoteText="@nestframework is an architecture framework for @nodejs. Learn how to create scalable and maintainable server-side apps with it."/>


Developing a Secure API with NestJS: Getting Started

Learn about the new features and products in the recent Laravel 6.0 release.

What's New in Laravel 6.0?

30b8d1b7c0dab4bb311c121a47a6aae9?s=80 avatar

30b8d1b7c0dab4bb311c121a47a6aae9?s=80

Guest Author

Vladimir Fomene

Learn how to build modern web apps using Vue.js for the frontend and a Spring Boot, Kotlin, GraphQL API for the backend.

Vue.js, Spring Boot, Kotlin, and GraphQL: Building Modern Apps - Part 2

Vue.js, Spring Boot, Kotlin, and GraphQL: Building Modern Apps - Part 1

hasura:praveen

Praveen Durairaj

Learn how to build a working real-time backend for a to-do app using Hasura and GraphQL

Build a Collaborative Realtime Todo App Backend Using Hasura GraphQL

ana-ribeiro

Ana Ribeiro

This series shows how to create a simple, full-stack web application with Angular, TypeScript, and Nest.js. Part 1: Developing the backend API with Nest.js.

Full-Stack TypeScript Apps - Part 1: Developing Backend APIs with Nest.js

Learn how to use Express Validator, a set of middleware functions, to perform server-side validation on user data.



**TL;DR:** In this article you will learn to validate and sanitize data in your Express.js
applications using a set of middleware called [`express-validator`](https://express-validator.github.io/docs/). You will do so by completing a demo application that takes in user input and validates/sanitizes it using
this library. If you want to see the complete application developed throughout this article, take a look at [this GitHub repository](https://github.com/auth0-blog/expressjs-validator).

## Prerequisites

Software you need to install to follow this tutorial:

* [Node.js and NPM (Node Package Manager)](https://nodejs.org/en/download/). While writing this article, the author used Node.js `v8.13.0`.
* Any text editor or IDE of your choice ([VS Code](https://code.visualstudio.com/), [WebStorm](https://www.jetbrains.com/webstorm/download/), [Atom](https://atom.io/), [Sublime](https://www.sublimetext.com/), etc.).

## What Is Express Validator?

According to the [official website](https://express-validator.github.io/docs/), Express Validator is a set of [Express.js middleware](http://expressjs.com/en/guide/using-middleware.html) that wraps [`validator.js`](https://github.com/chriso/validator.js), a library that provides validator and sanitizer functions. Simply said, Express Validator is an Express middleware library that you can incorporate in your apps for server-side data validation.

### Why Server-Side Validation?

Mainly speaking, you _must_ care about server-side validation because data coming from other clients (single-page apps, regular web apps, mobile applications, etc.) cannot be trusted. For example, your servers have no means to know if a malicious user (or virus) disabled front-end validation (e.g., JavaScript) to allow the app to submit bogus data to your server. That is, client-side validation is _not enough_.

## Set Up Your Playground For Express Validator

To start playing with Express Validator, you will clone a simple Express server to use as a playground. To do so, open your terminal in a preferred directory and clone the starter project with the following command:

```bash
# clone repository
git clone https://github.com/auth0-blog/expressjs-validator.git

# move into your clone repository
cd expressjs-validator
```

Then, install all the project dependencies by running the following command in the project root:

```bash
npm install
```

This simple Express application contains just enough for you to get started and focus on learning about the `express-validator` library. For example, if you check the `views/layout.pug` file, you will see that it contains some basic HTML elements to define how the app should look like.

> **Note:** If you are not familiar with [Pug, the template engine](https://pugjs.org/api/getting-started.html), you might find the syntax of this file a bit different. Don't worry, you don't need to be acquainted with Pug to follow this article along. Also, if you take a close look to the source code, you will probably understand what is going on. For example, you will see a line starting with `link` that contains the `href` keyword pointing to a [BootStrap](https://getbootstrap.com/) file. This is just the code telling the browser to import an external CSS file, quite similar to what you would do in HTML.

Besides the `views/layout.pug` file, these are other important files that you must know about:

- `./routes/index.js`: This file is responsible for rendering the homepage of your app. The `res.render('index')` line will make Express and Pug work together to render the `views/index.pug` file.
- `./routes/users.js`: For now, this file adds an endpoint to your app that doesn't do anything. Soon, you will start using this file to learn about the `express-validator` library.
- `./public/javascripts/script.js`: This is the file that will be in charge of sending user data to your backend. The requests will be some AJAX calls to the endpoint defined on the `routes/users.js` file.
- `./app.js`: This is the file responsible for bootstrapping the backend. This file sets up Pug as the template engine and tells Express.js where to find the other JavaScript files.

With that, you now know how the app is structured, but don't run the project yet! You still need to define the home page of your app.

## Build Homepage For User Input

After learning about the structure of the playground, you will need to add the following code to the `views/index.pug` file:

```pugjs
extends layout

block content
  .container
    .alert(class="alert-danger", role="alert", id="error-group", style="display: none")
      ul(id="errors")
    .row
      .col-sm.col-md-8.offset-md-2.col-lg-6.offset-lg-3
        h3 Welcome To Express Validator!
        form
          .form-group
            input.form-control(type="text", id="name", placeholder="Name")
          .form-group
            input.form-control(type="text", id="classYear", placeholder="Class Year")
          .form-group
            input.form-control(type="text", id="weekday", placeholder="Available Weekday")
          .form-group
            input.form-control(type="email", id="email", placeholder="Email")
          .form-group
            input.form-control(type="password", id="password", placeholder="Password")
          .form-group
            input.form-control(type="password", id="confirmPassword", placeholder="Confirm Password")
          .form-group
            button.form-control(type="button", class="btn btn-primary", id="signup-btn") Submit
```

What you are doing here is to add a bunch of `input` elements to the homepage that will receive user input to be sent to the backend. With that covered, you have everything in place to have a sneak peek at the app. Go to the project root directory
and run the following command to get the app started.

```bash
node app.js
```

Now, if you visit [`http://localhost:3000/`](http://localhost:3000/) in your favorite browser, you should see the following page:

![Express Validator Tutorial: Scaffolding the sample app.](https://images.ctfassets.net/23aumh6u8s0i/4HKvT3HZ3MqdXsTZMKUaqQ/5e1105b1c1c24aad89af2bee6938c70e/app-screenshot)

> **Note:** You can stop the server now, but whenever you add a new feature/functionality, you will need to restart the server if it is already running or just start it.

Once the user enters data on your homepage and clicks the **Submit** button, you will need to handle the on submit event and make an AJAX request to your Express back-end. To do that, add the following code to your `./public/javascripts/script.js` file:

```js
$('#signup-btn').click(function () {
  $.ajax({
    url: '/users',
    type: 'POST',
    cache: false,
    data: {
      name: $('#name').val(),
      classYear: $('#classYear').val(),
      weekday: $('#weekday').val(),
      email: $('#email').val(),
      phoneNumber: $('#phoneNumber').val(),
      password: $('#password').val(),
      confirmPassword: $('#confirmPassword').val()
    },
    success: function () {
      $('#error-group').css('display', 'none');
      alert('Your submission was successful');
    },
    error: function (data) {
      $('#error-group').css('display', 'block');
      var errors = JSON.parse(data.responseText);
      var errorsContainer = $('#errors');
      errorsContainer.innerHTML = '';
      var errorsList = '';

      for (var i = 0; i < errors.length; i++) {
        errorsList += '<li>' + errors[i].msg + '</li>';
      }
      errorsContainer.html(errorsList);
    }
  });
});
```

From the code above, on form submission, a POST request is made to the `http://localhost:3000/users` endpoint with the data entered by users on the HTML fields defined before. If there is an error during validation, this code will make sure to display the error messages inside a `div` marked with the `alert` class. If no errors are found, a successful validation will trigger an alert with this message: "Your submission was successful".

## Server-Side Validation With Express Validator

Now that you have your front-end set up, you will start learning about `express-validator`. To do that, the first thing you will need to do is to install the library:

```bash
npm install express-validator --save
```

After installing `express-validator`, open the `routes/users.js` file and import the [check API](https://express-validator.github.io/docs/check-api.html) to use its validation functions:

```js
// ... call to require('express') ...
const {check, validationResult} = require('express-validator/check');

// ... leave the rest untouched ...
```

### Making sure fields are not empty

Now, to validate your form input, you need to pass an array in which you specify the fields that you want to validate as a second argument to your route handler for `/users` POST requests. To do that, add the following code after the GET route handling code in `routes/user.js`:

```js
// ... require statements ...

// ... router.get ...

router.post('/', [
    check('name').not().isEmpty().withMessage('Name must have more than 5 characters'),
    check('classYear', 'Class Year should be a number').not().isEmpty(),
    check('weekday', 'Choose a weekday').optional(),
    check('email', 'Your email is not valid').not().isEmpty(),
    check('password', 'Your password must be at least 5 characters').not().isEmpty(),
  ],
  function (req, res) {
    const errors = validationResult(req);
    console.log(req.body);

    if (!errors.isEmpty()) {
      return res.status(422).jsonp(errors.array());
    } else {
      res.send({});
    }
  });

module.exports = router;
```

The string passed as an argument to the `check` function specifies which data field you want to validate (e.g., `classYear`). The `not().isEmpty()` function chain makes the library validate that this field is not empty. The string argument added to `withMessage()` specifies a custom error message which will be send back to your users if this particular field violates a validation requirement.

> **Note:** You can also provide a custom error message by passing it as a second argument to the `check()` function.

By calling the `optional()` function on it, you have made the `weekday` field optional. So far, you have only specified how you want your fields to be validated. You might be wondering where Express.js actually does the validation. Validation happens in the request handler when it calls the `validationResult()` function. To test this, run your application and submit an empty form to the server and you should see the following error displayed in red.

![Express validator showing error messages.](https://images.ctfassets.net/23aumh6u8s0i/55oL7TnIWUeSSUPWph5aal/fc62311dd2d57123edf25666b015efc5/error-messages)

Remark how there is no error for the **weekday** field, this is because you made the field optional during validation. Pretty cool, huh?

### Validating fields' length

You can also check if a data field meets a certain character length requirement by using the `isLength()` function. This function takes in an object in which you specify the minimum and/or the maximum number of characters in that field. To see this in action, update the validation requirements for the name and password field as follows:

```js
[
  // ... leave other validations untouched ...
  check('name').not().isEmpty().isLength({min: 5}).withMessage('Name must have more than 5 characters'),
  check('password', 'Your password must be at least 5 characters').not().isEmpty().isLength({min: 5}),
]
```

Now, restart the app and try to enter a name and password less than five characters long. You should see the app complaining about the field length.

### Validating fields' type

Apart from validating the character length of a field, you can also validate its type or validate it against a list. For example, you can specify that your `classYear` field needs to be an integer. You can also specify that weekday should not be Saturday or Sunday. To do that, update your validation requirements as follows:

```js
[
  // ... leave other validations untouched ...
  check('classYear', 'Class Year should be a number').not().isEmpty().isInt(),
  check('weekday', 'Choose a weekday').optional().not().isIn(['Sunday', 'Saturday']),
]
```

Now, after restarting the app, if you try to enter a value which is not an integer in the class year field, you will see an error message. Also, if you enter "Saturday" or "Sunday" in the weekday field, you will see the backend complaining.

### Validating and sanitizing emails

Express Validator also validates emails with the `isEmail()` function. Besides that, you can also make this library normalize emails with the `normalizeEmail()` function. In case you are wondering what it means to normalize an email, you can read about it in this [Stack Overflow post](https://stackoverflow.com/questions/27936705/what-does-it-mean-to-normalize-an-email-address).

In order to validate the email field, refactor the `check('email'` call in your code:

```js
[
  // ... leave other validations untouched ...
  check('email', 'Your email is not valid').not().isEmpty().isEmail().normalizeEmail(),
]
```

Then, after restarting the app, if you enter an invalid email on your homepage you will get an error message:

![Validating email addresses with Express Validator](https://images.ctfassets.net/23aumh6u8s0i/26cwBYI8B4AvRLMizfbUcV/57d5b927eb05c0ab024257c38a9607e9/email-error-messages)

### Sanitizing fields with trim and escape

With Express Validator, you can also trim away spaces from your data and escape special characters using the `trim()` and `escape()` functions. The `escape()` function can really come in handy when protecting yourself from cross-site scripting attacks. To add this feature to your app, refactor the call to `check('name')` as follows:

```js
[
  // ... leave other validations untouched ...

  check('name').exists().isLength({min: 5}).trim().escape().withMessage('Name must have more than 5 characters'),
]
```

To test this, the starter project came with code that prints every request body to the console after validation. So, imagine a malicious user types the following JavaScript code in your name field: `<script> alert("hello, there");</script>`. By using `escape` you will have no problem, as the name that you will get in your backend will look like:

```text
&lt;script&gt; alert(&quot;hello, there&quot;);&lt;&#x2F;script&gt;
```

That is, Express Validator transformed the malicious code into special HTML characters. Amazing, right?

### Validating with custom validators

Although Express Validator offers a bunch of solutions out of the box for you, chances are you will need to implement some custom validation. For example, imagine you need to make sure that the `password` field matches the `confirmPassword` field. To do that, you can use the `custom()` validation function as follows:

```js
[
  // ... leave other validations untouched ...

  check('confirmPassword', 'Passwords do not match').custom((value, {req}) => (value === req.body.password)),
]
```

The `custom` function takes in a function (an arrow function in this case) as an argument and checks if the `value` of the `confirmPassword` is the same as the value of the `req.body.password` field. To see this in action, restart your app, then enter a different password and you should get the message saying that "passwords do not match".

## Conclusion

In this article, you learned how to use the Express Validator middleware to validate and sanitize user data in an Express application. Guess what? You only scratched the surface of what is possible with Express Validator. Aside from learning more validation and sanitization functions, you can learn how to add wildcards to your validations, do schema validation and whole body validation from [Express Validator's documentation](https://express-validator.github.io/docs/). I will love to see what you build with Express Validator.

<include src="asides/AboutAuth0" />


Express Validator Tutorial

Learn how to develop REST APIs with ease by using Spring Boot and Spring Data REST.

Spring Data REST Tutorial: Developing RESTful APIs with Ease

h7iLydPO

Mark Wheeler

Learn how to develop modern backend APIs with Hapi.js, Node.js, and Redis.

Developing Modern APIs with Hapi.js, Node.js, and Redis

biodun-chris

Experienced Founder with a demonstrated history of working in the information technology and services industry. Skilled in Python, iOS Development, Bootstrap, Java, and Node.js. Strong entrepreneurship professional with a Bachelor of Science focused in Computer Science from University of Ibadan, Oyo State.

Software Engineer, Murcul

Biodun Chris

In this article, you will learn how to create well-organized APIs with Node.js, Restify, Joi, and MongoDB.

Developing Well-Organized APIs with Node.js, Joi, and Mongo

Learn how TypeScript 3.0, a typed superset of JavaScript, improves tuples type and introduces a new 'unknown' top type!

TypeScript 3.0: Exploring Tuples and the Unknown Type

In this Redis tutorial, learn how to install and setup Redis as well as commands to write, read, update, and delete data from the store using its core data structures.

Introduction to Redis: Installation, CLI Commands, and Data Types

This series shows how to create a simple, full-stack web application with Angular, TypeScript, and Nest.js. Part 2: Developing frontend Angular apps.

Full-Stack TypeScript Apps - Part 2: Developing Frontend Angular Apps

Node.js 10 comes packed with significant performance improvements through V8 v6.6 and new experimental features such the fs promise API and time traveling.



Time flies when you are having fun! It has been over seven years since Node.js v0.10.x was released and now we are welcoming the seventh major release since the formation of the Node.js Foundation: Node.js v10.0.0! Our peppy non-blocking I/O friend has changed so much since then. Let's review what new, what has changed and what has been deprecated in this new release!

## Support for Modern Cryptography

Node.js 10 gets an upgrade to OpenSSL v1.1.0. In addition, cryptographic support now includes the ChaCha20 cipher and the Poly1305 authenticator. According to [IETF](https://tools.ietf.org/html/rfc7539) documentation, ChaCha20 is a high-speed cipher (much faster than AES in software only-implementations) that is not sensitive to [timing attacks](https://en.wikipedia.org/wiki/Timing_attack). The same organization defines Poly1305 as a high-speed message authentication code with a straight-forward and easy implementation. In 2014, [Google deployed a new cipher suite](https://security.googleblog.com/2014/04/speeding-up-and-strengthening-https.html) in Chrome that runs three times faster than AES-GCM on most Android devices leading to an improvement in battery life and encryption performance. This TLS cipher suite implements ChaCha 20 for symmetric encryption and Poly1305 for authentication.

The future release of OpenSSL 1.1.1 includes support for [TLS 1.3](https://en.wikipedia.org/wiki/Transport_Layer_Security#TLS_1.3) which now includes the ChaCha20 stream cipher with the Poly1305 message authentication code to make the web much more secure. With the addition of OpenSSL 1.1.0, Chacha20 and Poly1305 makes it easy to bring TLS 1.3 support to Node.js before it reaches Long Term Support (LTS) in October 2018 bringing cutting-edge cryptography to the ecosystem.

## Experimental Promisified `fs` Functions

The experimental [`fs/promises`](https://nodejs.org/api/fs.html#fs_fs_promises_api) API gives us a set of alternative asynchronous file system methods that return a `Promise` object instead of using callbacks. We can access this API through `require('fs/promises')`.

Let's explore an example of the `fs` Promises API. To do so, we need to have Node v10.0.0 installed. I recommend that you install the current version through a Node Version Manager such as [nvm](https://github.com/creationix/nvm) so that you can switch between versions as you need to.

With Node v10.0.0 installed and selected, create a NodeJS project anywhere you'd like by using `npm init`.

On the project directory, create the following files:

- `temp.txt`: a file that we are going to read.
- `app.js`: the Node application that we are going to use for demonstration. The application reads a file and truncates its content to the first 4 characters.

Open `temp.txt` and type "Node.js" inside and save it.

Then, open `app.js` and include the following headings:

```javascript
// app.js

const fs = require("fs");
const fsPromises = require("fs/promises");
```

`fs` is the usual module we are used to working with. `fs/promises` brings the new API into our application.

Next, let's read `temp.txt` and print its current content in the console:

```javascript
const fs = require("fs");
const fsPromises = require("fs/promises");

console.log(fs.readFileSync("temp.txt", "utf8"));
// Prints: Node.js
```

Now, we are going to create a function called `doTruncate` that asynchronously opens the file using `open()` and truncates the content of the file using `ftruncate`, both methods of the `fs/promises` library. We are going to manage the promises through the [`async/await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) pattern and print the resulting truncation to the console:

```javascript
const fs = require("fs");
const fsPromises = require("fs/promises");

console.log(fs.readFileSync("temp.txt", "utf8"));
// Prints: Node.js

async function doTruncate() {
  const fd = await fsPromises.open("temp.txt", "r+");
  await fsPromises.ftruncate(fd, 4);
  console.log(fs.readFileSync("temp.txt", "utf8"));
  // Prints: Node
}

doTruncate().catch(console.error);
```

The absence of callbacks makes the code clean, elegant and readable. In just three lines of code, we are able to execute all the logic of `doTruncate` as if it was synchronous. If any error is thrown, we catch it by chaining a `catch` to `doTruncate`. No need to use a `try/catch` block within the function.

## New JavaScript Language Features

These are the highlights of the [features included in the V8 v6.6 release](https://v8project.blogspot.com/) that ships with Node v10.0.0:

- `Function.prototype.toString()`

This method now returns exact slices of source text which include whitespace and comments.

```javascript
function /* This is a comment */ f() {
  const num = 10;
  console.log(num);
}

console.log(f.toString());
```

The console output now includes the comment between `function` and `f` as well as the whitespace after `f`:

```text
function /* This is a comment */ f   () {
    const num = 10;
    console.log(num);
}
```

In previous versions of Node.js, the output would have been:

```text
function f() {
    const num = 10;
    console.log(num);
}
```

- The `catch` clause of `try` statements no longer requires a parameter. Here's an example from the release notes:

```javascript
try {
  doSomethingThatMightThrow();
} catch {
  handleException();
}
```

- Non-standard methods `trimLeft()` and `trimRight()` becomes aliases for the newly implemented `String.prototype.trimStart()` and `String.prototype.trimEnd()` to ensure backward compatibility:

```javascript
const string = "  Node rocks!  ";

console.log(string.trimStart());
console.log(string.trimEnd());
console.log(string.trim());
```

Output:

```text
Node rocks!
  Node rocks!
Node rocks!
```

Read more details on the changes in the JavaScript languages features in the [V8 project blog](http://v8project.blogspot.com/2018/03/v8-release-66.html).

## Performance Improvements

- Promises and async functions get a performance boost. The V8 Engineering team has been able to close the gap between async functions and raw promise chains.

![Promise performance improvements](https://images.ctfassets.net/23aumh6u8s0i/6n9BeaJqRBkRWyDeSt00Qw/12e9c56dd7ce2eb562f79f9313b9ec5a/promise)

[Source: V8 Project Blog](https://v8project.blogspot.com/2018/03/v8-release-66.html)

- The performance of async generators along with async iterations was largely improved.

![Async generators performance improvements](https://images.ctfassets.net/23aumh6u8s0i/1SwX4tZkiLCNByRHPld3iT/2c3701154eeb24cad7f6412d5b7ad74c/async-generator)

[Source: V8 Project Blog](https://v8project.blogspot.com/2018/03/v8-release-66.html)

- For [holey double arrays](https://v8project.blogspot.com/2017/09/elements-kinds-in-v8.html), the throughput performance of `Array#reduce` increased by more than 10x.

![Array#reduce performance improvements](https://images.ctfassets.net/23aumh6u8s0i/6Xja1NjALXX8Xzxj8DtmiM/81ac801942fd5840290aab003ae016af/array-reduce)

[Source: V8 Project Blog](https://v8project.blogspot.com/2018/03/v8-release-66.html)

Read more details on the performance improvements present in V8 v6.6 in the [V8 project blog](http://v8project.blogspot.com/2018/03/v8-release-66.html).

## Better Error Handling

As [Michael Dawson](https://twitter.com/mhdawson1) explains, until recently, [Node.js only had messages associated with `Errors` thrown](https://medium.com/the-node-js-collection/node-js-errors-changes-you-need-to-know-about-dc8c82417f65). This made error management challenging and, ironically, error-prone since you needed to compare the error message string to a known value to determine what kind of error was thrown and what action your code should take. This has made it difficult to maintain error management in the codebase since any changes in the error messages thrown by the API would break the code. What this meant for the Node.js team is that any error message changes, including something small such as a typo, would need to be queued for a major release.

To solve this problem and enable the team to have the flexibility to improve error messages within minor releases, the Node.js team has been making an effort to add an error code for every error object thrown by the Node.js API. This effort continues with the latest release. Complete implementation of this initiative would not only make error management easier for developers but also error messages can be backported to previous versions and internationalization of applications is made much easier.

## NPM v6 On the Horizon

Down the road, Node.js v10 will see its integration with NPM v6 early in its life. [NPM6](https://medium.com/npm-inc/announcing-npm-6-5d0b1799a905) prioritizes security, performance enhancements, and workflow optimization. The NPM team claims that `npm@6` will be able to deliver up to 17x the speed of `npm` a year ago. Sounds promising!

<include src="TweetQuote" quoteText="Node v10 will integrate with NPM v6 before it goes into LTS status in October 2018. Get ready to witness up to 17x the speed of last year's npm!"/>

## Node.js Time Travel

This version also comes with the experimental release of Node-ChakraCore that facilitates the usage of the Time-Travel innovation through the usage of the [NodeChakra Time Travel Debug VSCode extension](https://marketplace.visualstudio.com/items?itemName=ttd-trace-tools.node-chakracore-time-travel-debugger#overview). The extension allows developers to manage time traveling easily from the editor.

## Full Support of N-API

The N-API native Addons API graduates from its experimental status. But, what's N-API anyways?

[N-API](https://nodejs.org/api/n-api.html#n_api_n_api) is an API that allows developers to build native Addons. Node.js Addons are used to provide a performance boost to our codebase [when JavaScript performance isn't enough](https://blog.risingstack.com/writing-native-node-js-modules/). Node.js Addons provide us with an interface between JavaScript running in Node.js and C/C++ libraries. We can use that interface to build dynamically-linked shared objects in C++ that we can load into a Node.js application through a `require()` function.

Node.js Addons behave the same as regular Node.js modules but offer a performance boost for computationally demanding applications. By using Addons, we can also interact with lower level APIs of the operating system. All this sounds great; however, the implementation of Addons has been rather complicated, demanding knowledge of different components of Node.js including V8, libuv, C++ APIs, and other statically linked libraries such as OpenSSL.

N-API comes in place to simplify this process by offering an API to build native Addons that is independent of the underlying JavaScript runtime (V8). The goal is to insulate Addons to be stable across versions of Node.js: modules compiled for one version can run on later versions without recompilation. This is all done by making N-API Application Binary Interface (ABI) stable. We've heard API before, what's an ABI?

If an API is a contract between code modules, an ABI is a [contract between pieces of binary code](https://www.quora.com/What-exactly-is-an-Application-Binary-Interface-ABI-Who-defines-it-the-operating-system-a-programming-language) as explained by Google Engineer [Robert Love](https://twitter.com/rlove): an Application Binary Interface (ABI) "defines the mechanisms by which functions are invoked, how parameters are passed between caller and callee, how return values are provided to callers, how libraries are implemented, and how programs are loaded into memory." A stable ABI for Addons will make upgrading codebases that rely on native modules much easier.

<include src="TweetQuote" quoteText="Native code dependencies that are critical to the business are a core reason why some teams delay upgrading Node. The new N-API makes the migration easy with this release and effortless with future releases!"/>

Node Addons are a very advanced concept of the ecosystem. However, if you are looking to create some ultra-performance native modules do not hesitate to take a look and study the [C++ Addons documentation](https://nodejs.org/api/addons.html).

## Deprecations

The following are highlights of the API's that have been deprecated in this release:

- Using non-string values for `process.env` has been deprecated in documentation.
- Previously deprecated legacy async_hooks APIs have reached end-of-life and have been removed.
- Previously deprecated internal getters/setters on net.Server have reached end-of-life and have been removed.
- Using `require()` to access several of Node.js' own internal dependencies will emit a runtime deprecation.

For a full list of the deprecated APIs in this release, please visit the [v10.0.0 release notes](https://nodejs.org/en/blog/release/v10.0.0/#deprecations).

## Recap

Node.js continues to grow and evolve into a solid, flexible and diverse platform for developers to deliver reliable and scalable code. I am pretty excited about the future integration with TLS 1.3 and `@npm6`. Node.js will also continue to gain traction in the IoT area. What do you think about this release? If you have used it already, have you been able to experience any of the performance enhancements? Please let me know in the comments below!

Happy coding!

<include src="asides/AboutAuth0" />


NodeJS 10: The New, The Changed, and the Deprecated

dbafebf712fa816299231d2763fd292e?s=200 avatar

dbafebf712fa816299231d2763fd292e?s=200

Chidume Nnamdi

In this article, we are going to learn how to host and run a LoopBack application on Google App Engine. We will also set up Firestore as the database of our application.

Run a LoopBack App on Google App Engine

Let's learn about Nest.js, the new framework that takes advantage of TypeScript to create reliable and well structured Express applications.

Nest.js Brings TypeScript to Node.js and Express

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Learn how to build and secure RESTful APIs with Loopback.

Developing RESTful APIs with Loopback

Single Page Applications (SPAs) can benefit greatly from JWT secured backends. Here we will see how to secure an Angular 2 app, backed by Koa, with JWTs.

Building and Securing Koa and Angular 2 with JWT

Are you following these tips? If not, learn how to create a faster web app!

12 Steps to a Faster Web App

d48b998c2dce49ca309710eba498c562

Nathan Totten

Access Azure Storage APIs securely from browsers (i.e. using JavaScript) or native apps, without the need of a backend server.

**TL;DR**: you can access Azure Storage APIs securely from browsers (i.e. using JavaScript) or native apps, without the need of a backend server. Live demo @ <http://auth0.github.io/auth0-azure-blob-sample/>

---

Today’s modern cloud provides developers with a rich choice of building blocks for creating new and innovative applications faster than ever before. Utilizing Auth0, developers can build applications that are secure and scalable without the need for a traditional backend server. This significantly reduces your time to release as well as the cost of maintenance over the life of your application.

In this post you will see an example of how you can use Auth0 and the near infinite scale of Azure Blob Storage to build a rich and secure client application without a traditional backend. This example is built entirely in HTML/JavaScript and runs in the browser while still providing secure, authenticated access to resources in Azure Blob Storage.



Below you will find a simple diagram showing how this application will work. Notice that the browser app only communicates either with Auth0 or with blob storage directly. We don’t need backend server helping with security – Auth0 does this for us.

<div style="text-align: center"><img src="https://images.ctfassets.net/23aumh6u8s0i/7pUss8YHMqziXbR1kGgmH2/b2477c7d30bfcf8bafdea0305fe37234/cpLqCchdjHP_"/></div>

## Logging In

Authenticating with Auth0 is a breeze. To log the user in we will use the Auth0 Lock widget. After the user clicks through to login the callback will be returned and we can take the token and profile data and store them in the browser's local storage. After the data is stored, we redirect the user to the files.html page.

```js

var lock = new Auth0Lock(window.config.clientId, window.config.domain);

document.getElementById('btn-login').addEventListener('click', function() {
  lock.show({ popup: true }, function(err, profile, token) {
    if (err) {
      // Error callback
      alert('There was an error');
    } else {
      // Success calback

      // Save the JWT token.
      store.set('azure_sample_id_token', token);

      // Save the profile
      store.set('azure_sample_profile', JSON.stringify(profile));

      location.href = 'files.html';
    }
  });
});
```

## Retrieving the Azure Storage SAS Token
Auth0 integrates with a variety of identity providers as well as a number of additional services we call addons. We support a variety of addons such as [Firebase](https://auth0.com/docs/server-apis/firebase), [Salesforce](https://auth0.com/docs/server-apis/salesforce), [Azure Service Bus](https://auth0.com/docs/server-apis/azure-sb), and [Azure Storage](https://auth0.com/docs/server-apis/azure-blob-storage). You can use these addons to exchange your traditional user tokens for API specific tokens – in our example, we will use our JWT token issued by Auth0 for a Azure Blob SAS token in order for the browser client to securely read and write to storage.

```js
auth0.getDelegationToken({
  id_token: current_id_token,
  scope: "openid",
  api_type: "azure_blob",
  containerName: id_hash + "my-container-name"
}, function(err, delegationResult) {
  callback(delegationResult.azure_blob_sas);
});
```

## Rules
In addition to simply exchanging tokens we can use a feature in Auth0 called [Rules](https://auth0.com/docs/rules) to fully control user access to containers and blobs. Rules are Javascript functions that run on Auth0 in response to various authentication events. You can use rules to completely customize how authentication works inside your application.

In our example, I am simply limiting each user to a single blob that they own, but you could image that we could build a rich role-based access list for users to provide fine-grained control over storage resources. You can see the code for our rule below. Notice how we are using the Azure Storage SDK inside of the rule to check if containers exist and create new containers.

```js
function(user, context, callback) {

  var CLIENT_ID = "your_client_id_here";

  // Only run this rule for the correct app and for azure_blob delegations
  if (!(context.clientID === CLIENT_ID &&
        context.isDelegation &&
        context.request.body.api_type === 'azure_blob')) {
    return callback(null, user, context);
  }

  var blobName = context.request.body.blobName;
  var containerName = context.request.body.containerName;

  // Get user id hash
  var shasum = crypto.createHash('sha1');
  shasum.update(user.user_id);
  var hash = shasum.digest('hex');

  // Check to make sure the container belongs to the user
  if (containerName !== hash) {
    return callback(new UnauthorizedError('Not authorized.'));
  }

  // For blob requests, we are done
  if (blobName) {
    return callback(null, user, context);
  }

  var blobService = azure_storage.createBlobService(
    configuration.AZURE_STORAGE_ACCOUNT_NAME,
    configuration.AZURE_STORAGE_ACCOUNT_KEY);

  // For container list operations, ensure the container exists
  blobService.createContainerIfNotExists(containerName,
  function(error, result, response) {
    if (error) {
      return callback(error);
    }
    return callback(null, user, context);
  });  
}
```

## List Blobs in Container
Once we have our container’s SAS token, our browser app can make a request directly to Azure Blob storage to list the contents of the blob.

```js
var url = 'https://blobshare.blob.core.windows.net/' + containerName +
  '?' + sasToken + '&restype=container&comp=list';
$.ajax({
  url: url,
  type: "GET",
  success: function(data, status) {
    var model = convertResponseToModel(data);
    callback(null, model);
  },
  error: function(xhr, desc, err) {
    callback(err);
  }
});
```


## Upload a Blob
Because we want to be able to handle large files we are going to upload our file as a block blob. This allows the browser to make multiple requests to upload small chunks of a large file. This way, if one request fails we simply have to retry a small request rather than retry the entire upload. This means our browser app can handle uploads of very large sizes efficiently.

Once again, we will call our Auth0 delegation endpoint to exchange our auth token for an azure blob sas token. This token will be for a particular blob rather than a container. Because the code for uploading a blob in blocks is quite long I won’t put a snippet here. You can find a great reference on how to do that on [Gaurav Mantri’s blog](http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/).

## Resources
Now that we have walked through the steps of building a secure client-only application with Azure Storage and Auth0 you can try out the [running application](http://auth0.github.io/auth0-azure-blob-sample/) yourself. Additionally, you can find the [full source](https://github.com/auth0/auth0-azure-blob-sample) on Github and [additional documentation](https://auth0.com/docs/server-apis/azure-blob-storage) about using Auth0 and Blob storage.

<div class="try-banner try-code" style="margin: 0">
    <a href="https://github.com/auth0/auth0-azure-blob-sample" target="_new" class="btn btn-default btn-lg"><i class=" icon-1392070209-icon-social-github icon"></i>Code</a>
    <a href="http://auth0.github.io/auth0-azure-blob-sample/" target="_new" class="btn btn-default btn-lg"><i class=" icon-budicon-698 icon"></i>Demo</a>
</div>

## Summary
I hope this post gave you an understanding of some of the awesome things you can do with Auth0 and the modern cloud. Be sure to sign up for your [free developer account](https://auth0.com/pricing) and check out our [quick start guides](https://auth0.com/docs). If you have any questions you can reach our entire team on [chat.auth0.com](http://chat.auth0.com/) or [@Auth0](http://twitter.com/auth0).

"backend"