Generating Client APIs using Swagger Part 3

Also available in German at miragon.io.

With each new backend release a frontend developer has to rewrite huge parts of the API client. What if there would be a solution to update the whole client in just a few seconds?

In this blog post, we’re introducing Swagger’s client generation, showing how to use the generated API in React applications and pointing out how to integrate Auth0’s authentication token.

To keep things simple, this topic will be divided into a series consisting of three parts:

1. Generating Client APIs using Swagger Part 1: Integrating Swagger into Spring Boot, generating the API client and using it as part of a React web app
2. Generating Client APIs using Swagger Part 2: Securing the endpoints using Auth0 and authorising the web client’s requests
3. Generating Client APIs using Swagger Part 3: Using the generated API client as part of a React Native App.

Using the generated API client as part of a React Native app

In the final part of this series we’ll integrate our Swagger client API in a React Native app. This section builds on top of the two previous blog posts, so please work through them, before you start reading this one. Today’s goal is to implement a React Native app presenting the projects that we manage in our React web application.

tl;dr

Due to the higher configuration effort you have to go through with this post, a tl;dr does not work for this. For a quick-start, walk through Step 1 and 2 and use our example-app.

Step 1) Get an Expo account

Expo is a wrapper for React Native apps, which simplifies the whole development process including dependency management, build and deployment.

1. Visit https://expo.io/ and create a new account.
2. Install the Expo CLI tool.
3. Create a new project by executing expo init in an empty directory.
4. Publish the project to Expo via expo publish → this should generate a project page similar to ours: https://expo.io/@miragon/miragon-example-app

Step 2) Creating and configuring an Auth0 application

1. In Auth0, create a new native application for your existing tenant: Applications → Create Application → Native
2. Add your Expo project’s authentication URL to the list of allowed callback URLs (e.g. https://auth.expo.io/@miragon/miragon-example-app) and save the changes pressing the button at the bottom.
3. Set the tenant’s default directory to Username-Password-Authentication: Go to the tenant’s settings (same level as your application) → General → Set API Authorization Settings to “Username-Password-Authentication”.

Step 3) Configure the React Native App

If you’d like to try authentication on a working example, clone our example-app, add the following environment variables to your run configuration and start the app using expo start:

AUTH0_DOMAIN=<YOUR_DOMAIN> (e.g. https://miragon-example-tenant.eu.auth0.com/authorize);
AUTH0_CLIENT_ID=<YOUR_CLIENT_ID> (e.g. yXu7nsklfU495Hgsdg51p0age9dC)

You will see that we’re using Auth0's login flow, which forwards the user to its login page and reopens the app after entering the correct credentials. This logic is implemented in constants/Auth.tsx and works the following way:

At first, the client’s credentials are used to get an authorization code, which is a long-term token that’s valid for 30 days. This long-term token is then used to request a short-term access token in the second step. In our apps we persist this long-term token in Expo’s secure storage on the client device and use it to refresh the access token whenever it expires. That’s why our users don’t have to enter their credentials every time they reopen the app. Please refer this article to find out more about the implementation.

To keep the code free from dependencies to our specific Auth0 domain and client ID, we store them as environment variables using expo-constants in combination with the file app.config.js, which looks like this:

import app_config from "./app.json"

export default  {
    ...app_config.expo,
    extra: {
        auth0ClientId: process.env.AUTH0_CLIENT_ID,
        auth0Domain: process.env.AUTH0_DOMAIN,
    },
};

As you can see, the file app.json is extended. That’s the file in which all of Expo’s configuration is happening. To use Auth0 in your Expo app, make sure you set “owner” to your Expo account name and “scheme” to a preferably unique shortcut. It will be used as the protocol part in the redirect URLs to reopen the app after a successful login (e.g. mea://...). Check our example app.json below:

{
  "expo": {
    "name": "miragon-example-app",
    "slug": "miragon-example-app",
    "scheme": "mea",
    "owner": "miragon",
    ...
}

At last you have to add the dependency react-native-polyfill/auto and import it from your App.tsx This is necessary to fix the Axios fetch issue, as described here.

Step 4) Integrate the API

Since React Native apps are based on React, you can use the same approach that we set up for our web application in the previous part.

That’s it. Have fun working with this business-ready setup based on Spring Boot, Swagger, Auth0, React and React Native!