Overview

React Native Session is a session management library for React native applications. The library is a close replication React Session built on async-storage to manage React Native sessions.

How it Works

React Native Session uses the Context Hook api to provide a global session where you can authenticate and persist the current user across app closures. Once authenticated, React Native Session will automatically add the JWT token to all API requests sent using React Data. To learn more about React Native Session, please visit the API Documentation.

Quick Start

Install

npm install @mile-hi-labs/react-native-session
npm install @react-native-community/async-storage
cd ios && pod install

Session Provider

Next, add the following to your app.jsx file or near the top of your application.

# app.jsx

import React from 'react';
import Navigator from 'navigator';
import { StoreProvider, StoreContext } from '@mile-hi-labs/react-data';
import { SessionProvider } from '@mile-hi-labs/react-native-session';


const App = (props) => {

  return (
    <SessionProvider>
      <Navigator />
    </SessionProvider>
  )
}

export default App;

Session Consumer

Then, you can access the session from any component like so:

// scenes/welcome.jsx

import React, { useEffect } from 'react';
import { View, Text, TextInput, SafeAreaView } from 'react-native';
import { withSession } from '@mile-hi-labs/react-native-session';

const WelcomeScene = (props) => {
  const { session } = props;

  return null;
}

export default withSession(WelcomeScene);

Session Authentication

Then, login or register your user and pass the user's credentials to the session like so:

import React, { useEffect, useState } from 'react';
import { withSession } from '@mile-hi-labs/react-native-session';
import Axios from 'axios';
import { ScrollView, View, Text } from 'react-native';
import { Button, ButtonText } from 'components/basics/buttons';
import { Form, FormGroup, FormLabel } from 'components/basics/forms';
import { TextInputWrapper } from 'components/basics/inputs';
import { BasicScene } from 'components/basics/scenes';

const LOGIN_URL = 'http://localhost:8080/auth/login';

const LoginScene = (props) => {
  const { navigation, route, session } = props;
  const [ email, setEmail ] = useState('');
  const [ password, setPassword ] = useState('');
  const [ taskRunning, setTaskRunning ] = useState(false);


  // Methods
  const submitForm = async () => {
    try {
      setTaskRunning(true);
      let response = await Axios.post(LOGIN_URL, { email: email, password: password });
      await session.authenticate('user', user);
      navigation.reset({ index: 0, routes: [{ name: 'Main' }] });
    } catch (e) {
      console.log('error: ', e);
    } finally {
      setTaskRunning(false);
    }
  }


  // Render
  return (
    <BasicScene>
      <ScrollView contentInsetAdjustmentBehavior='automatic'>
        <View style={{flex: 1, width: '100%', padding: 15, backgroundColor: '#FFFFFF'}}>
          <Form>
            <FormGroup label='Email'>
              <TextInputWrapper
                value={email}
                placeholder='[email protected]'
                onChangeText={value => setEmail(value)}
              />
            </FormGroup>

            <FormGroup label='Password'>
              <TextInputWrapper
                value={password}
                secureTextEntry={true}
                placeholder='••••••••'
                onChangeText={value => setPassword(value)}
              />
            </FormGroup>

            <FormGroup style={{paddingTop: 15}}>
              <Button taskRunning={taskRunning} onPress={() => submitForm()}>Login</Button>
            </FormGroup>

            <FormGroup>
              <View style={{paddingTop: 15, display: 'flex', flexDirection: 'row', justifyContent: 'flex-start'}}>
                <Text style={{marginRight: 5}}>Don't have an account?</Text>
                <ButtonText onPress={() => navigation.navigate('Register')}>Register</ButtonText>
              </View>
            </FormGroup>

          </Form>
        </View>
      </ScrollView>
    </BasicScene>
  );
};

export default withSession(LoginScene);

Demo

This project comes with a built-in React Native demo.

Development

React Native's metro bundler doesn't accept the steps below. Please contact the project author for an alternative path.

• Clone this repository
• Run npm install from this library
• Run npm run build from this library
• Open up the consuming project / demo project and run npm install path/to/this/project
• Repeat the steps above to consume the latest code

Links

• Github
• API Documentation
• Mile Hi Labs