title: How do I implement firebase auth in react navigation 5 auth flow?
body: <p>I'm trying to add firebase auth for sign up, sign in and sign out in my app. I followed the code structure from the react-navigation website. This is the context file...</p>
  <pre><code>import React from 'react';
  
  export const AuthContext = React.createContext();
  </code></pre>
  <p>and this is my App file. For the sign-in, I'm using email and password. For the sign-up, I want to add an email, username, and password.</p>
  <pre><code>import React, { useContext, useState, useReducer, useEffect, useMemo } from 'react';
  import { Home, Profile, Settings, Chat, Phone } from &quot;./src/screens&quot;;
  import {
    NavigationContainer,
    DefaultTheme as NavigationDefaultTheme,
    DarkTheme as NavigationDarkTheme
  } from '@react-navigation/native';
  import {
    Provider as PaperProvider,
    DefaultTheme as PaperDefaultTheme,
    DarkTheme as PaperDarkTheme
  } from 'react-native-paper';
  import { createDrawerNavigator } from '@react-navigation/drawer';
  import AsyncStorage from '@react-native-community/async-storage';
  import Fire from './src/api/Fire';
  import firebase from 'firebase';
  
  import AppTabs from &quot;./src/stacks/AppTabs&quot;;
  import AuthStack from &quot;./src/stacks/AuthStack&quot;;
  import { DrawerContent } from &quot;./src/screens/DrawerContent&quot;;
  import Spinner from &quot;./src/components/Spinner&quot;;
  import { AuthContext } from './src/components/Context';
  
  
  const Drawer = createDrawerNavigator();
  
  
  export default function App() {
    const [isDarkTheme, setIsDarkTheme] = useState(false);
  
    {/* Themes */ }
    const CustomDefaultTheme = {
      ...NavigationDefaultTheme,
      ...PaperDefaultTheme,
      colors: {
        ...NavigationDefaultTheme.colors,
        ...PaperDefaultTheme.colors,
        background: '#ffffff',
        text: '#333333'
      }
    }
  
    const CustomDarkTheme = {
      ...NavigationDarkTheme,
      ...PaperDarkTheme,
      colors: {
        ...NavigationDarkTheme.colors,
        ...PaperDarkTheme.colors,
        background: '#333333',
        text: '#ffffff'
      }
    }
  
    const theme = isDarkTheme ? CustomDarkTheme : CustomDefaultTheme;
  
    const [state, dispatch] = useReducer(
      (prevState, action) =&gt; {
        switch (action.type) {
          case 'RESTORE_TOKEN':
            return {
              ...prevState,
              userToken: action.token,
              isLoading: false,
            };
          case 'SIGN_IN':
            return {
              ...prevState,
              email: action.id,
              isSignout: false,
              userToken: action.token,
              isLoading: false,
            };
          case 'SIGN_OUT':
            return {
              ...prevState,
              email: null,
              isSignout: true,
              userToken: null,
              isLoading: false,
            };
          case 'REGISTER':
            return {
              ...prevState,
              email: action.id,
              isLoading: false,
              userToken: action.token,
            };
        }
      },
      {
        isLoading: true,
        isSignout: false,
        email: null,
        userToken: null,
      }
    );
  
  
    const authContext = useMemo(() =&gt; ({
      signIn: async data =&gt; {
        // In a production app, we need to send some data (usually username, password) to server and get a token
        // We will also need to handle errors if sign in failed
        // After getting token, we need to persist the token using `AsyncStorage`
        // In the example, we'll use a dummy token
  
        dispatch({ type: 'SIGN_IN', id: email, token: userToken });
      },
      signOut: async data =&gt; {
        dispatch({ type: 'SIGN_OUT' })
      },
      signUp: async data =&gt; {
        // In a production app, we need to send user data to the server and get a token
        // We will also need to handle errors if sign up failed
        // After getting token, we need to persist the token using `AsyncStorage`
        // In the example, we'll use a dummy token
  
        dispatch({ type: 'REGISTER', id: email, token: userToken });
      },
      toggleTheme: () =&gt; {
        setIsDarkTheme(isDarkTheme =&gt; !isDarkTheme);
      }
    }),
      []
    );
  
  
    useEffect(() =&gt; {
      setTimeout(async () =&gt; {
        let userToken;
        userToken = null;
        try {
          userToken = await AsyncStorage.getItem('userToken');
        } catch (e) {
          console.log(e);
        }
        dispatch({ type: 'RESTORE_TOKEN', token: userToken });
      }, 1000);
    }, []);
  
    if (state.isLoading) {
      return (
        &lt;Spinner /&gt;
      );
    }
  
    return (
      &lt;PaperProvider theme={theme}&gt;
        &lt;AuthContext.Provider value={authContext}&gt;
          &lt;NavigationContainer theme={theme}&gt;
            {state.userToken !== null ? (
              &lt;Drawer.Navigator drawerContent={props =&gt; &lt;DrawerContent {...props} /&gt;} &gt;
                &lt;Drawer.Screen name=&quot;HomeDrawer&quot; component={AppTabs} /&gt;
                &lt;Drawer.Screen name=&quot;ProfileDrawer&quot; component={Profile} /&gt;
                &lt;Drawer.Screen name=&quot;SettingsDrawer&quot; component={Settings} /&gt;
                &lt;Drawer.Screen name=&quot;PhoneDrawer&quot; component={Phone} /&gt;
              &lt;/Drawer.Navigator&gt;
            )
              :
              &lt;AuthStack /&gt;
            }
          &lt;/NavigationContainer&gt;
        &lt;/AuthContext.Provider&gt;
      &lt;/PaperProvider&gt;
    )
  }
  </code></pre>
  <p>The firebase API keys have been initialized in this imported file.</p>
  <pre><code>import Fire from './src/api/Fire';
  </code></pre>
  <p>I have seen some code that wraps FirebaseAuth around the <code>NavigationContainer</code>, wouldn't <code>AuthContext.Provider</code> do the same thing?</p>
  <p>I'm calling the <code>SingIn</code> and <code>SignUp</code> on their respective screens using <code>useContext</code>, like this</p>
  <pre><code>const { signUp } = useContext(AuthContext); // signup screen
  const { signIn } = useContext(AuthContext); // signin screen
  </code></pre>
  <p>then using them in the onPress function like <code>onPress={()=&gt;{signUp(email, username, paswword)}}</code></p>