React Native: User Authentication Flow Explained

How to handle in-house authentication in React Native apps, with AsyncStorage

Prelude: Is OAuth demand falling?

React Native Authentication Flow

Authentication Tokens

// generate an auth tokenconst authToken = crypto.randomBytes(64).toString('base64');
App authentication flow based on a saved authToken.

Authentication Metadata for offline usage

Authentication Timestamp

Device ID to uniquely identify a sign-in device

// generating a random identifier for `deviceId`const uuidv1 = require('uuid/v1'); // timestamp based
const deviceId = uuidv4();
// ⇨ '2c5ea4c0-4067-11e9-8bad-9b1deb4d3b7d'
A more comprehensive authentication flow with offline usage considered.

Persisting Authentication Data with AsyncStorage

import { AsyncStorage } from 'react-native'asyncStorageExamples = async () => {  // getting an item
const val = await AsyncStorage.getItem('key');
// storing a string
const a = 'string_val';
await AsyncStorage.setItem('key', a);
// storing a stringified object
const b = { b: 1 };
await AsyncStorage.setItem('key', JSON.stringify(b);
// removing an item
await AsyncStorage.removeItem('key');

Retrieving authentication data to populate user settings

// structure of authentication object stored in AsyncStorageinterface AuthenticationData {
authToken: string;
deviceId: string;
timestamp: number;

Signing in and persisting authentication state

A note on server side authentication

// hashing a password with bcryptconst bcrypt = require('bcrypt');
const saltRounds = 10;
const hashedPw = await bcrypt.hash(password, saltRounds);
// validating a passwordconst passwordValid = await, hashedPassword);

Expanding With Other Authentication Methods

Other considerations

In Summary

Programmer and Author. Director @ Creator of for iOS and Android.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store