Using Context API with React Native

Published on Sep 27, 2019

•

14 min read

•

REACT-NATIVE

cover

The React Context API lets you avoid passing props from parent to child at every level of the component tree. Neither you have to unnecessarily increase the complexity of the codebase using state management libraries like Redux. Consuming something like Firebase authentication and storage services with the Context API in a React Native or Expo apps is a great use case to try.

In this tutorial, I am going to show you how to setup Firebase email authentication in an Expo app using Context API. Before we get started, please note that I am going to use an Expo project that has:

You can download the source code in its current state from this Github repo before you begin.

After installing the source code, please navigate inside the project directory and install dependencies by running the following command:

yarn install


# or


npm install

Table of Contents

🔗
  • Requirements
  • Add Firebase Config & integrate Firebase SDK
  • Enable Firestore
  • Add Context API
  • Signup with Firebase
  • Handle Real-time/Server Errors
  • Login a Firebase user
  • Add a signout button
  • Check user auth state for automatic login
  • Conclusion

Requirements

🔗

To follow this tutorial, please make sure you following installed on your local development environment and access to the services mentioned below.

  • Nodejs (>= 10.x.x) with npm/yarn installed
  • expo-cli (>= 3.x.x), (previously known as create-react-native-app)
  • Firebase account, free tier will do

Add Firebase Config & integrate Firebase SDK

🔗

If you already know how to obtain Firebase API and storage keys, you can skip this section. Otherwise, you can follow along.

Create a new Firebase project from Firebase Console.

1

Next, fill in the suitable details regarding the Firebase project and click on Create project button.

2

You will be re-directed towards the dashboard of the Firebase project. Go to Project settings from the sidebar menu and copy the firebaseConfig object. It has all the necessary API keys that we need in order to use a Firebase project as the backend for any React Native or Expo app.

3

Next, go inside the Expo app and create a new directory called config. This folder will contain all the configuration files. Inside it, create Firebase/firebaseConfig.js file and paste the contents of the config object as below.

1// Replace all Xs with real Firebase API keys
2

3export default {
4  apiKey: 'XXXX',
5  authDomain: 'XXXX',
6  databaseURL: 'XXXX',
7  projectId: 'XXXX',
8  storageBucket: 'XXXX',
9  messagingSenderId: 'XXXX',
10  appId: 'XXXX'
11};

Next, from the terminal window, install Firebase SDK.

yarn add firebase

Back to the config/Firebase/ directory. Create a new file firebase.js. This will hold all the configuration related to integrate the Firebase SDK and the function it provides for authentication, real time database and so on.

Also, define a Firebase object with some initial methods that you are going to use in the tutorial. These methods are going to conduct real-time events such as user authentication, sign out from the app, and store the user details based on the reference to uid (unique user id Firebase creates for every registered user) in real-time NoSQL database called Cloud Firestore.

1import * as firebase from 'firebase';
2import 'firebase/auth';
3import 'firebase/firestore';
4import firebaseConfig from './firebaseConfig';
5

6// Initialize Firebase
7firebase.initializeApp(firebaseConfig);
8

9const Firebase = {
10  // auth
11  loginWithEmail: (email, password) => {
12    return firebase.auth().signInWithEmailAndPassword(email, password);
13  },
14  signupWithEmail: (email, password) => {
15    return firebase.auth().createUserWithEmailAndPassword(email, password);
16  },
17  signOut: () => {
18    return firebase.auth().signOut();
19  },
20  checkUserAuth: user => {
21    return firebase.auth().onAuthStateChanged(user);
22  },
23

24  // firestore
25  createNewUser: userData => {
26    return firebase
27      .firestore()
28      .collection('users')
29      .doc(`${userData.uid}`)
30      .set(userData);
31  }
32};
33

34export default Firebase;

This approach used with React's Context API will eliminate the use of Redux state management (which is the approach I worked with previously) library and simply use React principles. Populating the Firebase object with Context, you will be able to access all the functions as well as the user throughout this React Native app as props.

Enable Firestore

🔗

There are two types of cloud-based database services provided by Firebase. One is called Cloud Firestore, and the other one is known as Realtime Database. Realtime Database stores data as one large JSON tree. Complex and scalable data is hard to organize in it.

Cloud Firestore follows proper NoSQL terminology when it comes to storing data. It stores data in documents, and each document can have sub-collections—thus, making it suitable for scalable and complex data scenarios.

Go back to the Firebase console and in the Database section, choose the Cloud Firestore and click on the button Create database.

4

Then, choose the option Start in test mode and click the button Next as shown below.

5

Add Context API

🔗

The common reason to use Context API in a React Native app is that you need to share some data in different places or components in the component tree. Manually passing props can be tedious as well as hard to keep track of.

The Context API consists of three building blocks:

  • creating a context object
  • declaring a provider that gives the value
  • declaring a consumer that allows a value to be consumed (provided by the provider)

Create a new file inside the Firebase directory called context.js. Declare a FirebaseContext that is going to be an object.

1import React, { createContext } from 'react';
2

3const FirebaseContext = createContext({});

After creating the context, the next step is to declare a provider and a consumer.

1export const FirebaseProvider = FirebaseContext.Provider;
2

3export const FirebaseConsumer = FirebaseContext.Consumer;

Lastly, let us declare an HoC (High Order Component) to generalize this Firebase Context. An HoC in React is a function that takes a component and returns another component. What this HoC will do is instead of importing and using Firebase.Consumer in every component necessary, all there is to be done is just pass the component as the argument to the following HoC.

1export const withFirebaseHOC = Component => props =>
2  (
3    <FirebaseConsumer>
4      {state => <Component {...props} firebase={state} />}
5    </FirebaseConsumer>
6  );

You will understand with more clarity in the next section when modifying the existing Login and Signup component with this HoC. Now, create a new file index.js to export both the Firebase object from the firebase.js file, the provider and the HoC.

1import Firebase from './firebase';
2import { FirebaseProvider, withFirebaseHOC } from './context';
3

4export default Firebase;
5

6export { FirebaseProvider, withFirebaseHOC };

The provider has to grab the value from the context object for the consumer to use that value. This is going to be done in App.js file. The value for the FirebaseProvider is going to be the Firebase object with different strategies and functions to authenticate and store the user data in real-time database. Wrap the AppContainer with it.

1import React from 'react';
2import AppContainer from './navigation';
3import Firebase, { FirebaseProvider } from './config/Firebase';
4

5export default function App() {
6  return (
7    <FirebaseProvider value={Firebase}>
8      <AppContainer />
9    </FirebaseProvider>
10  );
11}

That's it for setting up the Firebase SDK.

Signup with Firebase

🔗

In this section, you are going to modify the existing Signup.js component in order to register a new user with the firebase backend and store their data in Firestore. To start, import the withFirebaseHOC.

1import { withFirebaseHOC } from '../config/Firebase';

Replace the handleSubmit() method with handleOnSignup(). Since all the input values are coming from Formik, you have to edit onSubmit prop on the Formik element too. The signupWithEmail is coming from firebase props and since you are already wrapping the navigation container with FirebaseProvider, this.props.firebase will make sure any method inside the Firebase object in the file config/Firebase/firebase.js is available to be used in this component.

The signupWithEmail method takes two arguments, email and password and using them, it creates a new user and saves their credentials. It then fetches the user id (uid) from the response when creating the new user. The createNewUser() method stores the user object userData inside the collection users. This user object contains the uid from the authentication response, the name, and email of the user entered in the signup form.

1handleOnSignup = async values => {
2    const { name, email, password } = values
3

4    try {
5      const response = await this.props.firebase.signupWithEmail(
6        email,
7        password
8      )
9

10      if (response.user.uid) {
11        const { uid } = response.user
12        const userData = { email, name, uid }
13        await this.props.firebase.createNewUser(userData)
14        this.props.navigation.navigate('App')
15      }
16    } catch (error) {
17      console.error(error)
18    }
19  }
20

21// replace with handleOnSignup
22

23onSubmit={values => {
24  this.handleOnSignup(values)
25}}

The logic behind saving the user object is the following:

1// config/Firebase/firebase.js
2createNewUser: userData => {
3  return firebase
4    .firestore()
5    .collection('users')
6    .doc(`${userData.uid}`)
7    .set(userData);
8};

Lastly, do not forget to export the Signup component inside the withFirebaseHOC.

1export default withFirebaseHOC(Signup);

Let see how it works.

f1

Since it is going to the Home screen, means that use is getting registered. To verify this, visit the Database section from Firebase Console Dashboard. You will find a users collection have one document with the uid.

6

To verify the uid, visit Authentication section.

7

Handle Real-time/Server Errors

🔗

To handle real-time or server errors, Formik has a solution to this. Now, understand that something valid on the client-side can be invalid on the server. Such as, when registering a new user with an already existing email in the Firebase storage should notify the user on the client-side by throwing an error.

To handle this, edit the onSubmit prop at the Formik element bypassing the second argument called actions.

1onSubmit={(values, actions) => {
2  this.handleOnSignup(values, actions)
3}}

Next, instead of just console logging the error values, to display the error, you will have to use setFieldError. This will set an error message in the catch block. Also, add a finally block that will avoid the form to submit in case of an error.

1handleOnSignup = async (values, actions) => {
2  const { name, email, password } = values;
3

4  try {
5    const response = await this.props.firebase.signupWithEmail(email, password);
6

7    if (response.user.uid) {
8      const { uid } = response.user;
9      const userData = { email, name, uid };
10      await this.props.firebase.createNewUser(userData);
11      this.props.navigation.navigate('App');
12    }
13  } catch (error) {
14    // console.error(error)
15    actions.setFieldError('general', error.message);
16  } finally {
17    actions.setSubmitting(false);
18  }
19};

Lastly, do display the error on the app screen, add an ErrorMessage just after the FormButton component.

1<View style={styles.buttonContainer}>
2  <FormButton
3    buttonType='outline'
4    onPress={handleSubmit}
5    title='SIGNUP'
6    buttonColor='#F57C00'
7    disabled={!isValid || isSubmitting}
8    loading={isSubmitting}
9  />
10</View>
11<ErrorMessage errorValue={errors.general} />

Now go back to the Signup form in the app and try registering the user with the same email id used in the previous step.

f2

Voila! It works! The error message is shown and it does not submit the form.

Login a Firebase user

🔗

As the previous section, similar number of steps have to be performed for the Login form to work. Instead of going through them individually, here is the complete Login component.

1import React, { Component, Fragment } from 'react';
2import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
3import { Button } from 'react-native-elements';
4import { Ionicons } from '@expo/vector-icons';
5import { Formik } from 'formik';
6import * as Yup from 'yup';
7import { HideWithKeyboard } from 'react-native-hide-with-keyboard';
8import FormInput from '../components/FormInput';
9import FormButton from '../components/FormButton';
10import ErrorMessage from '../components/ErrorMessage';
11import AppLogo from '../components/AppLogo';
12import { withFirebaseHOC } from '../config/Firebase';
13

14const validationSchema = Yup.object().shape({
15  email: Yup.string()
16    .label('Email')
17    .email('Enter a valid email')
18    .required('Please enter a registered email'),
19  password: Yup.string()
20    .label('Password')
21    .required()
22    .min(6, 'Password must have at least 6 characters ')
23});
24

25class Login extends Component {
26  state = {
27    passwordVisibility: true,
28    rightIcon: 'ios-eye'
29  };
30

31  goToSignup = () => this.props.navigation.navigate('Signup');
32

33  handlePasswordVisibility = () => {
34    this.setState(prevState => ({
35      rightIcon: prevState.rightIcon === 'ios-eye' ? 'ios-eye-off' : 'ios-eye',
36      passwordVisibility: !prevState.passwordVisibility
37    }));
38  };
39

40  handleOnLogin = async (values, actions) => {
41    const { email, password } = values;
42    try {
43      const response = await this.props.firebase.loginWithEmail(
44        email,
45        password
46      );
47

48      if (response.user) {
49        this.props.navigation.navigate('App');
50      }
51    } catch (error) {
52      actions.setFieldError('general', error.message);
53    } finally {
54      actions.setSubmitting(false);
55    }
56  };
57

58  render() {
59    const { passwordVisibility, rightIcon } = this.state;
60    return (
61      <SafeAreaView style={styles.container}>
62        <HideWithKeyboard style={styles.logoContainer}>
63          <AppLogo />
64        </HideWithKeyboard>
65        <Formik
66          initialValues={{ email: '', password: '' }}
67          onSubmit={(values, actions) => {
68            this.handleOnLogin(values, actions);
69          }}
70          validationSchema={validationSchema}
71        >
72          {({
73            handleChange,
74            values,
75            handleSubmit,
76            errors,
77            isValid,
78            touched,
79            handleBlur,
80            isSubmitting
81          }) => (
82            <Fragment>
83              <FormInput
84                name="email"
85                value={values.email}
86                onChangeText={handleChange('email')}
87                placeholder="Enter email"
88                autoCapitalize="none"
89                iconName="ios-mail"
90                iconColor="#2C384A"
91                onBlur={handleBlur('email')}
92              />
93              <ErrorMessage errorValue={touched.email && errors.email} />
94              <FormInput
95                name="password"
96                value={values.password}
97                onChangeText={handleChange('password')}
98                placeholder="Enter password"
99                secureTextEntry={passwordVisibility}
100                iconName="ios-lock"
101                iconColor="#2C384A"
102                onBlur={handleBlur('password')}
103                rightIcon={
104                  <TouchableOpacity onPress={this.handlePasswordVisibility}>
105                    <Ionicons name={rightIcon} size={28} color="grey" />
106                  </TouchableOpacity>
107                }
108              />
109              <ErrorMessage errorValue={touched.password && errors.password} />
110              <View style={styles.buttonContainer}>
111                <FormButton
112                  buttonType="outline"
113                  onPress={handleSubmit}
114                  title="LOGIN"
115                  buttonColor="#039BE5"
116                  disabled={!isValid || isSubmitting}
117                  loading={isSubmitting}
118                />
119              </View>
120              <ErrorMessage errorValue={errors.general} />
121            </Fragment>
122          )}
123        </Formik>
124        <Button
125          title="Don't have an account? Sign Up"
126          onPress={this.goToSignup}
127          titleStyle={{
128            color: '#F57C00'
129          }}
130          type="clear"
131        />
132      </SafeAreaView>
133    );
134  }
135}
136

137const styles = StyleSheet.create({
138  container: {
139    flex: 1,
140    backgroundColor: '#fff',
141    marginTop: 50
142  },
143  logoContainer: {
144    marginBottom: 15,
145    alignItems: 'center'
146  },
147  buttonContainer: {
148    margin: 25
149  }
150});
151

152export default withFirebaseHOC(Login);

Let us see how it works. For a successful login, use registered credentials.

f3

Add a signout button

🔗

Sign out button at this point is essential but since there is no app interface right now, I am going to put a simple button on the home screen. Open, Home.js file and import Button from react-native-elements.

Also, import withFirebaseHOC and add the Button component below the text.

1import React, { Component } from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3import { Button } from 'react-native-elements';
4import { withFirebaseHOC } from '../config/Firebase';
5

6class Home extends Component {
7  render() {
8    return (
9      <View style={styles.container}>
10        <Text>Home</Text>
11        <Button
12          title="Signout"
13          onPress={this.handleSignout}
14          titleStyle={{
15            color: '#F57C00'
16          }}
17          type="clear"
18        />
19      </View>
20    );
21  }
22}
23

24const styles = StyleSheet.create({
25  container: {
26    flex: 1,
27    backgroundColor: '#fff',
28    alignItems: 'center',
29    justifyContent: 'center'
30  }
31});
32

33export default withFirebaseHOC(Home);

Here is out the output.

8

Right now, this button doesn't do anything. You will have to add the handleSignout method as below.

1handleSignOut = async () => {
2  try {
3    await this.props.firebase.signOut();
4    this.props.navigation.navigate('Auth');
5  } catch (error) {
6    console.log(error);
7  }
8};

Go back to the home screen and login into the app. Once the home screen is displayed, click the button Signout.

f4

Check user auth state for automatic login

🔗

Right now, whenever the user successfully logs in or registers it does lead to the Home screen of the app but on refreshing the simulator, the navigation pattern takes back to the login screen.

In this section, you are going to add a small authentication check using Firebase method onAuthStateChanged() that takes the current user as the argument if they are logged in.

The auth check is going to do at the same point when the application is loading assets, that is, the Initial screen component. It has been already hooked in the navigation pattern to be the first screen or the initial route.

1// navigation.js
2

3import { createSwitchNavigator, createAppContainer } from 'react-navigation';
4import Initial from '../screens/Initial';
5import AuthNavigation from './AuthNavigation';
6import AppNavigation from './AppNavigation';
7

8const SwitchNavigator = createSwitchNavigator(
9  {
10    Initial: Initial,
11    Auth: AuthNavigation,
12    App: AppNavigation
13  },
14  {
15    initialRouteName: 'Initial'
16  }
17);
18

19const AppContainer = createAppContainer(SwitchNavigator);
20

21export default AppContainer;

Using the lifecycle method inside the Initial.js, the authentication status of whether is user is logged in the app or not can be checked.

Start by importing the Firebase HoC in the file screens/Initial.js.

1import { withFirebaseHOC } from '../config/Firebase';

Next, inside the componendDidMount method add the following. If the user has previously logged in, the navigation flow will directly take the user to the Home screen. If the is not logged in, it will show the Login screen.

1componentDidMount = async () => {
2  try {
3    // previously
4    this.loadLocalAsync();
5

6    await this.props.firebase.checkUserAuth(user => {
7      if (user) {
8        // if the user has previously logged in
9        this.props.navigation.navigate('App');
10      } else {
11        // if the user has previously signed out from the app
12        this.props.navigation.navigate('Auth');
13      }
14    });
15  } catch (error) {
16    console.log(error);
17  }
18};
19

20// Don't forget to export
21export default withFirebaseHOC(Initial);

Let us see it in action. Even after refreshing the app, the authenticated user stays logged in.

f5

Conclusion

🔗

Congratulations! 🎉 If you have come this far, I am hope enjoyed reading this post. These are some of the strategies I try to follow with any Firebase + React Native + Expo project. I hope any of the codebase used in this tutorial helps you.

To find the complete code, you will have to visit this Github repo release.

Share this article on Twitter

More Posts

Browse all posts

⬅️ Previous: Changing app themes using React Native, Styled Components and Redux

Next: How Authentication Flow works in React Native apps using React Navigation 4.x ➡️

Mico Dan

 
 

Twitter

I'm a FullStack Developer and a technical writer. In this blog, I write about Technical writing, Node.js, React Native and Expo.