👨‍💻 - Drupal - Okta - React Native

A long explanation about building a mobile app with Okta SSO, backed by Drupal 8
This article is still in draft version

This article is Part 0 of the series of blog post about building a React Native application backed by Drupal, authenticated via Okta

  • Part 0: introduction of the project
  • Part 1: configuring Okta application
  • Part 2: build the Drupal server
  • Part 3: build the React Native application

Last year, I did some researches about implementing Okta SSO into mobile application built with React Native. At that time, the main significant instruction was this blog post. The solution back then was use React Native App Auth which, out-of-the-box, comes with methods such as authorize, refresh and revoke helped handling communication, exchanging tokens with the Okta authorization server.

The solution works great, on iOS (devices and simulator) and on Android (simulator). However, on Android devices, after authorized, Okta won't be able to bounced back to the app, it was almost dead end as from Android 25, Google made it impossible to launch an app from a src attribute, even if the user has the appropriate app installed.

Following Google's document about Android Intents with Chrome, we had a workaround:

  • Configure Okta to redirect to a web page upon successfully authorized user
  • The said web page has a link with format

    <a href="intent://#Intent;scheme=myapp;package=com.amce.myapp;end">Go back to my app</a>

So, the user-flow becomes:

  1. User open the app, click the Single Sign-On button
  2. Redirected to Okta where they consecrate login credential
  3. Okta thinks that's ok, redirect the user to the custom web page
  4. Upon coming to the web page, user have to click the button to go back to the app, events triggered by scripted are all blocked 👉 🔘

It was not a pleasant experience to end users to be redirected from places to places.

Recently, on July 8, 2019, I've learnt that Okta released their official Okta React Native library. And that I have some free time (I'm kidding, Ken!), so I think it's a good idea to go back and resolve the last year problem, also to review some technical aspects of a decouple system involving Drupal, Okta and React Native.

In this marathon blog post, we'll be building a proof of concept that we call soPOC:

  • a Drupal site which does what it's designed to be the best: a content management system. We'll have a Drupal site with lots of books. Each node carries book's metadata: title, author, genre, cover ... Content of the site is accessible only if you're logged in.
  • Okta will be an authentication server, verifying if the user is authenticated user.
  • a mobile application in React Native, it will first - authorize user by knocking Okta's door, then second - send request o Drupal asking for list of the trending books.

[add architecture diagram]

We will be learning to:

  • Configuring Okta application.
  • Build a simple Drupal 8 site, setup simpleOauth on Drupal site.
  • Build a React Native application, written in Typescript, use react-navigation, making request to server.

Not to discourage enthusiastic developers, this tutorial is divided into 3 articles, each covers a separated part of the system setup.

  • Okta setup: Setup and configuration Okta developer account 👉 Part 1
  • Create the Drupal site: Setup, configuring Drupal 8, setup simple_oauth, json:api, consumer ... as well as setup content.
  • Create React Native app: Initialize React Native application, configuring React-navigation, setup Okta OIDC. 👉 Part 3