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.

Luís Brito · Accepted Answer · 2017-11-20 21:40:20Z

8

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);
  });

edited Nov 20, 2017 at 21:40

answered Nov 20, 2017 at 21:24

Luís Brito

1,7622 gold badges17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

denden Over a year ago

Thanks Luis, I totally plan to bring in OAuth 2.0 later. But currently at the learning/research stage and I'm keen to understand how it all works so I'm not creating stuff blissfully unaware of gaping holes I create because I'm sure how it works.

Luís Brito Over a year ago

Yep, I agree. Still, the react native module will handle any kind of token or username + password credentials you have in mind.

Luís Brito Over a year ago

Edit: Added "get" example for keychain

denden Over a year ago

react-native-keychain is an excellent recommendation, I hadn't come across it.

denden Over a year ago

Here is an example of node OAuth 2 server in action github.com/pedroetb/node-oauth2-server-example. For future readers.

Collectives™ on Stack Overflow

Authentication and Session management in react-native apps

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related