Integrate React Native and Spring Boot Securely
Tags: spring, security, programming
Published: 2022-10-24 20:45:30

> Original post written by [Matt Raible](https://auth0.com/blog/authors/matt-raible/) for Auth0 blog.

### Use JHipster to build a photo-sharing app for web and mobile that has a React front-end with OIDC authentication and a Spring Boot back-end with OAuth2 authorization.

#### <br>

React Native is a mobile app framework from Facebook. It allows you to quickly develop apps using React's API and deploy them to iOS and Android. It allows you to quickly refresh the apps when you make changes and generally offers a pleasant experience for web developers.

[React Native for Web](https://necolas.github.io/react-native-web/) is a recent addition to the React Native family. It allows you to run your app in a browser and enjoy the browser's built-in dev tools. It's optimized for mobile and uses the same components as React Native, so it looks good too!

In this tutorial, I'll show you how to create a React Native application that deploys to the web, iOS, and Android. You'll configure it to use OpenID Connect (OIDC) for authentication and use OAuth 2.0 access tokens to talk securely to a Spring Boot API.

Below is a diagram of the app you'll create in this tutorial and its authentication flow.

![react native jhipster diagram](https://images.ctfassets.net/23aumh6u8s0i/6NGWGOZndTPbyRVC41OXOl/b08b8fec098a27e724c7831ffcdabf9a/01-react-native-jhipster-diagram.png)

**Prerequisites:**

* [Java 11+](https://adoptopenjdk.net/)
* [Node 16+](https://nodejs.org)

If you're on Windows, you may need to install the [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about) for some commands to work.

I recommend using SDKMAN to manage your OpenJDK installations. Just run `sdk install java 11.0.2-open` to install Java 11 and `sdk install java 17-open` for Java 17.

## Quick Apps with JHipster

JHipster is a full-stack application generator that uses Spring Boot on the backend and Angular, React, or Vue on the front end. It started as an open-source project in 2013 before any of these frameworks existed. It then used Spring MVC for the backend and AngularJS for the front end.

Its popularity grew quickly along with its adoption and rise of the frameworks above. Today, it averages over 100K downloads per month. It even has a healthy budget, thanks to its sponsors and backers via [Open Collective](https://opencollective.com/generator-jhipster).

Why am I telling you this? Because JHipster will help you build your React Native app _and_ it was used to create the backend in a previous tutorial.

## JHipster Blueprints for More Power!

JHipster added a **blueprints** feature several years ago. It allows you, as a developer, to create a project that overrides the default behavior of JHipster. This feature has led to a [thriving ecosystem of blueprints](https://www.jhipster.tech/modules/official-blueprints/), from Kotlin to Micronaut to .NET Core to NestJS to Svelte to Ionic and even React Native.

Today, I'll show you how to use [JHipster's React Native blueprint](https://github.com/jhipster/generator-jhipster-react-native) to build a Flickr clone. The backend will be powered by the Spring Boot app created in [Full Stack Java with React, Spring Boot, and JHipster](https://auth0.com/blog/full-stack-java-with-react-spring-boot-and-jhipster/) tutorial. The React Native app's screens will be generated from the same JDL (JHipster Domain Language) file that created the backend entities.

I'm excited to show you how to use JHipster React Native because its [4.3.0 release](https://github.com/jhipster/generator-jhipster-react-native/releases/tag/v4.3.0) upgrades it Expo 46, React Native 0.69.5, and React 18. Let's giddyup! 🤠

## Build a Photo Gallery with React and Spring Boot

Start by creating a new directory to hold your frontend and backend projects:

```shell
take react-native-spring-boot
```

> NOTE: `take` is a command that makes a directory and moves into it.

Clone an existing JHipster app into a `backend` directory:

```shell
git clone https://github.com/oktadev/auth0-full-stack-java-example.git backend
```

This app is configured to use OIDC for authentication and needs a provider configured to start correctly. To make things quick, a pre-configured Keycloak instance is configured with a Docker Compose file. You can start it:

```shell
cd backend
docker-compose -f src/main/docker/keycloak.yml up -d
```

**Apple Silicon and Keycloak**<br>
If you're using Apple Silicon (aka M1 or M2), Keycloak will fail to start because its Docker image wasn't available for an M1 when the backend project was created. To fix it, run the script below.

```shell
VERSION=15.0.2 # Keycloak version specified in keycloak.yml
cd /tmp
git clone git@github.com:keycloak/keycloak-containers.git
cd keycloak-containers/server
git checkout $VERSION
docker build -t "jboss/keycloak:${VERSION}".
docker build -t "quay.io/keycloak/keycloak:${VERSION}".
```
****

Then, start the backend using `./mvnw` and open your favorite browser to `http://localhost:8080`. You should be able to log in with `admin/admin` and upload photos. They'll be displayed in a nice grid, and you can click each photo to zoom in.

![Photo Gallery](https://images.ctfassets.net/23aumh6u8s0i/7yuhaS0iV4LzTUFfR5pSwE/65eca12e83755e3206c6f46b2af8690c/photo-gallery-flickr.jpeg)

Now let's create a React Native app that talks to the same API.

[Read more...](https://auth0.com/blog/integrate-react-native-and-spring-boot-securely/?utm_source=devto&utm_medium=sc&utm_campaign=devto)