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

Essential practices for securing AI-generated code, key security considerations for your full-stack application, deployment, and infrastructure precautions.

Generate More Secure Code With AI-Powered Tools

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

The newly released JHipster Native blueprint allows you to generate Spring Boot projects with Spring Native support.

Introducing Spring Native for JHipster: Serverless Full-Stack Made Easy

This tutorial shows you how to create a slick-looking, full-stack, secure application using React, Spring Boot, and JHipster.

Full Stack Java with React, Spring Boot, and JHipster

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

olususi-oluyemi

Oluyemi is a tech enthusiast with a background in Telecommunication Engineering. He ventured into programming with a keen interest in solving day-to-day problems encountered by users. He has since directed his problem-solving skills towards building software for both the web and mobile platforms. As a full-stack software engineer with a passion for sharing knowledge, Oluyemi has published many technical articles and content on several blogs worldwide. As s tech-savvy person, his hobbies include trying out new programming languages and frameworks.

Software Engineer / Technical Content Creator

Olususi Oluyemi

Learn how to build modern and secure Full-Stack applications with React, TypeScript, and Nest.js.

Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 1

ahmed-bouchefra

Guest Author

Ahmed Bouchefra

Learn ow to create a full-stack application with Django, Django REST framework, and Vue.js. Then, learn how to secure your REST API and the Vue.js frontend with Auth0.

Building Modern Applications with Django and Vue.js

Learn how to build modern and secured Full-Stack applications with React, TypeScript, and Nest.js.

Modern Full-Stack Development with Nest.js, React, TypeScript, and MongoDB: Part 2

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

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

f7144da08aeb41a93256f8ae88f507d2?s=64 avatar

f7144da08aeb41a93256f8ae88f507d2?s=64

Ajden Towfeek

This is a guest post by Ajden Towfeek. Ajden is a full-stack developer with focus on Microsoft technologies with 10+ years of experience in commercial software development.



_This is a guest post by Ajden Towfeek. Ajden has worked on everything from embedded devices to large scale enterprise systems during his 10+ years in commercial software development. Since 2007, Ajden has focused on Microsoft technologies and more lately on web technologies. Ajden is also a speaker at conferences and has a passion for teaching. He is a frequent blogger on [http://towfeek.se](http://www.towfeek.se), and you can follow him on twitter [@ajtowf](https://twitter.com/ajtowf). For screencasts on the latest web technology, make sure to check out his [youtube channel](https://www.youtube.com/c/AjdenTowfeek)._

-------------

# Pluralsight Course

I've created a [pluralsight course](http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0) on how to implement Auth0 in an AngularJS application going against an ASP.NET WebAPI backend. Using Auth0 is a pluralsight first and so far it's performing well with good rating. Make sure to [check it out](http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0) if you have a pluralsight subscription, otherwise I'm hoping the promotional video below can make you get one.  

-------------

<iframe width="640" height="480" src="https://www.youtube.com/embed/gPkhM1GwVYA?rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>

# Table of contents

The course is split into the following three modules:

* **An Introduction**: Course introduction with brief overview of Auth0, where we also register for a free developer account.
* **Building the Back-end API**: In this module we create the back-end and secure it with Auth0, we also test our API by making secure calls with postman.
* **Building the Front-end SPA**: In this module we create the front-end using AngularJS to communicate securely with our back-end. We use Auth0Lock to get a professional looking login dialog that displays well on any resolution and device.

# Why do a course on Auth0?

First of all, I'm new to using Auth0 as a service, I stumbled upon it when trying to find a quick to implement solution for a client I was working with a couple of months ago. I was amazed by how fast we were up and running and could move on to writing the business logic. Unfortunately, that particular client didn't end up using Auth0 in production for various reasons but I'm currently discussing the possibility of using Auth0 for user management with a new client.    

Aside from consulting I also teach and speak at conferences and to strengthen my brand I decided to try out for becoming a pluralsight author. The [audition](https://youtu.be/QjAfgfTZfho) went well, but angular 2 was off the table since it's still in alpha. When browsing the pluralsight library I noticed there was nothing on Auth0 there, so why not be the first one to contribute with an Auth0 course?

I've also added an Auth0 session to my ASP.NET classroom training after going through ASP.NET Identity to show how identity can be implemented even simpler, and the student reactions to how simple it is to use has been really positive.   

# Working with the Pluralsight team

From the initial contact with the audition to working close with my editor on the course, pluralsight was super professional. I really enjoyed the experience, and I definitely encourage other developers to go through the experience of creating a course. Even if I have some experience from creating [screencasts on youtube](https://www.youtube.com/c/AjdenTowfeek) this was something entirely different.

# Conclusion

After 30 hours of recording and editing the course was finished and it's now live, make sure to [check it out](http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0). Auth0 is an awesome service and I'll definitely recommend it to future clients and keep teaching it in my class room training.

<include src="TweetQuote" quoteText="Auth0 is an awesome service and I'll definitely recommend it to future clients."/>


"full stack"