DEV Community: Ayanwumi Abdulroheem Tunde

How To Install React-Native on Windows, A Step-By-Step Guide. Possible Errors And How To Fix Them

Ayanwumi Abdulroheem Tunde — Tue, 09 Jan 2024 19:31:10 +0000

INTRODUCTION.

In the dynamic world of app development, React Native stands tall as a game-changing framework, allowing developers to create cross-platform applications with unparalleled ease. If you're a Windows user eager to harness the potential of React Native, you've come to the right place.

In this comprehensive guide, I'll walk you through the step-by-step process of installing React Native on your Windows machine. Whether you're a seasoned developer exploring new tools or a newcomer eager to dive into the world of app development, this tutorial will equip you with the knowledge and tools needed to kickstart your React Native journey.

From setting up the necessary dependencies to configuring your development environment.
Ready to elevate your development experience? Let's get started!

NOTE: This article covers the installation of react native version 0.73 upwards.

INSTALLING THE NECESSARY TOOLS AND DEPENDENCIES.

NODE
The first thing you have to install is Node. Make sure Node is installed on your machine if you haven't you can get it here by downloading the LTS version (Long Term Support).
Note: Node V18 or higher is recommended for installing react native with version 0.73 or higher.

You can check the version of node installed on your system by running the following command.

node --version

ANDROID STUDIO.
The next thing you have to install is Android Studio, Android studio helps in building and installing our app on Android. You can download and install Android Studio here. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

Android SDK
Android SDK Platform
Android Virtual Device

JAVA DEVELOPMENT KIT (JDK)
Another thing that has to be installed on your machine is Java development kit (JDK). You can get this from different sites e.g. Open JDK, OpenLogic, and others. There are different versions of Java but for react native V0.73, JDK 17 is strongly recommended, you can get the JDK 17 here, just download and install it on your system.

After installing Java, you can check the version you have installed by running the following command in your terminal.

java --version

You should see something similar to the picture below after running the command.

You can also find the location of the folder of your installed Java by checking the program files on your system. In my case I installed my Java from OpenLogic, you can choose to install from any source, just make sure the location(path) is correct when adding it to the environment variables

SETTING UP YOUR ANDROID STUDIO.

The next thing is to set up your Android studio, the following must be installed in your Android studio. In your Android Studio, navigate to the SDK Manager tab by clicking the “more actions” button then select SDK Manager.

Then in your SDK manager, under the SDK platforms, make sure the following are installed and checked.

Android API 34
Android 13.0 (“Tiramisu”)

You can ignore other packages installed in the picture below, the ones mentioned above are the most important.

Under the SDK tools tab in your Android studio, ensure the following are installed as well.

Android SDK Build-Tools 34
Android SDK Command-line tools (latest)
Android emulator
Android emulator hypervisor driver
Android SDK Platform-Tools
Google Play Licensing Library
Intel x86 Emulator Accelerator (HAXM installer).

ADDING THE NECESSARY ENVIRONMENT VARIABLES.

The next thing is to add the necessary environmental variables to your system variables, these variables are needed for your react native to run effectively. But before that, you have to take note of the Android SDK location on your system, you can find this in your Android studio in the SDK manager, just like the one in the picture below.

Now go to the environment variables on your system, you can find this by searching for environment variables on your system and then opening it up, once it opens, click on environment variables. There are two different types of variables, the first one is the user variables while the second one is the system variables. For the user variables, add the following:

ANDROID_HOME
ANDROID_SDK_ROOT

The two variables above should point to the Android SDK location on your system (you can get this from Android Studio).

JAVA_HOME

The JAVA_HOME variable should point to the location of Java installed on your system. You can get this by going to your C directory and check under the program files, just copy the location of the folder and paste the location as the value of the JAVA_HOME variable.

After doing that, click on the path variable and click on edit to add the following variables.

Then click on edit to add the locations of your Android SDK-Tools and Android SDK Platform-Tools

For the system variables, add the following, their values should be the same as above.

ANDROID_HOME
JAVA_HOME

After following the steps above, click on the path variable and click on edit.

Click on edit to add the locations of the bin folder in the Java folder in your program files folder and also the bin folder in the latest folder in the command-line tools folder in your Android SDK location on your system just like the one below.

POSSIBLE ERRORS AND SOLUTIONS.

After adding all the variables mentioned above, there’s a probability you run into another error and I will explain two of the common errors and how to fix them below.

“Android SDK - versions found N/A, version supported 34.0.0”

This kind of error happens when you try to open your Android app on the emulator and it doesn’t open because it was unable to install the app on the emulator. This happens if a wrong Java version is installed OR your JAVA_HOME environmental variable isn’t pointing to the exact location where Java was installed on your computer. To fix this, confirm that you have installed the correct Java version which is V17 and above. Then check all the JAVA_HOME environment variables on your system and make sure they are pointing to the correct location of the Java installed.

The second possible error that can happen when trying to open your app on the emulator is

“Java.io.IOException: The filename, directory name, or volume label syntax is incorrect”

To fix this error, go to your react-native project and go to the android folder, create a local.properties file. In the file, paste the following.

sdk.dir = C:\\Users\\USER\\AppData\\Local\\Android\\Sdk

what we have above is the location of your Android SDK, the only difference is that all the slashes are double and this is the most important thing to fix the error.

NOTE: All the slashes in the local.properties file must be double, and make sure your Android SDK location is correct.

After this, you can run your react-native app again and everything should work perfectly. To check for any error in your react-native project, open your terminal, navigate to the project directory then run the following command. it checks for all the possible errors and lists them out, if there are none, it checks them with a green mark.

npx react-native doctor

RUNNING YOUR ANDROID APP ON AN EMULATOR.

Now that the react-native installation is complete, the next thing is to open the app on an emulator. To do this, you have to download a virtual device/Android emulator from Android Studio. So go to your Android studio, click on the “more actions” button, and select “Virtual Device Manager”, you should have a screen just like the one below.

If you already have a virtual device downloaded, just click on the play button to open it up but if not, click on the “Create device” button on the top left-hand corner to create a new virtual device, you should see a screen just like the one below.

Select any device of your choice and then click on the “Next” button to select and download a system image, then click on “Next” to download the virtual device then click on “Finish” when you are done. After downloading the virtual device, go to the device manager to see all downloaded virtual devices and then click on the play button to open up any of the devices.

After following the instructions above, go to your react-native project and run the following commands, each command should be run on a different terminal.

npm start

npm run android

The first command is to start the metro bundler while the second command is to open your app on the emulator. After running the command, your app should open up on the emulator just like the one below.

Other important commands that you should take note of are:

npx react-native doctor

adb devices

The first command is used to check/diagnose if there’s any error with your react-native application, just navigate to the project directory and run the command, you should see something like the picture below.

The second command is used to check for any connected virtual devices.

NOTE: Android Studio must be installed on your computer to use the adb command.

CONCLUSION.

Congratulations! You've successfully navigated the installation process of react-native on Windows. But before I come to the end of this article, let’s take a quick look at the summary of what we have discussed so far in this article.

Firstly, I talked about the dependencies and software needed to be installed which are Node, Android Studio, and JDK.
Secondly, I talked about how to install all the dependencies, how to set them up, how to check the version installed, and also how to set up your Android Studio and the necessary tools and packages to install on it.
After that, I talked about how to set all the necessary environment variables for both the user and the system.
After that, I talked about how to run your react-native project on the Android emulator.
Lastly, I discussed about some possible errors that usually occur during react-native installation and how to fix them.

As we conclude this guide on installing React Native on Windows, take a moment to appreciate the foundation you've laid for your cross-platform app development journey.

With your development environment configured, you're armed with the tools to craft innovative, responsive, and efficient mobile applications. Whether you're building for Android or leveraging the capabilities of React Native for iOS, the skills you've acquired are your passport to a diverse and thriving ecosystem.

Happy coding 🥳 😎

Getting started with React and GraphQL: A beginner's guide.

Ayanwumi Abdulroheem Tunde — Mon, 01 May 2023 19:17:19 +0000

What is GraphQL?

GraphQL is a query language for APIs (Application Programming Interfaces) that was developed by Facebook in 2012 and later open-sourced in 2015. It allows clients to request exactly the data they need and nothing more, enabling more efficient and flexible communication between the client and server. Unlike traditional RESTful APIs, which require multiple endpoints and may return more data than needed, GraphQL provides a single endpoint and lets clients specify their own queries and mutations, resulting in faster and more predictable responses. GraphQL also offers a strong type system and introspection capabilities, making it easier to understand and maintain APIs.

Why GraphQL?

Have you ever found yourself struggling to get the exact data you need from an API? Have you ever wished that you could just ask for the specific information you want and get it in one request, without having to deal with extra data or multiple endpoints? If so, you're not alone. The traditional RESTful API architecture has its limitations, and developers have been looking for a better way to handle data fetching and management.

What we would be learning.

This article is a series and this is the first part. So, if you're new to GraphQL and want to learn how to use it effectively, this beginner's guide is for you.
At the end of this series, we'll cover:

The basics of GraphQL
Its advantages over REST
Comparing GraphQL and Rest API responses.
The core concepts of GraphqL a frontend developer must know.
How to setup, use and fetch data from GraphQL API using Apollo client in the frontend.

Also, by the end of this series, you'll have a solid understanding of how GraphQL works and we are going to build a small react project that fetches data from a GraphQL API and also use some of the concepts we are oing to discuss in the series. Let's get started!

Some concepts of GraphQL a developer should know.

As a developer, there are a few concepts of GraphQl you should know. Some of them are listed below.

Schema: A GraphQL schema is a blueprint that defines the types of data available in the API and the operations that can be performed on that data. It defines the queries, mutations, and subscriptions that can be made to the API, as well as the types of data that can be returned.
Query: A query is a request for data from the API. In GraphQL, queries are written using the GraphQL query language, and can be used to retrieve data in a flexible and efficient way. Queries can specify the exact data that is needed, and can include nested fields to retrieve related data.
Mutation: A mutation is a request to modify data in the API. In GraphQL, mutations are written using the GraphQL mutation language, and can be used to create, update, or delete data in the API. Mutations can include input arguments to specify the data to be modified.
Resolver: A resolver is a function that is responsible for resolving a query or mutation. Resolvers determine how the data should be retrieved or modified, and return the requested data or confirmation of the mutation. Resolvers are associated with specific types in the schema, and can be written in any programming language.
Type: A type is a defined object or scalar in the GraphQL schema. Types can include objects, interfaces, unions, scalars, and enums. Each type has one or more fields, which define the data that can be retrieved or modified for that type.
Subscription: A subscription is a request for real-time data updates from the API. In GraphQL, subscriptions are written using the GraphQL subscription language, and can be used to subscribe to specific data changes and receive updates as they occur.

However, it is of best practice for frontend engineers to know how to interact with GraphQL APIs.

Advantages of GraphQL over Rest

GraphQL has several advantages over rest, some of them are listed below.

Efficient data fetching: With REST, each endpoint returns a fixed set of data, which can lead to over-fetching or under-fetching of data. In contrast, GraphQL enables clients to request only the specific data they need, resulting in faster and more efficient data fetching.
Reduced network traffic: RESTful APIs may require multiple requests to fetch all the necessary data, while GraphQL allows for the retrieval of all required data in a single request, reducing the overall network traffic.
Improved developer experience: GraphQL provides a strongly typed schema that allows for easier development and understanding of the API. It also supports introspection, which enables automatic documentation generation, type checking, and API exploration.
Flexibility: GraphQL's flexible and dynamic nature allows clients to define their own queries and mutations, enabling a more customizable and adaptable API.
Real-time data: GraphQL subscriptions allow for real-time data updates, providing a more interactive and responsive user experience.

Disadvantages of GraphQL compared to Rest.

While GraphQL has many advantages over traditional RESTful APIs, there are a few potential disadvantages to consider:

Complexity: GraphQL can be more complex to set up and use compared to RESTful APIs, particularly for developers who are not familiar with the technology. It requires a different approach to data modeling and can be more difficult to implement.
Caching: With RESTful APIs, clients can take advantage of HTTP caching, which can help to reduce server load and improve performance. With GraphQL, caching can be more challenging due to the dynamic nature of the queries, and caching can become less effective when the data is frequently updated.
Server Load: GraphQL queries can be more complex and more computationally intensive than RESTful API requests, which can lead to higher server loads and slower response times, particularly if queries are poorly optimized or clients request large amounts of data.
Tooling: While there are many libraries and tools available for working with GraphQL, the ecosystem is not as mature as that of RESTful APIs. This can make it more difficult to find resources and solutions when issues arise.

Despite these potential disadvantages, many developers have found that the benefits of GraphQL far outweigh any drawbacks. As with any technology, it's important to carefully evaluate the pros and cons and determine whether GraphQL is the right choice for your particular use case.

Overall, GraphQL provides a more efficient, flexible, and developer-friendly way to interact with APIs compared to traditional RESTful APIs.

Comparing The Data Retrieval from a GraphQL API and Rest API.

As we have explained earlier, the responses gotten from a GraphQL API and a Rest API are quite different because the GraphQL API gives us the specific data, and this is because when fetching data from a GraphQL API, we have to specify the fields that we want and by doing this it is going to return the data for only the fields queried for. On the other hand, a Rest API gives us both the data we need and the ones we don't. We can check the images below for a clear understanding.

The image above is an example of a GraphQL query and it's response.

The image above is an example of a response from a Rest API.

Conclusion

So far in this first part of the series, we have been able to cover the following.

Introduction to GraphQL
Why we should use GraphQL
Advantages of GraphQL API over Rest API.
Disadvantages of GraphQL API compared to Rest API.
We listed out some of the core concepts of GraphQL.
We compared the responses of both GraphQL and Rest APIs

In summary, GraphQL is an exciting and promising technology that is worth exploring, especially for developers looking to build modern, efficient, and scalable applications.

Resource

https://graphql.org/learn/queries/

Watch out for the next part of the series where we take a deep dive into the core concepts of GraphQL with detailed explanation and examples.

Authentication in React Applications using Firebase and its services. Part 3

Ayanwumi Abdulroheem Tunde — Sun, 09 Apr 2023 09:07:35 +0000

Logging the user in

Now that we are done signing the user up, and have signed the user out, the next thing is to log the user back in. Back to our Login component, let's see how we can achieve this with firebase.
But first, we have to add states to our inputs, then start working on implementing the functionality.

    import React, {useState} from 'react'
    import { Box, FormControl, FormLabel, Button, Heading, Text, VStack, Input, useToast } from '@chakra-ui/react'
    import { LoginCurve } from 'iconsax-react'
    import { app } from '../../firebaseConfig'
    import {getAuth, signInWithEmailAndPassword} from 'firebase/auth'
    import { useNavigate } from 'react-router-dom'

    const Login = () => {

      //initialise firebase auth
      const auth = getAuth();

      //initialise toast component from chakra Ui
      const toast = useToast();

      //initialise navigate from react-router-dom
      const navigate = useNavigate();

      //states for each of the imputs
      const [email, setEmail] = useState('')
      const [password, setPassword] = useState('');

      const handleClick = async  () => {
        if(email && password){
          try {
            await signInWithEmailAndPassword(auth, email, password).then((cred) => {
              toast({
                title: "Login Successful.",
                description: "You have been logged in successfully!.",
                status: "success",
                duration: 3000,
                isClosable: true,
                variant: 'left-accent',
                position: 'top-right',

              });
              setEmail('');
              setPassword('');
              navigate('/profile')
            })
          } catch (error) {
            toast({
              title: "Error!",
              description: error.message,
              status: "error",
              duration: 3000,
              isClosable: true,
              variant: 'left-accent',
              position: 'top',
            });
          }
        }else{
          toast({
            title: "Error!",
            description: "Please fill in your details.",
            status: "error",
            duration: 3000,
            isClosable: true,
            variant: 'left-accent',
            position: 'top',
          });
        }
      }

      return (
        <Box mt='10'>
          <VStack spacing={6}>

            <Heading>Login</Heading>

            <Box maxW='400px'>
              <FormControl>
                <VStack spacing={4}>
                  <Box>
                    <FormLabel>Email</FormLabel>
                    <Input type='email' placeholder='Input your email' fontSize='14px' w='400px' value={email} onChange={(e) => setEmail(e.target.value)} />
                  </Box>

                  <Box>
                    <FormLabel>Password</FormLabel>
                    <Input type='password' placeholder='Input your password' fontSize='14px' w='400px' value={password} onChange={(e) => setPassword(e.target.value)} />
                  </Box>

                  <Box>
                    <Button type='submit' w='400px' colorScheme='teal' onClick={handleClick}>Login <LoginCurve style={{ marginLeft: '5px' }} /></Button>
                  </Box>
                </VStack>
              </FormControl>
            </Box>
          </VStack>
        </Box>
      )
    }

    export default Login

The code above is the final code for the Login component after adding states to our inputs and writing the functionality. Copy and paste the code in the code editor while we go through the codebase step by step.

Let's start with the imports, I believe we are now familiar with almost all the imports except for the signInWithEmailAndPassword() function. What this function does is that it allows us to sign a user in with the email and password that have been provided earlier by the user during signup. Then we called the function in the handleSubmit() function. If everything goes well, the user will be logged in and then redirected to the profile page. And if anything goes wrong the error toast will be displayed with the error message.

Retrieving the user's data from the firebase auth, firestore database, and firebase storage

Now we have been able to sign users in with their email and password, and we have been able to redirect them to the profile page so that each user can view his/her profile but nothing is actually showing on the profile page, how do we fix this?

We can do this in 3 steps.

The first thing is to get the currently logged-in user and from there, we can get the user's email and the date the account was created.
The second step is to get the user's avatar from firebase storage.
The third and final step is to get the user's username and bio from firestore database.

    import React, {useState, useEffect} from 'react'
    import {Box, Avatar, AvatarBadge, Text, Heading, Stack, Button, useToast} from '@chakra-ui/react'
    import {getAuth, signOut } from 'firebase/auth'
    import { getFirestore, query, where, getDocs, collection } from 'firebase/firestore'
    import { getStorage, ref, getDownloadURL } from 'firebase/storage'
    import { Link, useNavigate } from 'react-router-dom'
    import { app } from '../../firebaseConfig'


    const Profile = () => {
      const [currentUser, setCurrentUser] = useState(null);
      const [userDetails, setUserDetails] = useState('')
      const [avatar, setAvatar] = useState('');
      const auth = getAuth();
      const db = getFirestore();
      const storage = getStorage();
      const userRef = collection(db, 'user_data');
      const navigate = useNavigate();
      const toast = useToast();

      const signout = () => {
        signOut(auth).then(() => {
          navigate('/login');

          toast({
            title: "Logout Successful.",
            description: "You have been logged out successfully!.",
            status: "success",
            duration: 3000,
            isClosable: true,
            variant: 'left-accent',
            position: 'top-right',
          });

        })
      }

      const getCurrentUser = async () => {
        try {
          auth.onAuthStateChanged((user) => {
            setCurrentUser(user);
            const q = query(userRef, where('user_id', '==', user.uid));
            const avatarRef = ref(storage, user.uid);

            if(user){
              getDownloadURL(avatarRef).then((url) => {
                setAvatar(url);
              });

              getDocs(q).then(async (snapshot) => {
                let user_data = [];
                snapshot.docs.map((item) => {
                  user_data.push({ ...item.data(), id: item.id });
                  return setUserDetails(user_data);
                })
              });
            }
          })
        } catch (error) {
           toast({
            title: "Error!.",
            description: error.message,
            status: "error",
            duration: 3000,
            isClosable: true,
            variant: 'left-accent',
            position: 'top-right',
          });
        }
      };

      useEffect(() => {
        getCurrentUser()
      }, []);

      const newDate = currentUser?.metadata.creationTime
      const date = new Date(newDate).toDateString();

      return (
        <>
        {currentUser ? 
        <Box maxW='400px' mt='16' bg='gray.100' p='5' borderRadius={5} boxShadow='md' display='flex' alignItems='center' justifyContent='center' mx='auto'>
          <Box>
            <Heading mb='5'>My Profile</Heading>
            <Avatar bg='teal' size='xl' mb='5' display='block' mx='auto' src={avatar}>
              <AvatarBadge boxSize='0.7em' bg='green.500' />
            </Avatar>
            <Stack spacing={4} fontWeight='semibold'>
              <Text>Username: {userDetails[0]?.user_name}</Text>
              <Text>Bio: {userDetails[0]?.user_bio}</Text>
              <Text>Email: {currentUser?.email}</Text>
              <Text>Date Joined: {date}</Text>
            </Stack>
            <Box textAlign='center' mt='7'>
              <Button colorScheme='teal' onClick={signout}>Logout</Button>
            </Box>
          </Box>
        </Box> 
        : 
        <Box mx='auto' mt='16'>
          <Heading fontWeight='semibold' fontSize={25} mb='3'>OOPS!</Heading>
          <Text mb='3'>You are not authorised to view this page, please login to get acces</Text>
          <Link to='/login'>
                <Button>Login</Button>
          </Link>
        </Box>}
        </>
      )
    }

    export default Profile

We should have a UI that looks like the picture below after pasting the code.

And that's it, the code above is for the profile page, once again it might look strange but let's go through it together.

Like I always do, I will start from the imports at the top, I know we are familiar with most of the things I imported so I will just go over the ones I haven't mentioned before.

So let's start with the firebase storage.

We imported getDownloadUrl() from firebase storage. what it is used for is to get an accessible URL of the image we uploaded to firebase storage because by default, immediately after we uploaded the image, we have given a name to it but we can only access the image in our firebase console, and not anywhere else.
1. The next thing is the firebase firestore, we imported the query() function and where() function which would be used to query the firestore database based on some conditions. A concept in firestore database that I won't go deep into is "firestore queries". What are firestore queries?

Firestore queries are a way to retrieve data from a Firestore database in a specific way.

Firestore is a NoSQL document database that stores data in documents and collections, and queries can be used to retrieve documents from collections based on specified conditions.
Firestore queries can filter documents based on specific conditions, sort documents based on one or more fields, limit the number of documents returned, and retrieve only specific fields from each document.
Queries can also be combined to create more complex queries.
Firestore supports two types of queries: simple queries and complex queries. Simple queries are queries that use a single filter condition, while complex queries use multiple filter conditions, or multiple sorting or limiting conditions.
Firestore queries can be executed on the client side, such as in mobile or web applications, or on the server side using Cloud Functions or other server-side technologies.

So I believe we have a little knowledge about firestore queries and how they work now, so let's go back to our code.

Another thing we imported was the getDocs() function, which is used to get all the documents in a firestore collection.

The next thing we did was create states for the avatar, the user details, and the current user. After that, I initialized all the functions we imported from firebase.
Up next is the signout function we created and attached to a button to sign users out when it is clicked and then redirect them to the login page.

The next and most important thing is to get the user's data from firebase.
Once we initialized the getAuth() function, we have access to the onAuthStateChanged() function which helps us to keep track of the authentication state of the user either currently logged in or not, and from that, we have access to the "user" object which gives us all the details about the currently logged in user and then we pass the user object to the setCurrentUser() function.

The next thing is to use the firestore queries to get the currently logged-in user's details. The query function takes in two arguments, the userRef and the where() function, in the where function we pass in our query condition and it goes thus.

We want firebase to go through all the documents in the collection and get us the document that has its user_id key equal to the currently logged-in user's id.

After that, we created a reference for our avatar. if we can still remember, what we did earlier was that immediately after the user signs up and uploads his picture, we changed the name of the image to the user's id.

The next code block checks if a user is present, and if it is, it should get us the download URL of the user's avatar.

After that, we used the getDocs() function and then pass in the query to get the user details. We then use the .then() method to get the snapshot, We created an empty array and set it to the user_data variable.

After getting the snapshot, we automatically have access to the docs() method, we then looped through it and after doing that we pushed the data into the empty array, then pass the user_data array into the setUserDetails() function.

If we noticed in the snapshot.docs() method we pushed item.data() into the array and that's because the data we want that is coming from firebase is located in the data() function. We can check this out by console logging the item console.log(item).

We then called the function in a useEffect().
Wow! guys we just built a simple full-stack application with firebase, that's so amazing, thanks for following me throughout the project, and also thanks for reading this article, I hope to release another article soon.

Conclusion

Firebase can be used to build full-stack applications for both web and mobile, in this article, we demonstrated how to use different firebase features and services, this is just a simple project and firebase has lots of features that can be used to build more complex applications. Check out firebase docs to learn more.

In case you missed the first and second parts of the series, you can read them by using the links below.

Link to first part.

Link to second part.

Authentication in React Applications using Firebase and its services. Part 2

Ayanwumi Abdulroheem Tunde — Fri, 07 Apr 2023 14:11:16 +0000

Creating our react components

Since we are building a small application, we don't really need lots of components, in this project, we would be using four major components; Login, Signup, Signin, and Profile components.

Next, let's set up our routing using react-router-dom which we installed earlier.
In our main.js file, we should have the following code

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App'
    import { ChakraProvider } from '@chakra-ui/react'

    ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
        <ChakraProvider>
          <App />
        </ChakraProvider>
      </React.StrictMode>,
    )

Then in our "App.js" file, we should have the following code

    import { Box } from '@chakra-ui/react'
    import { useState } from 'react'
    import { BrowserRouter as Router , Routes, Route, Navigate } from 'react-router-dom'
    import Login from './components/Login'
    import Profile from './components/Profile'
    import Signup from './components/Signup'


    function App() {

      return (
        <Box>
          <Router>
            <Routes>
              <Route exact path='/' element={<Navigate replace to='/login' />} />
              <Route exact path='/login' element={<Login />} />
              <Route exact path='/signup' element={<Signup />} />
              <Route exact path='/profile' element={<Profile />} />
            </Routes>
          </Router>
        </Box>
      )
    }

    export default App

The route has been set up in the app.js file, Navigate is used from react-router-dom to redirect users to the login page when the page loads.

Building the UI of the pages.

Now let's start building the UI of our components; the login, signup, and profile components before we start working on the functionalities.
For the Signup component, paste the following code

import React from 'react'
import {LoginCurve} from 'iconsax-react'
import {Box, FormControl, FormLabel, Button, Heading, Text, VStack, Input} from '@chakra-ui/react'


const Signup = () => {
  return (
    <Box mt='4'>
      <VStack spacing={6}>

      <Heading>Signup</Heading>

      <Box maxW='400px'>
      <FormControl>
        <VStack spacing={4}>
          <Box>
            <FormLabel>Username</FormLabel>
            <Input type='text' placeholder='Input your username' fontSize='14px' w='400px' />
          </Box>

          <Box>
            <FormLabel>Bio</FormLabel>
            <Input type='text' placeholder='Input your bio' fontSize='14px' w='400px' />
          </Box>

          <Box>
            <FormLabel>Upload your avatar</FormLabel>
            <Input type='file' w='400px' />
          </Box>

          <Box>
            <FormLabel>Email</FormLabel>
            <Input type='email' placeholder='Input your email' fontSize='14px' w='400px' />
          </Box>

          <Box>
            <FormLabel>Password</FormLabel>
            <Input type='password' placeholder='Input your password' fontSize='14px' w='400px' />
          </Box>

          <Box>
            <Button type='submit' w='400px' colorScheme='teal'>Signup <LoginCurve style={{marginLeft: '5px'}} /></Button>
          </Box>
        </VStack>
      </FormControl>
      </Box>
      </VStack>
    </Box>
  )
}
export default Signup

After pasting the code, we should have a UI that looks like the picture below

For the Login component, paste the following code

    import React from 'react'
    import { Box, FormControl, FormLabel, Button, Heading, Text, VStack, Input } from '@chakra-ui/react'
    import { LoginCurve } from 'iconsax-react'

    const Login = () => {
      return (
        <Box mt='10'>
          <VStack spacing={6}>

            <Heading>Login</Heading>

            <Box maxW='400px'>
              <FormControl>
                <VStack spacing={4}>
                  <Box>
                    <FormLabel>Email</FormLabel>
                    <Input type='email' placeholder='Input your email' fontSize='14px' w='400px' />
                  </Box>

                  <Box>
                    <FormLabel>Password</FormLabel>
                    <Input type='password' placeholder='Input your password' fontSize='14px' w='400px' />
                  </Box>

                  <Box>
                    <Button type='submit' w='400px' colorScheme='teal'>Login <LoginCurve style={{ marginLeft: '5px' }} /></Button>
                  </Box>
                </VStack>
              </FormControl>
            </Box>
          </VStack>
        </Box>
      )
    }

    export default Login

The UI of the login component should look like the picture below after pasting the code.

Great! Our App is gradually getting into shape, now let's go ahead and create the UI of our profile page. Paste the code below for the profile page.

    import React from 'react'
    import {Box, VStack, Avatar, AvatarBadge, Text, Heading, Stack} from '@chakra-ui/react'


    const Profile = () => {
      return (
        <Box maxW='400px' mt='16' bg='gray.100' p='5' borderRadius={5} boxShadow='md' display='flex' alignItems='center' justifyContent='center' mx='auto'>
          <Box>
            <Heading mb='5'>My Profile</Heading>
            <Avatar bg='teal' size='xl' mb='5' display='block' mx='auto'>
              <AvatarBadge boxSize='0.7em' bg='green.500' />
            </Avatar>
            <Stack spacing={4} fontWeight='semibold'>
              <Text>Username: </Text>
              <Text>Bio: </Text>
              <Text>Email: </Text>
              <Text>Status: </Text>
            </Stack>
          </Box>
        </Box>
      )
    }

    export default Profile

Our UI should look like the picture below after pasting the code

Great Job, we are done with building all the user interfaces of our app, now let's move to handling the form states, validation, and then adding the firebase authentication.

Handling the form states and validation

Let's start from the Signup page and then to the login page. We would start by storing the form data in states and then validating the form to avoid empty or invalid inputs and after that, we send the data to firebase.

    import React, {useState} from 'react'
    import { app } from '../../firebaseConfig'
    import {LoginCurve} from 'iconsax-react'
    import {Box, FormControl, FormLabel, Button, Heading, Text, VStack, Input, useToast} from '@chakra-ui/react'
    import {getAuth, createUserWithEmailAndPassword, signOut} from 'firebase/auth'
    import {addDoc, getFirestore, collection} from 'firebase/firestore'
    import {getStorage, ref, uploadBytes, } from 'firebase/storage'
    import { useNavigate } from 'react-router-dom'


    const Signup = () => {

      const [username, setUsername] = useState('');
      const [bio, setBio] = useState('');
      const [avatar, setAvatar] = useState(null);
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');

      //initialise navigate from react router dom
      const navigate = useNavigate();

      //initalise toast from chakra ui
      const toast = useToast();

      //intialise firebase auth
      const auth = getAuth();

      //initialise firebase firesore database
      const db = getFirestore();

      //initialise firebase storage
      const storage = getStorage();

      const handleSubmit = async () => {
        if(username && bio && avatar && email && password){
          //create user with email and password
          try {

            const cred = await createUserWithEmailAndPassword(
              auth,
              email,
              password
            );

            //upload the user avatar to firebase storage 
            const avatarRef = ref(storage, cred.user.uid);
            await uploadBytes(avatarRef, avatar).then(() => {
              console.log('avatar uploaded');
            });

            //collection reference
             const colref = collection(db, 'user_data');
            //add user's details as a document to the user_data collection
            await addDoc(colref, {
              user_name: username,
              user_id: cred.user.uid,
              user_bio: bio,
            }).then(() => {

              //set the inputs back to empty fields after the form has been submitted  
              // then redirects the user to the login page
              setUsername('');
              setEmail('');
              setPassword('');
              setBio('');
              navigate("/login");
              signOut(auth);
              console.log("user signed out");
            });

            //show success toast if account creation was successful
            toast({
              title: "Account created.",
              description: "Account created successfully!.",
              status: "success",
              duration: 3000,
              isClosable: true,
              variant: 'top-accent',
              position: 'top-right',

            });

          } catch (error) {
            // Handle any errors that occur during the function calls
            toast({
              title: "Error!",
              description: error.message,
              status: "success",
              duration: 3000,
              isClosable: true,
              variant: "top-accent",
              position: "top-right",
            });
          }
        } else {
          //show error toast if any of the fields is empty
          toast({
            title: "Error!",
            description: "Please fill all fields correctly",
            status: 'error',
            duration: 2000,
            isClosable: true,
            variant: "left-accent",
            position: "top",
          });
        }
      }

      return (
        <Box mt='4'>
          <VStack spacing={6}>

          <Heading>Signup</Heading>

          <Box maxW='400px'>
          <FormControl>
            <VStack spacing={4}>
              <Box>
                <FormLabel>Username</FormLabel>
                <Input type='text' placeholder='Input your username' fontSize='14px' w='400px' value={username} onChange={(e) => setUsername(e.target.value)} />
              </Box>

              <Box>
                <FormLabel>Bio</FormLabel>
                <Input type='text' placeholder='Input your bio' fontSize='14px' w='400px' value={bio} onChange={(e) => setBio(e.target.value)} />
              </Box>

              <Box>
                <FormLabel>Upload your avatar</FormLabel>
                <Input type='file' w='400px' onChange={(e) => setAvatar(e.target.files[0])} />
              </Box>

              <Box>
                <FormLabel>Email</FormLabel>
                <Input type='email' placeholder='Input your email' fontSize='14px' w='400px' value={email} onChange={(e) => setEmail(e.target.value)} />
              </Box>

              <Box>
                <FormLabel>Password</FormLabel>
                <Input type='password' placeholder='Input your password' fontSize='14px' w='400px' value={password} onChange={(e) => setPassword(e.target.value)} />
              </Box>

              <Box>
                <Button type='submit' w='400px' colorScheme='teal' onClick={handleSubmit}> Signup <LoginCurve style={{marginLeft: '5px'}} /> </Button>
              </Box>
            </VStack>
          </FormControl>
          </Box>
          </VStack>
        </Box>
      )
    }

    export default Signup

Yeah! we are almost there, I know we might be scared by the amount of code above but it's nothing to be scared of, let’s go through it together while I explain it step by step.

As mentioned earlier, we would be using three out of the firebase services which are:

Firebase authentication for authenticating users.
Firestore database for storing users' data
Firebase storage for storing users' files and images.

First of all, we would start with the imports at the top of the component. If we could remember, we exported 'app' in our firebase config file, so the first thing we have to do before importing any of the firebase services in any file/component is to import the app, without doing this we would get an error.

The next thing we would do is to import the toast component from Chakra UI, this provides us with a toast that is customizable and also saves a lot of time.

After that we imported some functions from "firebase/auth", firebase has lots of services so we have to specify the kind of service we want, in this case, we want the auth service.

We imported getAuth() which gives us the currently authenticated user and null if there's none.

We also imported createUserWithEmailAndPassword(), just like its name, it allows us to create a user with email and password.

Then we also imported signOut() which allows us to sign out the logged-in user.

Now let’s move to the firestore database service, we imported a couple of functions from it as well, which are:

getFirestore() which returns a reference to a Firestore database. Firestore is a NoSQL, document-oriented database that stores data in collections and documents, which allows for easy querying, indexing, and scaling of data.

We can use the getFirestore() method to access and manipulate data in our Firestore database. Once we have a reference to the Firestore database, we can use various methods provided by the Firestore SDK to create, read, update, and delete data.

Another one is collection(). In Firestore, a collection is a group of documents that share a common path. we can think of a collection as a container for documents that have similar properties or belong to the same type of entity.

For example, we might have a collection called "users" that contains documents representing individual users in our application.

The collection() method in the Firebase Firestore SDK is used to retrieve a reference to a specific collection within our database. Once we have a reference to a collection, we can use various methods to add, read, update, and delete documents in the collection.

The last one from firebase firestore is the addDoc() function, it is used to add a new document to a collection with an automatically generated id, it takes in the collection reference as an argument and also the document to be added.

Up next is the firebase storage and we imported some functions from it as well.

The first one is getStorage(), It is a method in the Firebase Storage SDK that returns a reference to a Firebase Storage instance, which is a cloud-based file storage solution provided by Firebase.

Firebase Storage allows us to store and retrieve user-generated content such as images, videos, and other files, and it integrates seamlessly with other Firebase services such as Authentication and Firestore.

Once we have a reference to a Firebase Storage instance, we can use various methods provided by the Storage SDK to upload, download, and delete files, as well as manage storage security and access.
The second one is ref(). it can be used to get a reference to either a file or a directory within the Firebase Storage bucket.

If the specified location does not exist, Firebase Storage will create it automatically when a file is uploaded to that location.
Last but not least is the uploadBytes(), it is a method in the Firebase Storage SDK that uploads a Uint8Array, ArrayBuffer, Blob, or a File to a specified location in a Firebase Storage bucket.

This method allows us to upload binary data such as images, videos, or other files to Firebase Storage.

The next thing we imported was the useNavigate from react-router-dom.

it is used to redirect a user to a specific route after an action has been performed.

And that's all for the imports, the next thing we did was that we created a state for each of the input fields and then attach them to the inputs respectively.

Up next is initializing all the functions imported at the top.

In the handleSubmit function, let’s not forget its an async function, we have to check if all the input fields are empty or not, if they are empty, an error toast will be displayed telling the user to fill the inputs, therefore the form won't submit.

If the inputs are filled correctly, a user will be created with email and password through the createUserWithEmailAndPassword() function.

Immediately after the user has been created, we have access to the user object through the cred variable, and from the user object, we can access the user's id which was generated by firebase auth.

The next thing is to upload the user's avatar to firebase storage but before then we have to create a reference for the avatar by using the ref() function which takes in the storage and the image name as an argument.
Here we are using the user's id user.uid as the name of the image for two reasons.

The first reason is to avoid name conflicts, because some images may have the same name
The second reason is that anytime we want to retrieve the image, it will be very easy to track and retrieve the logged-in user's avatar.

After that, we use the uploadBytes() function to upload the image to firebase storage. it takes two arguments, the avatar reference and the avatar variable itself.

Next, we have to add the user's username and bio to the firestore database by using the addDoc() function, but before that, we have to create a collection reference, i.e where we want to add the document to.

we do this by using the collection() function, it takes in two arguments which are the “db” and the name of the collection. Don't worry if we don't have any collections created, firebase will create one for us automatically.

After that, we can now use addDoc() function and then pass the colref and the data we want to add in form of an object.

The next thing we did was to set the states of the input fields back to their empty states, redirect the user to the login page and then log the user out by using the signOut() function.

Then a success toast shows that the account has been created successfully, or an error toast if anything goes wrong.

To test things out, we head over to our firebase console, and check all three sections: Authentication, firestore database, and storage, we would see the recently signed-up user's details just like we have them in the pictures below.

Firebase authenticated users

User Information stored in firestore database collection

Users' avatars that have been stored in firebase storage

And that’s going to be the end of this series, stay tuned for the concluding part.

In case you missed the first part of the series, you can read it here

You can also read the concluding part of the series here.

Authentication in React Applications using Firebase and its services. Part 1.

Ayanwumi Abdulroheem Tunde — Fri, 07 Apr 2023 09:26:43 +0000

Firebase is a platform created by Google that provides backend-as-a-service (BaaS) for mobile and web applications. It allows developers to build and deploy full-stack applications without worrying about server infrastructure and backend services.

It offers a range of tools and services, including Firebase Realtime Database, Firebase Authentication, Firebase Cloud Database, Firebase Cloud Messaging, Firebase Hosting, and Firebase Functions, which we can use individually or together to create powerful applications. We can read more about firebase and its services by using the above link.

What we would be learning

In this article, we will learn the following:

How to add authentication to React applications using firebase authentication.
How to store data using firestore database
How to store images and files using firebase storage
How to retrieve our data from firebase.

This article has been split into series, this is the first part and we would be talking majorly about how to set up our react app, firebase project, and also enable the firebase services we need.

At the end of this article, we will build a simple application that allows users to create accounts, sign in, sign out, and also view their profiles. The link to the GitHub repository for this project can be found in the above link.

Creating the react app

First of all, we start by creating a new react app using vite, if we want to follow along, we can also create a react app by using vite, then follow the prompts, or by running any of the following commands, then follow the prompts that follow.

NPM

npm create vite@latest

PNPM

pnpm create vite

YARN

yarn create vite

We will be using Chakra UI framework for this project, so we have to install it as well as Iconsax react icons, and also react-router-dom. We can install the packages by using the following commands.

Chakra UI
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Iconsax React Icons
npm i iconsax-react

React Router Dom
npm i react-router-dom

Setting up our firebase project

The next thing is to create a firebase project, I have already created one for this project, we can also create one by using this link or follow the steps below.

After clicking on the link above, we should see a screen just like the one below.

Click on the “create a project” button to get started, after doing that, we should see the screen below.

We give our firebase project a name of our choice, then continue.

We could enable firebase analytics for our firebase project, if we don’t want them we click on “create project” to proceed.

After our project has finished creating, we should see the screen above, then click on continue.

The next thing is to choose the platform in which we want to use the firebase project, in this case, we would be using it on the web so we have to choose the web. We would see "add an app to get started", just click on the closing tag icon "</>".

Next, we give our firebase web app a name of our choice and then click on “register app”.

Firebase will generate a config for us, all we have to do is copy it, create a "firebaseConfig.js" file in the "src" folder of our react project then paste the config in it. We shouldn’t forget to export the app from the firebaseConfig file, then click on continue to console.

Then we should be redirected to our firebase console just like in the picture above.

Our firebase config file should look like the picture above, and we shouldn’t forget to export const app.

After that, we have to install firebase as a dependency in our react project by running "npm i firebase" in our terminal.

Our package.json file should look like the picture above after the installation.

Enabling Firebase Authentication in our firebase project

In our firebase console on the left-hand side, click on the build toggle button, we would find lots of services that firebase provides, but we would be using only 3 of them.
Click on the authentication then click on get started, and we would be redirected to the sign-in methods tab.

In this article, the sign-in method we would be using is the email and password provider. Click on the email/password provider, enable it then save.

Enabling firestore database in our project.

The next we have to do is to enable firestore database in our firebase project, this will enable us to store users' data. Back to the build toggle button click on firestore database then click on create a database. It will prompt us to answer some questions before we proceed. We have to make sure we select “start in test mode” and not production mode then click on next.

Next, we have to set our cloud firestore location, we can choose any preferred location of our choice and then click on enable.

Great! we have just finished setting up the database, now let's move to firebase storage.

Enabling firebase storage in our firebase project

Back to our left sidebar, in the build section, click on storage and then click on get started, we have to make sure we start in test mode as well, then continue.

After that, we click on done when the next modal comes up, we should see the screen below once we are done.

Great! Now we are done with setting up all the firebase services we need for the project, let's jump into our code editor and start performing magic.

You can continue reading the second part of the series here