Authentication and Session management in react-native apps

Question

I've been looking at solutions for authenticating users on react-native based apps. I've come across things like Firebase and JSON web tokens, however, I can't seem to find an example of session management between server and client device.

For the react/server relationship, the bit that I'm missing is the piece on the server side that is the equivalent of that $_SESSION variable in PHP, which can be used to store a user's unique ID.

=> Client token sent with each data request.
=> Request Checks token and sends data back for that specific user/token pair

I'm looking for some sort of example code on how this would be managed on the server-side and suggests on the tools/implementation you would suggest I use to implement it.

I'm not currently looking to implement oAuth2 because but rather I wish to create my own login system so I can properly understand how the App works.

Answer 1

Note about OAuth 2.0:

I have a strong recommendation for OAuth 2.0 protocol when dealing with mobile applications, specially because of the Refresh Token architecture, that helps me keep my user authenticated for long periods of time without compromising their own security.

Also, this is the protocol used by major social SDKs: Google, Facebook, Twitter and Slack. The best part: you can use out-of-the box solutions in your server side, for example OAuth 2.0 Server for PHP and OAuth 2.0 Server for NodeJS.

Storing data safely on React Native

Going back to the React Native end, once you have your set of credentials (JWT or OAuth 2.0), you have to store them safely. There is no direct way to do it using only the framework, but there is a great package called react-native-keychain that deals with it in both iOS and Android platforms.

Add it to your project.

# Using Yarn
yarn add react-native-keychain

# Or using NPM
npm install --save react-native-keychain

Then just use it where your user authenticates.

import * as Keychain from 'react-native-keychain';


// When you have the JWT credentials
Keychain
  .setGenericPassword("JWT", token)
  .then(function() {
    console.log('Credentials saved successfully!');
  });


// When you need to get it from safe storage
Keychain
  .getGenericPassword()
  .then(function(credentials) {
    console.log('Credentials successfully loaded for user:' + credentials.password);
  }).catch(function(error) {
    console.log('Keychain couldn\'t be accessed! Maybe no value set?', error);
  });