Update docs

satya164 · satya164 · commit 7c12bbefe829 · 2025-04-17T20:40:58.000+02:00
diff --git a/versioned_docs/version-7.x/auth-flow.md b/versioned_docs/version-7.x/auth-flow.md
@@ -30,12 +30,12 @@ We want the following behavior from our authentication flow:
 
 ## How it will work
 
-We can configure different screens to be available based on some condition. For example, if the user is signed in, we can define `Home`, `Profile`, `Settings` etc. If the user is not signed in, we can define `SignIn` and `SignUp` screens.
+We can configure different screens to be available based on some condition. For example, if the user is signed in, we want `Home` to be available. If the user is not signed in, we want `SignIn` to be available.
 
 <Tabs groupId="config" queryString="config">
 <TabItem value="static" label="Static" default>
 
-```js name="Customizing tabs appearance" snack
+```js name="Authentication flow" snack
 import * as React from 'react';
 import { View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
@@ -50,36 +50,15 @@ const useIsSignedOut = () => {
 };
 
 // codeblock-focus-start
-const signedInStack = createNativeStackNavigator({
-  screens: {
-    Home: HomeScreen,
-    Profile: ProfileScreen,
-    Settings: SettingsScreen,
-  },
-});
-
-const signedOutStack = createNativeStackNavigator({
-  screens: {
-    SignIn: SignInScreen,
-    SignUp: SignUpScreen,
-  },
-});
-
 const RootStack = createNativeStackNavigator({
   screens: {
-    LoggedIn: {
+    Home: {
       if: useIsSignedIn,
-      screen: signedInStack,
-      options: {
-        headerShown: false,
-      },
+      screen: HomeScreen,
     },
-    LoggedOut: {
+    SignIn: {
       if: useIsSignedOut,
-      screen: signedOutStack,
-      options: {
-        headerShown: false,
-      },
+      screen: SignInScreen,
     },
   },
 });
@@ -95,150 +74,96 @@ function HomeScreen() {
   return <View />;
 }
 
-function ProfileScreen() {
+function SignInScreen() {
   return <View />;
 }
+```
 
-function SettingsScreen() {
-  return <View />;
-}
+Here, for each screen, we have defined a condition using the `if` property which takes a hook. The hook returns a boolean value indicating whether the user is signed in or not. If the hook returns `true`, the screen will be available, otherwise it won't.
 
-function SignInScreen() {
-  return <View />;
+When `useIsSignedIn` returns `true`, React Navigation will only use the `Home` screen, and when it returns `false`, React Navigation will use the `SignIn` screen. This makes it impossible to navigate to the `Home` when the user is not signed in, and to `SignIn` when the user is signed in.
+
+The magic happens when the value returned by `useIsSignedin` changes. Let's say, initially `useIsSignedIn` returns `false`. This means that `SignIn` screens is shown. After the user signs in, the return value of `useIsSignedIn` will change to `true`. React Navigation will see that the `SignIn` screen is no longer defined and so it will remove it. Then it'll show the `Home` screen automatically because that's the first screen defined when `useIsSignedIn` returns `true`.
+
+## Define the hooks
+
+To implement the `useIsSignedIn` and `useIsSignedOut` hooks, we can start by creating a context to store the authentication state. Let's call it `SignInContext`:
+
+```js
+import * as React from 'react';
+
+const SignInContext = React.createContext();
+```
+
+Then we can implement the `useIsSignedIn` and `useIsSignedOut` hooks as follows:
+
+```js
+function useIsSignedIn() {
+  const isSignedIn = React.useContext(SignInContext);
+  return isSignedIn;
 }
 
-function SignUpScreen() {
-  return <View />;
+function useIsSignedOut() {
+  const isSignedIn = React.useContext(SignInContext);
+  return !isSignedIn;
 }
 ```
 
+We'll discuss how to provide the context value later.
+
 </TabItem>
 
 <TabItem value="dynamic" label="Dynamic">
 
-```js name="Customizing tabs appearance" snack
+```js name="Authentication flow" snack
 import * as React from 'react';
 import { View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 const Stack = createNativeStackNavigator();
 
-const useIsSignedIn = () => {
-  return true;
-};
-
-const useIsSignedOut = () => {
-  return !useIsSignedIn();
-};
-
 export default function App() {
-  // codeblock-focus-start
-  const isSignedIn = useIsSignedIn();
+  const isSignedIn = true;
 
   return (
     <NavigationContainer>
       <Stack.Navigator>
+        // codeblock-focus-start
         {isSignedIn ? (
-          <Stack.Group>
-            <Stack.Screen name="Home" component={HomeScreen} />
-            <Stack.Screen name="Profile" component={ProfileScreen} />
-            <Stack.Screen name="Settings" component={SettingsScreen} />
-          </Stack.Group>
+          <Stack.Screen name="Home" component={HomeScreen} />
         ) : (
-          <Stack.Group>
-            <Stack.Screen name="SignIn" component={SignInScreen} />
-            <Stack.Screen name="SignUp" component={SignUpScreen} />
-          </Stack.Group>
+          <Stack.Screen name="SignIn" component={SignInScreen} />
         )}
+        // codeblock-focus-end
       </Stack.Navigator>
     </NavigationContainer>
   );
-  // codeblock-focus-end
 }
 
 function HomeScreen() {
   return <View />;
 }
 
-function ProfileScreen() {
-  return <View />;
-}
-
-function SettingsScreen() {
-  return <View />;
-}
-
 function SignInScreen() {
   return <View />;
 }
-
-function SignUpScreen() {
-  return <View />;
-}
 ```
 
-</TabItem>
-</Tabs>
+Here, we have conditionally defined the screens based on the value of `isSignedIn`.
 
-When `useIsSignedIn` returns `true`, React Navigation will only see the `Home`, `Profile` and `Settings` screens, and when it returns `false`, React Navigation will see the `SignIn` and `SignUp` screens. This makes it impossible to navigate to the `Home`, `Profile` and `Settings` screens when the user is not signed in, and to `SignIn` and `SignUp` screens when the user is signed in.
+When `isSignedIn` is `true`, React Navigation will only see the `Home` screen, and when it returns `false`, React Navigation will see the `SignIn` screen. This makes it impossible to navigate to the `Home` when the user is not signed in, and to `SignIn` when the user is signed in.
 
 This pattern has been in use by other routing libraries such as React Router for a long time, and is commonly known as "Protected routes". Here, our screens which need the user to be signed in are "protected" and cannot be navigated to by other means if the user is not signed in.
 
-The magic happens when the value returned by `useIsSignedin` changes. Let's say, initially `useIsSignedIn` returns `false`. This means, either `SignIn` or `SignUp` screens are shown. After the user signs in, the return value of `useIsSignedIn` will change to `true`. React Navigation will see that the `SignIn` and `SignUp` screens are no longer defined and so it will remove them. Then it'll show the `Home` screen automatically because that's the first screen defined when `useIsSignedIn` returns `true`.
-
-The example shows stack navigator, but you can use the same approach with any navigator.
-
-By conditionally defining different screens based on a variable, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown.
-
-To do this, we need a couple of things:
-
-<Tabs groupId="config" queryString="config">
-<TabItem value="static" label="Static" default>
-
-1. Define two hooks: `useIsSignedIn` and `useIsSignedOut`, which return a boolean value indicating whether the user is signed in or not.
-2. Use the `useIsSignedIn` and `useIsSignedOut` along with the [`if`](static-configuration.md#if) property to define the screens that are available based on the condition.
-
-</TabItem>
-
-<TabItem value="dynamic" label="Dynamic">
-
-1. Define two hooks: `useIsSignedIn` and `useIsSignedOut`, which return a boolean value indicating whether the user is signed in or not.
-2. Use the `useIsSignedIn` and `useIsSignedOut` along with conditional rendering to define the screens that are available based on the condition.
+The magic happens when the value of `isSignedin` changes. Let's say, initially `isSignedIn` returns `false`. This means that `SignIn` screens is shown. After the user signs in, the value of `isSignedIn` will change to `true`. React Navigation will see that the `SignIn` screen is no longer defined and so it will remove it. Then it'll show the `Home` screen automatically because that's the first screen defined when `isSignedIn` is `true`.
 
 </TabItem>
 </Tabs>
-This tells React Navigation to show specific screens based on the signed in status. When the signed in status changes, React Navigation will automatically show the appropriate screen.
 
-## Define the hooks
+## Add more screens
 
-To implement the `useIsSignedIn` and `useIsSignedOut` hooks, we can start by creating a context to store the authentication state. Let's call it `SignInContext`:
-
-```js
-import * as React from 'react';
-
-const SignInContext = React.createContext();
-```
-
-Then we can implement the `useIsSignedIn` and `useIsSignedOut` hooks as follows:
-
-```js
-function useIsSignedIn() {
-  const isSignedIn = React.useContext(SignInContext);
-  return isSignedIn;
-}
-
-function useIsSignedOut() {
-  const isSignedIn = React.useContext(SignInContext);
-  return !isSignedIn;
-}
-```
-
-We'll discuss how to expose the context value later.
-
-## Define our screens
-
-In our navigator, we can conditionally define appropriate screens. For our case, let's say we have 3 screens:
+For our case, let's say we have 3 screens:
 
 - `SplashScreen` - This will show a splash or loading screen when we're restoring the token.
 - `SignIn` - This is the screen we show if the user isn't signed in already (we couldn't find a token).
@@ -357,7 +282,7 @@ The main thing to notice is that we're conditionally defining screens based on t
 - `SignIn` screen is only defined if `userToken` is `null` (user is not signed in)
 - `Home` screen is only defined if `userToken` is non-null (user is signed in)
 
-Here, we're conditionally defining one screen for each case. But you could also define multiple screens. For example, you probably want to define password reset, signup, etc screens as well when the user isn't signed in. Similarly, for the screens accessible after signing in, you probably have more than one screen. We can use `React.Fragment` to define multiple screens:
+Here, we're conditionally defining one screen for each case. But you could also define multiple screens. For example, you probably want to define password reset, signup, etc screens as well when the user isn't signed in. Similarly, for the screens accessible after signing in, you probably have more than one screen. We can use [`React.Fragment`](https://react.dev/reference/react/Fragment) or [`Group`](group.md) to define multiple screens:
 
 ```js
 isSignedIn ? (
@@ -374,15 +299,15 @@ isSignedIn ? (
 );
 ```
 
-</TabItem>
-</Tabs>
-
 :::tip
 
-If you have both your login-related screens and rest of the screens in Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout.
+If you have both your login-related screens and rest of the screens in two different Stack navigators and render them conditionally, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout.
 
 :::
 
+</TabItem>
+</Tabs>
+
 ## Implement the logic for restoring the token
 
 :::note
@@ -393,8 +318,8 @@ The following is just an example of how you might implement the logic for authen
 
 From the previous snippet, we can see that we need 3 state variables:
 
-- `isLoading` - We set this to `true` when we're trying to check if we already have a token saved in `SecureStore`
-- `isSignout` - We set this to `true` when user is signing out, otherwise set it to `false`
+- `isLoading` - We set this to `true` when we're trying to check if we already have a token saved in `SecureStore`.
+- `isSignout` - We set this to `true` when user is signing out, otherwise set it to `false`. This can be used to customize the animation when signing out.
 - `userToken` - The token for the user. If it's non-null, we assume the user is logged in, otherwise not.
 
 So we need to:
@@ -590,11 +515,11 @@ const RootStack = createNativeStackNavigator({
       screen: HomeScreen,
     },
     SignIn: {
+      if: useIsSignedOut,
       screen: SignInScreen,
       options: {
         title: 'Sign in',
       },
-      if: useIsSignedOut,
     },
   },
 });
@@ -946,6 +871,10 @@ If you have a bunch of shared screens, you can also use [`navigationKey` with a
 </TabItem>
 </Tabs>
 
+The examples above show stack navigator, but you can use the same approach with any navigator.
+
+By specifying a condition for our screens, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown.
+
 ## Don't manually navigate when conditionally rendering screens
 
 It's important to note that when using such a setup, you **don't manually navigate** to the `Home` screen by calling `navigation.navigate('Home')` or any other method. **React Navigation will automatically navigate to the correct screen** when `isSignedIn` changes - `Home` screen when `isSignedIn` becomes `true`, and to `SignIn` screen when `isSignedIn` becomes `false`. You'll get an error if you attempt to navigate manually.
