|
2 | 2 | id: auth-flow |
3 | 3 | title: Authentication flows |
4 | 4 | sidebar_label: Authentication flows |
5 | | ---- |
| 5 | +--- |
| 6 | + |
| 7 | +Most apps require that a user authenticate in some way to have access to data associated with a user or other private content. Typically the flow will look like this: |
| 8 | + |
| 9 | +* The user opens the app. |
| 10 | +* The app loads some authentication state from persistent storage (for example, `AsyncStorage`). |
| 11 | +* When the state has loaded, the user is presented with either authentication screens or the main app, depending on whether valid authentication state was loaded. |
| 12 | +* When the user signs out, we clear the authentication state and send them back to authentication screens. |
| 13 | + |
| 14 | +> Note: we say "authentication screens" because usually there is more than one. You may have a main screen with a username and password field, another for "forgot password", and another set for sign up. |
| 15 | +
|
| 16 | +## Set up our navigators |
| 17 | + |
| 18 | +```js |
| 19 | +import { StackNavigator, SwitchNavigator } from 'react-navigation'; |
| 20 | + |
| 21 | +// Implementation of HomeScreen, OtherScreen, SignInScreen, LoadingScreen |
| 22 | +// goes here. |
| 23 | + |
| 24 | +const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen }); |
| 25 | +const AuthStack = StackNavigator({ SignIn: SignInScreen }); |
| 26 | + |
| 27 | +export default SwitchNavigator( |
| 28 | + { |
| 29 | + AuthLoading: AuthLoadingScreen, |
| 30 | + App: AppStack, |
| 31 | + Auth: AuthStack, |
| 32 | + }, |
| 33 | + { |
| 34 | + initialRouteName: 'AuthLoading', |
| 35 | + } |
| 36 | +); |
| 37 | +``` |
| 38 | +<a href="https://snack.expo.io/@react-navigation/auth-flow" target="blank" class="run-code-button">→ Run this code</a> |
| 39 | + |
| 40 | +You may not be familiar with `SwitchNavigator` yet. The purpose of `SwitchNavigator` is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that we want from the authentication flow: when users sign in, we want to throw away the state of the authentication flow and unmount all of the screens, and when we press the hardware back button we expect to not be able to go back to the authentication flow. We switch between routes in the `SwitchNavigator` by using the `navigate` action. You can read more about the `SwitchNavigator` in the [API reference](/docs/switch-navigator). |
| 41 | + |
| 42 | +We set the `initialRouteName` to `'AuthLoading'` because we will fetch our authentication state from persistent storage inside of that screen component. |
| 43 | + |
| 44 | +## Implement our authentication loading screen |
| 45 | + |
| 46 | +```js |
| 47 | +import React from 'react'; |
| 48 | +import { |
| 49 | + ActivityIndicator, |
| 50 | + AsyncStorage, |
| 51 | + StatusBar, |
| 52 | + StyleSheet, |
| 53 | + View, |
| 54 | +} from 'react-native'; |
| 55 | + |
| 56 | +class AuthLoadingScreen extends React.Component { |
| 57 | + constructor() { |
| 58 | + super(); |
| 59 | + this._bootstrapAsync(); |
| 60 | + } |
| 61 | + |
| 62 | + // Fetch the token from storage then navigate to our appropriate place |
| 63 | + _bootstrapAsync = async () => { |
| 64 | + const userToken = await AsyncStorage.getItem('userToken'); |
| 65 | + |
| 66 | + // This will switch to the App screen or Auth screen and this loading |
| 67 | + // screen will be unmounted and thrown away. |
| 68 | + this.props.navigation.navigate(userToken ? 'App' : 'Auth'); |
| 69 | + }; |
| 70 | + |
| 71 | + // Render any loading content that you like here |
| 72 | + render() { |
| 73 | + return ( |
| 74 | + <View style={styles.container}> |
| 75 | + <ActivityIndicator /> |
| 76 | + <StatusBar barStyle="default" /> |
| 77 | + </View> |
| 78 | + ); |
| 79 | + } |
| 80 | +} |
| 81 | +``` |
| 82 | +<a href="https://snack.expo.io/@react-navigation/auth-flow" target="blank" class="run-code-button">→ Run this code</a> |
| 83 | + |
| 84 | +## Fill in other components |
| 85 | + |
| 86 | +Our `App` and `Auth` routes are both `StackNavigators`, but you could do whatever you like here. As mentioned above, you probably want your authentication route to be a stack for password reset, signup, etc. Similarly for your app, you probbaly have more than one screen. We won't talk about how to implement the text inputs and buttons for the authentication screen, that is outside of the scope of navigation. We'll just fill in some placeholder content. |
| 87 | + |
| 88 | +```js |
| 89 | +class SignInScreen extends React.Component { |
| 90 | + static navigationOptions = { |
| 91 | + title: 'Please sign in', |
| 92 | + }; |
| 93 | + |
| 94 | + render() { |
| 95 | + return ( |
| 96 | + <View style={styles.container}> |
| 97 | + <Button title="Sign in!" onPress={this._signInAsync} /> |
| 98 | + </View> |
| 99 | + ); |
| 100 | + } |
| 101 | + |
| 102 | + _signInAsync = async () => { |
| 103 | + await AsyncStorage.setItem('userToken', 'abc'); |
| 104 | + this.props.navigation.navigate('App'); |
| 105 | + }; |
| 106 | +} |
| 107 | + |
| 108 | +class HomeScreen extends React.Component { |
| 109 | + static navigationOptions = { |
| 110 | + title: 'Welcome to the app!', |
| 111 | + }; |
| 112 | + |
| 113 | + render() { |
| 114 | + return ( |
| 115 | + <View style={styles.container}> |
| 116 | + <Button title="Show me more of the app" onPress={this._showMoreApp} /> |
| 117 | + <Button title="Actually, sign me out :)" onPress={this._signOutAsync} /> |
| 118 | + </View> |
| 119 | + ); |
| 120 | + } |
| 121 | + |
| 122 | + _showMoreApp = () => { |
| 123 | + this.props.navigation.navigate('Other'); |
| 124 | + }; |
| 125 | + |
| 126 | + _signOutAsync = async () => { |
| 127 | + await AsyncStorage.clear(); |
| 128 | + this.props.navigation.navigate('Auth'); |
| 129 | + }; |
| 130 | +} |
| 131 | + |
| 132 | +// More code like OtherScreen omitted for brevity |
| 133 | +``` |
| 134 | +<a href="https://snack.expo.io/@react-navigation/auth-flow" target="blank" class="run-code-button">→ Run this code</a> |
| 135 | + |
| 136 | +That's about all there is to it. At the moment, `SwitchNavigator` doesn't support animating between screens. Let us know if this is important to you [on Canny](https://react-navigation.canny.io/feature-requests). |
0 commit comments