User Authentication in ReactNative using ReactNavigation

Install Reactnative Cli globally.

npm install -g react-native-cli

Create a project

react-native init ReactNativeBasicAuthentication

Install Pre requests like react navigation and react native elements

npm install –save react-navigation
npm install –save react-native-gesture-handler
npm i react-native-elements –save
npm i –save react-native-vector-icons
react-native link

Here User authentication details save in local storage of the mobile. so replace the below code in App.js

import { createSwitchNavigator, createStackNavigator, createAppContainer } from ‘react-navigation’;
import Login from ‘./app/components/Login’;
import AuthLoading from ‘./app/components/AuthLoading’;
import Home from ‘./app/components/Home’;
import Signup from ‘./app/components/Signup’;
import Products from ‘./app/components/main/Products’;
const AppStack = createStackNavigator({ Home: Home, Products: Products });
const AuthStack = createStackNavigator({ Login: Login, Signup: Signup });
export default createAppContainer(createSwitchNavigator( { AuthLoading: AuthLoading, App: AppStack, Auth: AuthStack, }, { initialRouteName: ‘AuthLoading’, }));

Then Create app/components folder

Login.js
import React, {Component} from ‘react’;
import { View, AsyncStorage, Alert} from ‘react-native’;
import { Card, Button, FormLabel, FormInput, Header, Divider } from ‘react-native-elements’;

export default class Login extends React.Component {
state = {
email: ”,
password: ”
};
static navigationOptions = {
header:null,
};

render() {
return (
<View>
<Header
centerComponent={{ text: ‘Login’, style: { color: ‘#fff’ } }}
outerContainerStyles = {{height:50}}
/>
<Card title=”Login”>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={(text)=>this.setState({email:text})}/>
<FormLabel>Password</FormLabel>
<FormInput secureTextEntry={true} onChangeText={(text)=>this.setState({password:text})}/>
<Button
small
icon={{name: ‘user’, type: ‘font-awesome’}}
title=’Login’
color=’white’
backgroundColor=’#2195f3′
onPress={this._loginAsync} />
<Divider style={{ backgroundColor: ‘white’, height:5 }} />
<Button
small
icon={{name: ‘user’, type: ‘font-awesome’}}
title=’Register’
color=’white’
backgroundColor=’#9c27b0′
onPress={this._signUp} />
</Card>
</View>
);
}

_loginAsync = () => {
if(this.state.email && this.state.password){
fetch(‘http://192.168.0.103:3000/login’, {
method: ‘POST’,
headers: {
Accept: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
email: this.state.email,
password: this.state.password
}),
}).then((response) => response.json()).then(async (responseJson) => {
if(responseJson.status){
await AsyncStorage.setItem(‘userToken’, responseJson.token);
await AsyncStorage.setItem(‘user’, responseJson.user.name);
await this.props.navigation.navigate(‘App’);
}else{
Alert.alert(‘Success!’,’Login Fail..’);
}
})
.catch((error) => {
Alert.alert(‘warning!’,’Login Fail..’);
console.log(error);
});
}else{
Alert.alert(‘warning!’,’Please fill User Name / Password..’);
}
};

_signUp = () => {
this.props.navigation.navigate(‘Signup’);
};
}

Signup.js

import React, {Component} from ‘react’;
import { View} from ‘react-native’;
import { Card, Button, FormLabel, FormInput, Header, Divider } from ‘react-native-elements’

export default class Signup extends React.Component {
state = {
email: ”,
password: ”,
phone: ”,
name: ”
};
static navigationOptions = {
header:null,
};

render() {
return (
<View>
<Header
centerComponent={{ text: ‘Signin’, style: { color: ‘#fff’ } }}
outerContainerStyles = {{height:50}}
/>
<Card title=”Signup”>
<FormLabel>Name</FormLabel>
<FormInput onChangeText={(text)=>this.setState({name:text})}/>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={(text)=>this.setState({email:text})}/>
<FormLabel>Phone</FormLabel>
<FormInput onChangeText={(text)=>this.setState({phone:text})}/>
<FormLabel>Password</FormLabel>
<FormInput secureTextEntry={true} onChangeText={(text)=>this.setState({password:text})}/>
<Button
small
icon={{name: ‘user’, type: ‘font-awesome’}}
title=’Register’
color=’white’
backgroundColor=’#2195f3′
onPress={this._signUp} />
<Divider style={{ backgroundColor: ‘white’, height:5 }} />
<Button
small
icon={{name: ‘user’, type: ‘font-awesome’}}
title=’Login’
color=’white’
backgroundColor=’#9c27b0′
onPress={this._signInAsync} />
</Card>
</View>
);
}

_signInAsync = async () => {
this.props.navigation.navigate(‘Login’);
};

_signUp = () => {
this.props.navigation.navigate(‘App’);
};
}

Home.js
import React, {Component} from ‘react’;
import { View, AsyncStorage} from ‘react-native’;
import { createDrawerNavigator, DrawerItems, createAppContainer } from ‘react-navigation’;
import HomeScreen from ‘./main/HomeScreen’;
import { Divider,Icon, Text, Button } from ‘react-native-elements’;
import Products from ‘./main/Products’;

const RootDrawer = createAppContainer(createDrawerNavigator({
HomeScreen: {
screen: HomeScreen,
navigationOptions: {
drawerIcon: () => (<Icon name=”home” />),
}
},
‘Products’: {
screen: Products,
navigationOptions: {
drawerIcon: () => (<Icon name=’ios-information-circle’ type=’ionicon’ />),
}
}
}, {
headerMode: ‘screen’,
contentComponent: (props) => (
<View>

<View>
<View style={{alignItems: ‘center’}}>
<OurHead />
</View>
<Divider style={{height: 2, backgroundColor: ‘#989898’ }} />
</View>
<DrawerItems {…props} />
<Button
onPress={async () => {await AsyncStorage.clear(); this.props.navigation.navigate(‘Auth’); }}
title=”Logout”
/>
</View>
),
}));

export default class Home extends React.Component {
static navigationOptions = {
header:null,
};

render() {
return <RootDrawer />;
}

_signOutAsync = async () => {
await AsyncStorage.clear();
this.props.navigation.navigate(‘Auth’);
};
}

class OurHead extends React.Component{
render(){
return <View><Text>Basic Authentication App</Text></View>;
}
}

main/HomeScreen.js
import React, {Component} from ‘react’;
import {View} from ‘react-native’;
import { Header, Text } from ‘react-native-elements’;

export default class HomeScreen extends React.Component {

headerSamp = () =>
    <View>
        <Header
            leftComponent={{ icon: ‘menu’, color: ‘#fff’, onPress: () => this.props.navigation.toggleDrawer() }}
            centerComponent={{ text: ‘Home’, style: { color: ‘#fff’ } }}
rightComponent={{ icon: ‘home’, color: ‘#fff’ }}
outerContainerStyles = {{height:50}}
        />
    </View>

render() {
return (
<View>
{this.headerSamp()}
<Text h3>Welcome to basic authentication app.</Text>
</View>
);
}
}

main/Products.js
import React, {Component} from ‘react’;
import { View,ScrollView, FlatList} from ‘react-native’;
import { Header, List, ListItem, Avatar } from ‘react-native-elements’;

export default class Products extends React.Component {

state = {
data:[]
}

headerSamp = () =>
    <View>
        <Header
            leftComponent={{ icon: ‘menu’, color: ‘#fff’, onPress: () => this.props.navigation.toggleDrawer() }}
            centerComponent={{ text: ‘Products’, style: { color: ‘#fff’ } }}
rightComponent={{ icon: ‘ios-information-circle’ ,type:’ionicon’, color: ‘#fff’ }}
outerContainerStyles = {{height:50}}
        />
    </View>

componentDidMount() {
fetch(‘http://frensol.com/chandu/a.php’)
.then(response => response.json())
.then(data => {this.setState({data });
});

}

renderRow ({ item }) {
return (
<ListItem
avatar={<Avatar
source={item.image && {uri: item.image}}
title={item.title}
/>}
title={item.title}
subtitle={‘INR ‘+item.mrp}
rightIcon={{name:’shopping-cart’,type:’entypo’,color:’black’}}
/>
)
}

render() {
return (
<View>
<View>
{this.headerSamp()}
</View>
<ScrollView>
<List>
<FlatList
data={this.state.data}
renderItem={this.renderRow}
keyExtractor={item => item.title}
/>
</List>
</ScrollView>
</View>
);
}
}