Server setup

We’re going to deploy a number of networked services using Docker and Docker Compose. Please make sure you have Docker and Docker Compose installed on a host with 1GB RAM and you have access to a domain name.

Adding DNS records should be done first, as it takes time for DNS to update. Don’t start Docker Compose until DNS has updated or Let’s Encrypt will fail to generate SSL certificates.

Please create hostnames for KEYCLOAK_HOST, APPSITE_HOST and REDIRECT_HOST before proceeding, please see below for details.

Configuration

Clone Docker Compose config and edit it’s environment file:



$ cd server/ $ git clone https://github.com/ak1394/react-native-login-server.git server$ cd server/ $ vi .env

Update settings in .env file:

# Your email address, required by Let's Encrypt

LETSENCRYPT_EMAIL=admin@no-mad.net # Username and password for Keycloak admin

KEYCLOAK_USER=admin

KEYCLOAK_PASSWORD=changeme # Hostnames, use your own domain name!

KEYCLOAK_HOST=auth.no-mad.net

REDIRECT_HOST=success.no-mad.net

APPSITE_HOST=app.no-mad.net # App ID For Universal link, format is: <Team ID>.<Bundle ID>

APP_ID=6W9ZGN9YUK.org.reactjs.native.example.LoginExample

Start the service

$ docker-compose up

This will download, configure and start all Docker images. When this process completes, you should be able to access Keycloak admin panel at https://<KEYCLOAK_HOST>/auth. Use the username and password you configured earlier to login as admin user.

Create a Realm for your app.

Add a Client ID for your app.

Add Facebook Identity provider and configure it with your Facebook application Client ID and Client Secret.

Below is a screenshot of an existing Facebook application, please note that your KEYCLOAK_HOST must be listed in “App Domains” of your Facebook app.

Application setup

Now it’s time to enable your app to authenticate with Facebook. We’re going to use react-native-login module to handle authentication flow.

Authentication starts when user clicks ‘Sign in with Facebook’ button, and for the most part happens in the browser. However, once a user has authenticated we have to return to the app. Re-launching the app is done using iOS Universal Link, therefore the React Native Linking module needs to be properly configured.

Please follow the steps below to allow your app handle Universal Links.

Turn on “Associated Domains” capability, and add “applinks:” entry for your APPSITE_HOST.

Add entry to “Header Search Path” to fix the issue with finding “RCTLinkingManager.h” header.

$(SRCROOT)/../node_modules/react-native/React

Add code to handle Universal Links to your “AppDelegate.m” file.

#import “RCTLinkingManager.h” - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation

{

return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];

} - (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity

restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler

{

return [RCTLinkingManager application:application

continueUserActivity:userActivity

restorationHandler:restorationHandler];

}

Performing authentication

First we have to import ‘react-native-login’ module and create its config object.

import Login from ‘react-native-login’;

// KEYCLOAK_HOST + '/auth'

url: ‘



// Realm as configured in Keycloak admin panel

realm: ‘ReactAppRealm’, const config = {// KEYCLOAK_HOST + '/auth'url: ‘ https://auth.no-mad.net/auth' // Realm as configured in Keycloak admin panelrealm: ‘ReactAppRealm’, // Client ID as configured in Keycloak admin panel

client_id: ‘reactapp’,

redirect_uri: ‘



// APPSITE_HOST + '/app.html'

appsite_uri: ‘



// Do Facebook authentication

kc_idp_hint: ‘facebook’,

}; // REDIRECT_HOST + '/success.html'redirect_uri: ‘ https://success.no-mad.net/success.html' // APPSITE_HOST + '/app.html'appsite_uri: ‘ https://app.no-mad.net/app.html' // Do Facebook authenticationkc_idp_hint: ‘facebook’,};

With configuration in place we are ready to initiate login flow, perhaps in response to some UI event:

Login.start(config).then(tokens => {

console.log('logged in, tokens', tokens);

});

Next steps

The key piece of our service is a Keycloak server, it can be configured to authenticate to a variety of identity providers, or it can be used to register new users without using third party identity provider.

Keycloak server as configured by Docker Compose in this article, uses an embedded database. If you plan to use Keycloak in production consider using PostgreSQL or MySQL instead, as well as configuring Keycloak cluster for HA.