CODEWITHSUNDEEP
react-nativereact-navigation
Sunny negi
Sunny negi

Reputation: 71

How to implement auth flow in react native with react navigation?

Hi guys need help over Login flow, I write a code for auth flow but facing some weird issue like. Right now what is happening I have login page while clicking on signIn button, I am sending the user to auth screen but if user click on back button then he moves to login screen again, and this is wrong, if user is login then why it's again move to login screen.

Here is code for it this is my route.js

import React from 'react';
import { StackNavigator, DrawerNavigator } from 'react-navigation'

import loginScreen from '../containers/login/loginScreen'
import todo from '../containers/todo/todo'
import addTodo from '../components/addTodoTask'
import SideBar from '../components/sideBar/sideBar'
import DashBoard from '../components/common/dashboardWidget'
import signUp from '../containers/signUp'
import editTodo from '../containers/todo/editTodo'

const authScreen = DrawerNavigator({
    DashBoard: { screen : DashBoard },
    Todo: { screen: todo }
},{
    drawerPosition: 'left',
    contentComponent: props => <SideBar {...props} />
},);

export const SignedOut = StackNavigator({

    LoginScreen : {
        screen : loginScreen,
        navigationOptions : {
            mode: "card",
            title: "Sign in",
            headerMode: "Screen",
            header : null
        }
    },
    signUp : { screen : signUp }
},{
    headerMode: 'none'
},);

export const SignedIn = StackNavigator({
    rootnavigator : { screen : authScreen },
    addTodo : { screen : addTodo },
    editTodo: { screen : editTodo }
},{
    headerMode: 'none'
},);

export const createRootNavigator = (signedIn = false) => {
  return StackNavigator(
    {
      SignedIn: {
        screen: SignedIn,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      SignedOut: {
        screen: SignedOut,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      headerMode: "none",
      mode: "modal",
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
};

and here is login button code 

signIn() {

axios.post(BACKEND_URL+'/api/User/login', {
  userName: this.state.userName,
  password: this.state.password
})
.then( (response) => {
  if(response.data.message == 'Success'){
    // Set up root Auth Token and Headers
    axios.defaults.headers.common['Authorization'] = "bearer "+response.data.data.accessToken;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    AsyncStorage.setItem('@userData:', JSON.stringify(response.data.data));
    onSignIn().then(() => { this.props.navigation.navigate('SignedIn') });
    this.setState({ isLoading: false });
  }
})
.catch( (error) => {
  alert("Please check your crendentials")
});

}

Upvotes: 0

Views: 837

Answers (1)

Shahzad
Shahzad

Reputation: 1415

Instead of navigation.navigate try to navigation.dispatch to reset the routes to SignedIn StackNavigator. As,

Import NavigationActions from react-navigation. and use below code to dispatch your new route after user signedin.

onSignIn().then(() => { this.props.navigation.dispatch(
    NavigationActions.reset({
        index: 0,
        key: null,
        actions: [
            NavigationActions.navigate({ routeName: 'SignedIn' })
        ]
   })
)});

For more info read this Reset Navigation Action.

Upvotes: 2

Related Questions