When to navigate from Authentication SwitchNavigator? - react-native

Question

I'm setting up authentication flow in my React Native app, and I can pretty much get everything to work, except I can't figure out the actual proper place to navigate to the logged in stack with this.props.navigation.navigate("Main");.
I have a Switch Navigator at the top of my app rendering the auth stack (its own switch nav) and the main stack:
// App.js
const AppContainer = createAppContainer(
createSwitchNavigator({
Auth: AuthNavigator,
Main: MainTabNavigator,
})
);
export default class App extends Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<AppContainer />
</View>
</Provider>
);
}
}
The login screen is a complete dummy setup for now (it calls a local api and succeeds no matter what). Note the conditional at the start of the render method:
// LoginView.js
class LoginView extends Component {
state = { username: "", password: "" };
handleLogin() {
this.props.login.call(this);
}
render() {
if (this.props.user) {
this.props.navigation.navigate("Main");
return null;
}
return (
<View style={styles.container}>
<Overlay>
<View style={styles.modalContainer}>
<DotIndicator color={"darkgrey"} />
<Text>Logging in...</Text>
</View>
</Overlay>
// ... input components ...
<Button
title="Login"
onPress={this.handleLogin.bind(this)}
/>
</View>
);
}
}
export default connect(
state => ({
isLoading: state.auth.isLoading,
user: state.auth.user,
error: state.auth.error
}),
{ login }
)(LoginView);
Now, this technically works but I get the error Warning: Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state..
I understand this to be thrown because I'm calling the navigate inside of the render. Makes sense.
I've tried navigating from my login action:
export function login() {
return dispatch => {
dispatch({ type: "LOGIN_START" });
fetch(url) // this will need to be a POST session (not a GET user)
.then(res => res.json())
.then(users => {
dispatch({ type: "LOGIN_SUCCESS", payload: users[0] });
console.log("Login succeeded");
this.props.navigation.navigate("Main");
})
.catch(error => {
console.warn("login failed");
dispatch({ type: "LOGIN_FAILURE", payload: error });
});
};
}
And it works but of course is very wrong in terms of separation of concerns, and this kind of solution also doesn't really stretch as far when I try use it for handling login failure.
I've also thought about doing it in my handleLogin() function (called by my login button), with and without async/await:
async handleLogin() {
await this.props.login.call(this);
console.log("Navigating to main screen");
this.props.navigation.navigate("Main");
}
But the navigation happens before the action finishes and the user is logged in, which is of course unacceptable once the auth flow is real. (Plus, when I do it with async/await, "Login Succeeded" gets logged twice! Beats me). It does feel like I'm on the right track doing it in my handleLogin() function.
Where do I put my navigate call?

Answer 1

I appear to have found something that works, but it takes steps away from Redux, and that makes me slightly uncomfortable.
I've taken all the fetching out of the Redux action and put it right in my LoginView. I'm considering this okay in Redux terms, because the only place the program needs to know about the authorization process and state is in the authorization flow itself (in the LoginView itself, for now). The only thing the store and the rest of the app need to know is the info for the user.
So I've replaced my Redux login action with a simple assignUser action. I've refactored the fetching into performLogin, which I call from the old handleLogin, after posting a state change to activate my "Logging in..." overlay.
// authActions.js
export function assignUser(user) {
return dispatch => {
console.log("user", user);
dispatch({ type: "LOGIN_SUCCESS", payload: user });
};
}
// from LoginView.js
performLogin() {
fetch("http://127.0.0.1:3000/users") // this will need to be a POST session (not a GET user)
.then(res => res.json())
.then(users => {
console.log("Login succeeded");
this.props.assignUser(users[0]);
console.log("Navigating to main screen");
this.props.navigation.navigate("Main");
})
.catch(error => {
console.warn("login failed", error);
this.setState({isLoading: false})
});
}
handleLogin() {
this.setState({ isLoading: true }, this.performLogin);
}
The rest of the LoginView component is the same as in my original post.
I'd still love to know if anyone has any methods for accomplishing this that keep the actions fully within Redux.