DEV Community: Vinícius Siqueira

How to embed fonts with React and styled-components

Vinícius Siqueira — Wed, 16 Nov 2022 12:15:47 +0000

In this post I will show you how to embed fonts into your React App using styled components. It is not unusual that you need to use a specific font in a project you are working with React. The reason why it can be a good practice to embed a font with your app is that different browses and devices use different rendering engines so the font you are using while developing may not be the same your client is seeing. Okay, but how can we embed a font within our React app?

Getting the font extensions

First of all, you need to choose the font you want to use. For the purpose of this tutorial, I will choose the font 'Montserrat' from Google Fonts, but you can choose any other font. After choosing your font from Google Fonts, you will see something like this.

Now, just click in the button Download family in the top right side of the page to download the font. After unzipping the file you will see a folder with all the styles available for the font you selected, like this

Remark 1: it is important to notice that not all the fonts have the same weights and styles as this one. Some fonts have just specific weights or even don't have the italic or bold styles.

As you noticed, the fonts shown in your folder have the extension ttf which stands for true type font. Actually, in order to meet the best cross-browser standards you will need 5 font file extensions: eot, ttf, woff, woff2 and svg. In this tutorial I will show you how to get all these extensions, but you can use only ttf if you want. It is just that you don't have guarantee that it will fit perfectly to all browsers.

If you don't have all the extensions above I suggest the use of the Transfonter site. It provides you the other fonts extensions. You just have to drag and drop or upload the fonts you want in your project. Here, I will use the regular, italic, bold and bold italic of Montserrat. So, after uploading the ttf fonts from Montserrat to Transfonter, do not forget to check the formats you want (in this example, I will check them all) and once it's done, click the button Convert.

After that, it will process and you can download all the other extensions by clicking the download link as shown in the image below.

Unziping the file, you can see the all the extensions you have chosen. In my case I will have 20 font files (5 for each ttf I selected) and two more files: a demo.html and a stylesheet.css.

Creating your project

Now that we have our fonts, let's code! First of all, I will create a React project using create react app standard boilerplate. So go to the folder you want in your terminal and type



npx create-react-app react-fonts

or, using yarn (that's my choice).



yarn create react-app react-fonts

Once it install everything, go to the code editor of your preference (I'm using Visual Studio Code) and open the folder. You will see the create react app boilerplate.

Go to your terminal and type



npm start

or (if using yarn)



yarn start

and you will see the following in your browser.

Great! Everything is working perfectly so far. Since we will use the styled-components in this tutorial, you can add it to your dependencies. So, again, go back to your terminal and type



npm install --save styled-components

or (if using yarn)



yarn add styled-components

and this will install the styled-components.

Including the fonts to your project

Well, the first thing that comes to mind is: where do I include the fonts?

There is no right answer to that, but here I will create a folder named fonts inside the src folder as shown in the image below.

Now, I will select all my font files and copy them inside the fonts folder.

Creating Global Styles using styled-components

Now we already add the fonts to the project but we can't use them yet. Before, we will use styled-components to create a global styles. In order to do that, I will create a new file named styles.js inside the src folder.

and, inside this file we type the following code



import { createGlobalStyle } from 'styled-components';

import MontserratRegularEot from './fonts/Montserrat-Regular.eot';
import MontserratRegularSvg from './fonts/Montserrat-Regular.svg';
import MontserratRegularTtf from './fonts/Montserrat-Regular.ttf';
import MontserratRegularWoff from './fonts/Montserrat-Regular.woff';
import MontserratRegularWoff2 from './fonts/Montserrat-Regular.woff2';
import MontserratItalicEot from './fonts/Montserrat-Italic.eot';
import MontserratItalicSvg from './fonts/Montserrat-Italic.svg';
import MontserratItalicTtf from './fonts/Montserrat-Italic.ttf';
import MontserratItalicWoff from './fonts/Montserrat-Italic.woff';
import MontserratItalicWoff2 from './fonts/Montserrat-Italic.woff2';
import MontserratBoldEot from './fonts/Montserrat-Bold.eot';
import MontserratBoldSvg from './fonts/Montserrat-Bold.svg';
import MontserratBoldTtf from './fonts/Montserrat-Bold.ttf';
import MontserratBoldWoff from './fonts/Montserrat-Bold.woff';
import MontserratBoldWoff2 from './fonts/Montserrat-Bold.woff2';
import MontserratBoldItalicEot from './fonts/Montserrat-BoldItalic.eot';
import MontserratBoldItalicSvg from './fonts/Montserrat-BoldItalic.svg';
import MontserratBoldItalicTtf from './fonts/Montserrat-BoldItalic.ttf';
import MontserratBoldItalicWoff from './fonts/Montserrat-BoldItalic.woff';
import MontserratBoldItalicWoff2 from './fonts/Montserrat-BoldItalic.woff2';

export default createGlobalStyle`

@font-face {
  font-family: 'Montserrat';
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url(${MontserratRegularEot});
  src: url(${MontserratRegularEot}) format('embedded-opentype'),
    url(${MontserratRegularWoff2}) format('woff2'),
    url(${MontserratRegularWoff}) format('woff'),
    url(${MontserratRegularTtf}) format('truetype'),
    url(${MontserratRegularSvg}) format('svg');
  }

  @font-face {
    font-family: 'Montserrat';
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    src: url(${MontserratItalicEot});
    src: url(${MontserratItalicEot}) format('embedded-opentype'),
      url(${MontserratItalicWoff2}) format('woff2'),
      url(${MontserratItalicWoff}) format('woff'),
      url(${MontserratItalicTtf}) format('truetype'),
      url(${MontserratItalicSvg}) format('svg');
  }

  @font-face {
    font-family: 'Montserrat';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url(${MontserratBoldEot});
    src: url(${MontserratBoldEot}) format('embedded-opentype'),
      url(${MontserratBoldWoff2}) format('woff2'),
      url(${MontserratBoldWoff}) format('woff'),
      url(${MontserratBoldTtf}) format('truetype'),
      url(${MontserratBoldSvg}) format('svg');
  }

  @font-face {
    font-family: 'Montserrat';
    font-weight: bold;
    font-style: italic;
    font-display: swap;
    src: url(${MontserratBoldItalicEot});
    src: url(${MontserratBoldItalicEot}) format('embedded-opentype'),
      url(${MontserratBoldItalicWoff2}) format('woff2'),
      url(${MontserratBoldItalicWoff}) format('woff'),
      url(${MontserratBoldItalicTtf}) format('truetype'),
      url(${MontserratBoldItalicSvg}) format('svg');
  }

`;

With the code above we just create a global component (in this case with just font styles) with whom we will just wrap the entire App inside this global component, so we can use the Montserrat font wherever we need. After that we import every font with an alias and create them using the CSS @font-face declaration. In this point you just have to create one @font-facedeclaration to every font style you selected. Notice that each have the respective font-family, font-weight and font-style to the font. It is also a good idea to include the descriptor font-display, and here I will be using the value swap which means it shows the font fallback option when the custom font is loading, i.e, there will always be a font shown to the user while rendering the selected font in your app, it won't be empty, which can be a little annoying.

Okay, but if you look to your browser nothing happened yet. And that is why we didn't include these global styles and, of course, we didn't call the Montserrat font at any component.

Including the global styles

Now it's time to include the global styles. That is really easy. Just go to the index.js file and import the styles with any name you want (I will be using GlobalFonts at this step) and call the global component before calling the App component



import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import GlobalFonts from './styles';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GlobalFonts />
    <App />
  </React.StrictMode>
);
reportWebVitals();

Now, you can use everything you create inside your global styles at any component of your project. In this tutorial, of course, I'm just using font styles, but you can use other styles to any html tag or any CSS class you want.

Using the custom font in your component

The last part of this tutorial is how you can use the font. If you did everything so far, it is really easy this last part. First, we create a new file called App.styled.js at src folder.

Inside of it we create the following code.



import styled from 'styled-components';

const CustomFont = styled.h1`
  font-family: 'Montserrat';
  font-weight: normal;
  font-size: 30px;
`;

export { CustomFont };

Well, this is very straight forward. Here we are just importing styled from styled-components and creating a CustomFont component, which will be a h1 tag styled with the Montserrat regular font with 30px size.

Then, we move to the App.js*, import this CustomFont component and change the code to shown all the Montserrat styles as shown in the code below.



import logo from './logo.svg';
import './App.css';
import { CustomFont } from './App.styled';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <CustomFont>Montserrat regular</CustomFont>
        <CustomFont style={{ fontStyle: 'italic' }}>Montserrat italic</CustomFont>
        <CustomFont style={{ fontWeight: 'bold' }}>Montserrat bold</CustomFont>
        <CustomFont style={{ fontWeight: 'bold', fontStyle: 'italic' }}>Montserrat bold italic</CustomFont>
      </header>
    </div>
  );
}

export default App;

And now, if you look into your browser, you will see the following.

As you can see, the Montserrat is now being used in your App.

Conclusion

As we can see in this simple tutorial, it is not difficult to embed custom fonts in your React project using styled-components and the CSS @font-face. Also, I really recommend you to embed the fonts into your project since, otherwise you can't guarantee it can be rendered properly at most of web browsers.

Well, I hope you all like this tutorial. If you're reading so far, thank you so much and if you have some questions, just let me know!

React authentication tutorial with Firebase V9 and Firestore

Vinícius Siqueira — Sun, 29 May 2022 11:13:48 +0000

In this tutorial we are going to understand how to use Firebase V9 to both setting up the authentication for your application and use the Firestore database to manage additional information about the users.

First things first, if you are reading this, you probably know what Firebase is. For those who does not, Firebase is a Backend-as-a-service platform that provides several tools to developers, like authentication, database, storage, hosting, test lab, notification, among others. It is maintained by Google and it is a very useful platform where you can develop scalable projects.

Now that we already know what Firebase is, let's start our React application. In order to do that we will use the create react app boilerplate. So, move to the folder you want and type the following in your terminal

npx create-react-app authentication

Once the creation is finished, go to the project folder an type

npm start

which, after running, is going to show you the famous React first page in your browser.

Planning

Okay! Now, let's talk a little about what we are going to create. I always like to plan every project and I suggest every reader to do the same. I encourage you to do that because I think it makes you more focused on what you really have to do. We can always code some components out of the blue, but if you are not focused on what you are doing, it is easy to waste a lot of time. Well, since authentication is the main purpose of this small project, it is a good idea to think about 3 different views:

Login view. We can assume that this is the first page of our app, when people arrive after type the url in the browser. This is going to be the view where the user can type your credentials to possibly access the home page of the application. As credentials we can consider the e-mail and password. So, this view will have a form with both e-mail and password inputs. After filling up both inputs, if the user is registered in the application he will be authorized to go to the home page. Otherwise, he cannot go further.
Register view. Well, since we are going to admit only registered users to go to the home page, we need to create a view where someone can create his own credentials to access the application. Again, since we are considering e-mail and password as credentials, this view is going to have a form with the desired e-mail and password the user wants to register himself.
Finally, we have the home page. This is going to be a view where only authorized users can access after his credentials are accepted by our application. So, let's suppose the home page is going to have a custom welcome message with the user's e-mail and the date when he registered into the application for the very first time.

I think this is a good starting point. This is not a very fancy application, so we do not have much different components to deal with and, that's why I'm not going to create a big component tree to our application.

This image could be a good app structure if you want to create a Form component and a Message Component. I am not going to do it, because I want to keep things simple.

The component root of the project is going to be the App component. This component is going to manage the routes of the application. So, it will be responsible to throw the user to the Login page, Register page or Home page.
Also, I am not going to create a big style for the application, since this is not the focus of this project.

Login Page

We start with the Login Page. As I said earlier, the Login Page will just contain a form with two inputs, one to the e-mail and another to the password. In order to do that, we create a new folder into the src that I will call views and inside of it create the folder Login with the files index.jsx and Login.jsx according to the following image

Inside index.jsx file we just export the default component from the Login.jsx file.

index.jsx

export { default } from './Login';

and inside Login.jsx we create the Login form.

Login.jsx

import React, { useState } from 'react';

const Login = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Login</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Dont't have an account?
          {' '}
          Register <span style={{ color: '#293462', fontWeight: 'bold' }}>here</span>
      </div>
    </div>
  );
};

export default Login;

Basically we create a form with a title where we wrote 'Login' and two inputs to deal with the e-mail and password followed by a submit button which, in the future will carry the function to send the user information to be validated. In the end we put a simple text so, if the user is not registered, he will be able to go to the Register Page. We have used the React hooks to create the states email and password and inside the input we use the onChange event handler with both handleEmail and handlePassword function to the e-mail and password inputs respectively.

Remark: I have used inline css in order to create a very simple style to the component. I will repeat some of these in the future. As I mentioned earlier, the focus here is not the style of the application but the logic itself. I strongly recommend you not to use css inline as I am doing here but instead use css modules or styled components, for example.

Register Page

After that, we create a new folder inside the views called Register with the files index.jsx and Register.jsx. These files will be almost exactly the same from those from Login Page as we can see below.

index.jsx

export { default } from './Register';

Register.jsx

import React, { useState } from 'react';

const Register = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Register</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Already have an account?
          {' '}
          Please <span style={{ color: '#293462', fontWeight: 'bold' }}>sign in</span>
      </div>
    </div>
  );
};

export default Register;

The only difference, for now, between Register.jsx and Login.jsx is the title and the message in the end. In Register component, we put the message to the user sign in if he already has an account.

The Home Page

The Home Page is the simplest among the three pages. We start doing de same by creating a new folder named Home inside views with the files index.jsx and Home.jsx.

The index.jsx will be similar to previous ones.

index.jsx

export { default } from './Home';

The Home.jsx will be super easy. Initially we just create a welcome message to the user. After including the authentication, we can improve it.

Home.jsx

import React from 'react';

const Home = () => {
  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Welcome user!</h1>
      <div>
        If you are here, you are allowed to it!
      </div>
    </div>
  );
};

export default Home;

Creating the routes for the pages

Now, the Login Page, Register Page and Home Page are created, but if you move to your browser you will not see those pages. That's because the application is still rendering what is inside the App component and we do not change anything there. Well, let's change this. Since the App component will be responsible to manage which page to be rendered, we now need the React Router library to create the specific routes. First, we need to install the react-router-dom library. So, go to your terminal and type

npm i react-router-dom

After the installation is completed, move to the App and change the entire code of it by the following

App.js

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

import Home from './views/Home';
import Login from './views/Login';
import Register from './views/Register';

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Login />} />
        <Route path='/register' element={<Register />} />
        <Route path='/home' element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

All right! What have we done? Well, actually it's not difficult. The react-router-dom library gives us, out of the blue, the hability to manage routes and, that way, the application know which component must render. In order to to that, we import BrowserRouter as Router, Routes and Route from the library.

We can understand the Router as a container that wraps the whole application and allows us to use routes, then we import all the views we created before and for each of it we create an specific Route inside Routes passing as props the path of the route and the element that should be rendered. In this case, we are passing the route '/' to the Login page, '/register' to the Register page and '/home' to the Home page.

Now, if you move to the browser, you will se the Login page, because the localhost url is the route '/', so the application is rendering the Login page.

Now, changing the url in the browser adding '/register' in the end will take us to the Register page

and, changing it to '/home' will take us to the Home page

Now, almost everything is fine but the links to change from the Login page to the Register page are still not working. Well, how could we make it work? In this case, we will need to use the useNavigate hook provided by the react-router-dom library. Its use is quite similar with the previous hook useHistory, which is not available anymore in React Router v6. We just need to import the useNavigate hook from the react-router-dom

import { useNavigate } from 'react-router-dom

call it inside the respective component

const navigate = useNavigate();

and use it in the span element with the onClick prop.
Remark: I also included the pointer cursor in the styles of the span tag so the mouse cursor is going to show a hand when it passes on the text, which shows the user that the text is clickable.

<span 
  onClick={() => navigate('/')}
  style={{ color: '#293462', fontWeight: 'bold', cursor: 'pointer' }}
>
  sign in
</span>

Making these changes to the Login and Register pages, this is the new code of them.

Login.jsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'

const Login = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate();

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Login</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Dont't have an account? Register {' '}
          <span 
            onClick={() => navigate('/register')}
            style={{ color: '#293462', fontWeight: 'bold', cursor: 'pointer' }}
          >
            here
          </span>
      </div>
    </div>
  );
};

export default Login;

Register.jsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const Register = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate();

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Register</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Already have an account? Please {' '}
          <span 
            onClick={() => navigate('/')}
            style={{ color: '#293462', fontWeight: 'bold', cursor: 'pointer' }}
          >
            sign in
          </span>
      </div>
    </div>
  );
};

export default Register;

and after all that we can now click on the span elements to be redirected to the specific pages.

Now, there is one thing missing. We can only access the Home Page by typing the corresponding route into the url. Of course, that is not what we want. In the end, after the user is signed in, we want the application to redirect him to the Home page. Someone clever could say that it would be enough to use the useNavigate hook in the login page again associated with the submit button. Something like this

const handleSubmit = (event) => {
  navigate('/home');
};
.
.
.
<button onClick={handleSubmit}>
  Submit
</button>

Well, that will work, but that creates a bitter feeling that both e-mail and password are worthless, right? Our application is receiving these inputs from the user and doing absolutely nothing with it. Actually, with this actual approach, the user does not need to fill out his e-mail and password to access the Home page.

And this is not what we want. As we said before, the Home page should only be accessed by an authenticated user. In the end, the handleSubmit function of the Login page needs to check if the user is already registered, and, if so, allows the access to the Home page. And that's what we are going to do in the next section.

Firebase Authentication and Firestore database

After we finally prepare our application, now we need to deal with the user authentication. As I said earlier, we will use the Google Firebase to do that. So, move to https://firebase.google.com/ in your browser. That's the page you will see

Now, click the console button in the top right corner of the page (you are going to need a Google account) and Firebase will redirect you to a page where all your projects will be available to be chosen. In that page, we click to add a new project. Then we have three simple steps:

Name the project. I am naming it as Authentication
Choose if you want Google Analytics or not. I am going to say yes;
Choose the Firebase account to the Google Analytics. I'm choosing the default one;

After that, your project will be created in Firebase. In the project console, we are going to choose both Authentication and Firestore.

First, we click in the Authentication card and after redirection, click in Start, then in e-mail and password authentication and then activate it with the respective toggle. After that, click Save.

Then, select the Firestore card, click in Create Database, choose if the database will be run in production mode or test mode and select the local of your cloud Firestore and click Activate

After that, we move to the home page of the project to register it.

We are almost there. Now move to the settings of the project, the second icon in the left bar, scroll down and you will find some important keys that you will have to import in your React application. Click to copy all this code.

Before coming back to the code, let's go to the terminal and install firebase as a dependency to our project

npm install firebase

Once it is finished, let's come back to our code. Inside the src folder, we create a folder called configs and inside of it, create a file called firebase.js

We now are going to paste the Firebase configuration inside of this file and make some changes.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: 'your apiKey here',
  authDomain: 'your authDomain here',
  projectId: 'your projectId here',
  storageBucket: 'your storageBucket here',
  messagingSenderId: 'your messagingSenderId here',
  appId: 'your appId here',
  measurementId: 'your measurementId here',
};

export const firebaseApp = initializeApp(firebaseConfig); // initialize app
export const db = getFirestore(); // this gets the firestore database

As you can see, in the code above, inside each field of the object firebaseConfig you put all your firebase codes.

Attention: If you intend to use git as a version control to your code and make it public so everyone can access it in your github, for example, it is not a good idea to simply paste your firebase code inside this file, because everyone could access your firebase API's. So, if you want to keep your keys protected, it's a good idea to create a .env file in the root of your project, paste these important keys there, include the .env file in your gitignore file and call the keys as React environment variables inside firebase.js file.

The elements in the .env file should not need the ' ' and you don't need to put comma or semicolon in the end of each line

.env structure example

REACT_APP_API_KEY=AIzaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
REACT_APP_AUTH_DOMAIN=authentication-XXXXX.aaaaaaaaaaaaa

Remark: Do not forget to include your .env file into your gitignore file.

Now that you have done that, move back to the firebase.js and change the firebase keys using the environment variables.

firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: `${process.env.REACT_APP_API_KEY}`,
  authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,
  projectId: `${process.env.REACT_APP_PROJECT_ID}`,
  storageBucket: `${process.env.REACT_APP_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.REACT_APP_MESSAGING_SENDER_ID}`,
  appId: `${process.env.REACT_APP_APP_ID}`,
  measurementId: `${process.env.REACT_APP_MEASUREMENT_ID}`,
};

export const firebaseApp = initializeApp(firebaseConfig); // initialize app
export const db = getFirestore(); // this gets the firestore database

Now, remember that we need to do two different things: register a new user and sign in a user. If we go to Firebase authentication documentation we can find two different functions available from Firebase authentication:

createUserWithEmailAndPassword that receives the parameters auth, email and password
signinWithEmailAndPassword that receives the same three parameters

We will use the first one to register a new user and the second to sign the user in the application. So, let's change the firebase.js file including these functions.

firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: `${process.env.REACT_APP_API_KEY}`,
  authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,
  projectId: `${process.env.REACT_APP_PROJECT_ID}`,
  storageBucket: `${process.env.REACT_APP_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.REACT_APP_MESSAGING_SENDER_ID}`,
  appId: `${process.env.REACT_APP_APP_ID}`,
  measurementId: `${process.env.REACT_APP_MEASUREMENT_ID}`,
};

export const firebaseApp = initializeApp(firebaseConfig); // initialize app
export const db = getFirestore(); // this gets the firestore database

//### REGISTER USER WITH FIREBASE AUTHENTICATION ###//
export const registerUser = (email, password) => {
  const auth = getAuth();
  return createUserWithEmailAndPassword(auth, email, password);
};

//### LOGIN USER WITH FIREBASE ###//
export const loginUser = (email, password) => {
  const auth = getAuth();
  return signInWithEmailAndPassword(auth, email, password);
};

We just import the functions getAuth, createUserWithEmailAndPassword and signInWithEmailAndPassword from firebase/auth and we create the functions registerUser and loginUser to be imported in the respective components.

First, we move to the Register page import the registerUser function

import { registerUser } from '../../configs/firebase';

from firebase.js and create the handleRegister function.

const handleRegister = () => {
    registerUser(email, password)
      .then((userCredential) => {
        alert('User created successfully!')
      })
      .catch((error) => {
        alert('Something went wrong!')
        const errorCode = error.code;
        console.log(errorCode);
      });
  }

This function uses the createUserWithEmailAndPassword that was originally exported from firebase.js. It is important to notice that this function returns a promise, so if it resolves positively, we are just using the native alert to show the message that the user was created successfully and, otherwise, we send a message that something went wrong. I strongly recommend you to create a specific alert component to show the message to the user, but we are not doing it here. To finish, we have to call this handleRegister into the submit button by calling it on the onClick props.

Register.jsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { registerUser } from '../../configs/firebase';

const Register = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate();

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  const handleRegister = () => {
    registerUser(email, password)
      .then((userCredential) => {
        alert('User created successfully!')
      })
      .catch((error) => {
        alert('Something went wrong!')
        const errorCode = error.code;
        console.log(errorCode);
      });
  }

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Register</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button onClick={handleRegister}>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Already have an account? Please {' '}
          <span 
            onClick={() => navigate('/')}
            style={{ color: '#293462', fontWeight: 'bold', cursor: 'pointer' }}
          >
            sign in
          </span>
      </div>
    </div>
  );
};

export default Register;

Now, let's go to the Register page and type an email and password and see what happens

It seems it is working. But what happened? Well, when the user clicked the Submit button, the application called the handleRegister that called the createUserWithEmailAndPassword and checked if everything was fine and created the user. Now let's see the authentication console in Firebase. If you go there you will realize that this new user was added to the list (now with only one user) of users that have credentials to be signed in.

Pretty good! Let's see what happened if we try to register with the same user again. I will keep the console open.

Ah-ha! So, as we can see, if an already registered user try to register again, the promise resolves negatively and since we create the console.log(errorCode) inside the catch function, it show exactly why. In this case, the firebase authentication shows us that the e-mail is already in use so it does not register the user again. I encourage you to submit an empty e-mail and password. It will, again, return an error saying that the e-mail is invalid.

Remark: In real word applications we can use this errorCode to show good messages to the user.

Now you already imagine what we are going to do, huh? Yes, you are right! We now are going to use the loginUser function created in firebase.js to sign in an existing user. In order to do this, we move to Login.jsx file, import the loginUser

import { loginUser } from '../../configs/firebase';

and call it inside the previous created handleSubmit function.

const handleSubmit = () => {
    loginUser(email, password)
      .then((userCredential) => {
        alert('User signed in');
        navigate('/home');
      })
      .catch((error) => {
        alert('Something went wrong!');
        const errorCode = error.code;
        console.log(errorCode);
      });
  };

The full Login.jsx becomes this way.

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { loginUser } from '../../configs/firebase';

const Login = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate();

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  const handleSubmit = () => {
    loginUser(email, password)
      .then((userCredential) => {
        alert('User signed in');
        navigate('/home');
      })
      .catch((error) => {
        alert('Something went wrong!');
        const errorCode = error.code;
        console.log(errorCode);
      });
  };

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Login</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button onClick={handleSubmit}>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Dont't have an account? Register {' '}
          <span 
            onClick={() => navigate('/register')}
            style={{ color: '#293462', fontWeight: 'bold', cursor: 'pointer' }}
          >
            here
          </span>
      </div>
    </div>
  );
};

export default Login;

Now let's see how it works in the browser.

Perfect! So, if you try to sign in with a user that is in the authentication list, the access will be allowed and the user will be redirected to the Home page. That's exactly what we wanted. If the user is not registered, we expect the access will be forbidden.

Yeah! In this case the access was not allowed and, in the console we see the message "user not found" which is exactly what is happening now.

Authorization

We just talked about authentication. Now it's time to set the authorization of our pages. Remember that we said before. We want that the Home Page to be accessed only if the user is authenticated. Otherwise, the user is redirected to the Login Page. In order to do that, we first need to include a button in the Home Page so the user can logout. First, let's move to the firebase.js file and import the signout from firebase/auth

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
} from 'firebase/auth';

and create in the end the logoutUser function

//### LOGOUT USER ###//
export const logoutUser = () => {
  const auth = getAuth();
  signOut(auth).then(() => {
    alert('User signed out!');
  }).catch((error) => {
    alert('Something went wrong!');
    const errorCode = error.code;
    console.log(errorCode);
  });
};

The changed firebase.js file becomes

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

import {
  getAuth,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: `${process.env.REACT_APP_API_KEY}`,
  authDomain: `${process.env.REACT_APP_AUTH_DOMAIN}`,
  projectId: `${process.env.REACT_APP_PROJECT_ID}`,
  storageBucket: `${process.env.REACT_APP_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.REACT_APP_MESSAGING_SENDER_ID}`,
  appId: `${process.env.REACT_APP_APP_ID}`,
  measurementId: `${process.env.REACT_APP_MEASUREMENT_ID}`,
};

export const firebaseApp = initializeApp(firebaseConfig); // initialize app
export const db = getFirestore(); // this gets the firestore database

//### REGISTER USER WITH FIREBASE AUTHENTICATION ###//
export const registerUser = (email, password) => {
  const auth = getAuth();
  return createUserWithEmailAndPassword(auth, email, password);
};

//### LOGIN USER WITH FIREBASE ###//
export const loginUser = (email, password) => {
  const auth = getAuth();
  return signInWithEmailAndPassword(auth, email, password);
};

//### LOGOUT USER ###//
export const logoutUser = () => {
  const auth = getAuth();
  signOut(auth).then(() => {
    alert('User signed out!');
  }).catch((error) => {
    alert('Something went wrong!');
    const errorCode = error.code;
    console.log(errorCode);
  });
};

Now we just import the logoutUser function in the Home Page and call it in the created Logout button

Home.jsx

import React from 'react';

import { logoutUser } from '../../configs/firebase';

const Home = () => {
  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Welcome user!</h1>
      <div>
        If you are here, you are allowed to it!
      </div>
      <button onClick={logoutUser}>
        Logout
      </button>
    </div>
  );
};

export default Home;

Nothing special so far. We still did not block the Home Page to unauthenticated users, but we are on our way to do it.

Well let's create the strategy to authorized and unauthorized pages to our application: the routes '/' and '/register' will be available always and the route '/home' will be available only for authenticated users. Right, but how do we know if a user is authenticated or not?

The Firebase authentication helps us with this task. We just need to use the onAuthStateChanged function. For more information we recommend the Firebase documentation that tells us to define an observer to identify if the user is authenticated or not. We are going to make use of the React Context API to create a global state related to that. I'm assuming that you know how to work with context, but if you don't, I suggest this link where I explain how to use it.

Well, in the src folder, we create a folder called context and inside of it we create the folder AuthContext with the file index.jsx.

src/context/AuthContext/index.jsx

import React, { createContext, useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from "firebase/auth";

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {

  const [currentUser, setCurrentUser] = useState(null);

  const auth = getAuth();

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const uid = user.uid;
        setCurrentUser(uid);
      } else {
        setCurrentUser(null);
      };
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );

};

Well, basically this context is constantly listening if there's any changes with the authentication and storing it in the variable currentUser. So, every time a user is authenticated, the currentUser will be equal to the user id of the Firebase authentication and if no user is authenticated this variable is null.

After creating this context we wrap the AuthProvider around the App component

App.js

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

import { AuthProvider } from './context/AuthContext';

import Home from './views/Home';
import Login from './views/Login';
import Register from './views/Register';

function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/register' element={<Register />} />
          <Route path='/home' element={<Home />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

export default App;

After this, we can use the user id anywhere we want and that is the information we need to allow the user to access or not the Home page. We will create a new generic component called PrivateRoute which will be inside the newly created components folder inside the src folder

The PrivateRoute component will be used to wrap the Home Page route component so if the currentUser exists it will render the Home Page and, otherwise it will throw the user to the Login Page

PrivateRoute.jsx

import React, { useContext } from 'react';
import { Navigate} from 'react-router-dom';
import { AuthContext } from '../../context/AuthContext';

const PrivateRoute = ({ children }) => {

  const { currentUser } = useContext(AuthContext);

  if (!!currentUser) {
    return children
  }
  return <Navigate to='/' />

};

export default PrivateRoute;

and then, we import the PrivateRoute in the App component and wrap the Home Page route.

App.js

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

import { AuthProvider } from './context/AuthContext';

import Home from './views/Home';
import Login from './views/Login';
import Register from './views/Register';
import PrivateRoute from "./components/PrivateRoute";

function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path='/' element={<Login />} />
          <Route path='/register' element={<Register />} />
          <Route path='/home' element={
            <PrivateRoute>
              <Home />
            </PrivateRoute>}
          />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

export default App;

Now, if we try to access the home page by the url route, the application will not allow us to do that and the Home Page is only accessed by authenticated users.

How to use Firestore to store data

Everything is working fine, but what is Firestore doing exactly? So far, nothing. And that's because we didn't call it for anything, actually. Let's change this. You can skip this if you don't want to learn how to store data information with Firestore database. If you are still here, let's recall some initial ideas. We wanted that when users logged in, they would be redirected to the Home Page with a custom welcome message that shows his e-mail and the date when they registered. But, for now, we just have the id of the user who access the Home Page through the AuthContext.

But, think about it. If we could store both the e-mail and the register date when the user register himself in the app with his own id and if we could recover this information inside the Home Page our problems would be solved. And a database is precisely the tool used to do that.

Moving back to the Firebase documentation we can find here how we can add data to Firestore. So we move back to the Register page and import the database db from firebase.js and we import the functions doc, setDoc and Timestamp from firebase/firestore and make a small change in the handleRegister so it can write inside the users collection of Firebase Firestore.

Register.jsx

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { registerUser, db } from '../../configs/firebase';
import { doc, setDoc, Timestamp } from 'firebase/firestore';

const Register = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate();

  const handleEmail = event => {
    setEmail(event.target.value);
  };

  const handlePassword = event => {
    setPassword(event.target.value);
  };

  const handleRegister = () => {
    registerUser(email, password)
      .then((userCredential) => {
        const user = userCredential.user
        setDoc(doc(db, 'users', user.uid), {
          email: email,
          registeredAt: Timestamp.fromDate(new Date()),
        });
        alert('User created successfully!')
      })
      .catch((error) => {
        alert('Something went wrong!');
        const errorCode = error.code;
        console.log(errorCode);
      });
  }

  return (
    <div style={{ textAlign: 'center' }}>
      <div>
        <h3>Register</h3>
      </div>
      <div>
        <input
          value={email}
          onChange={handleEmail}
          placeholder="Type your e-mail"
        />
      </div>
      <div>
        <input
          type="password"
          value={password}
          onChange={handlePassword}
          placeholder="Type your password"
        />
      </div>
      <button onClick={handleRegister}>
        Submit
      </button>
      <div style={{ fontSize: '12px' }}>
          Already have an account? Please {' '}
          <span 
            onClick={() => navigate('/')}
            style={{ color: '#293462', fontWeight: 'bold', cursor: 'pointer' }}
          >
            sign in
          </span>
      </div>
    </div>
  );
};

export default Register;

Before try it, move to the Firestore console, access the tab Rules and change the code inside of it to the following (specially if you select the production mode during configuration)

Now, let's try the application. We move to the Register page and create a new registration.

So, as you can see, now every time a new user register in the application, the e-mail and date of register is stored in Firestore in the collection users inside a document with the user id, under the fields email and registeredAt respectively. Now, we just need to get the data from Firestore inside the Home Page.

Reading the Firestore documentation we just import db from configs/firebase.js and doc and getDoc from firebase/firestore and use the useEffect hook to get this information from firestore every time any change happens in the component. We also import the AuthContext hook to get the user id to access the corresponding document in firestore. So we change the Home Page component this way

Home.jsx

import React, { useContext, useEffect, useState } from 'react';

import { logoutUser, db } from '../../configs/firebase';
import { doc, getDoc } from 'firebase/firestore';
import { AuthContext } from '../../context/AuthContext';

const Home = () => {

  const { currentUser } = useContext(AuthContext);

  const [email, setEmail] = useState(null);
  const [registered, setRegistered] = useState(null);

  useEffect(() => {
    const getUserInformation = async () => {
      const docRef = doc(db, "users", currentUser);
      const docSnap = await getDoc(docRef);

      if (docSnap.exists()) {
        const userData = docSnap.data();
        setEmail(userData.email);
        setRegistered(userData.registeredAt.toDate().toISOString().substring(0,10));
      } else {
        console.log("This document does not exists");
      }
    };

    getUserInformation();
  }, []);

  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Welcome {email}!</h1>
      <div>
        If you are here, you are allowed to it.
      </div>
      <div>
        Date of register: {registered}
      </div>
      <button onClick={logoutUser}>
        Logout
      </button>
    </div>
  );
};

export default Home;

And now, every time a user access the application, the Home Page will display his e-mail and date of registration.

Conclusion

It's not too difficult to set up a project with Firebase and use its features (Firestore and Firebase authentication) to handle user authentication and authorization with React!

I hope you enjoy and if you have any questions, just let me know! Thank you all!

How to use the React Context API?

Vinícius Siqueira — Thu, 19 May 2022 10:28:16 +0000

Okay, React Context API is among us for a while now, since version 16.3 of React. But should we use it? And, most importantly, how can we use React Context API properly and what kind of problem we can solve with it?

In this discussion I am assuming the reader has a simple knowledge about React and React hooks API.

The problem

In order to show the usual problem to be solved with React Context API, I created a very simple React App. I just used the boilerplate of create react app

npx create-react-app react-context

and, once the application was ready I created the folder components inside src and inside of it I added the folders App, ProductsList and ProductItem as shown in the following image.

Here is the code of each file.

App/index.jsx

import React, { useState } from 'react';

import ProductsList from '../ProductsList';

const App = () =>  {

  const initialProducts = [
    { id: 1, name: 'Apple', price: 0.45 },
    { id: 2, name: 'Onion', price: 0.54 },
    { id: 3, name: 'Meat', price: 3.55 },
    { id: 4, name: 'Milk', price: 0.86 },
    { id: 5, name: 'Bread', price: 1.18 },
  ];

  const [products, setProducts] = useState(initialProducts);

  const handleDeleteProduct = (product) => {
    const productElements = products.filter(prod => prod.id !== product.id);
    setProducts(productElements);
  };

  return (
    <ProductsList products={products} deleteProduct={handleDeleteProduct} />
  );

}

export default App;

ProductsList/index.jsx

import React from 'react';

import ProductItem from '../ProductItem';

const ProductsList = ({ products, deleteProduct }) => {
  return (
    <div style={{ marginLeft: '10px' }}>
      <h3>Products List</h3>
      <div>
        {products.map((product) => (
          <ProductItem 
            key={product.id}
            product={product}
            deleteProduct={deleteProduct}
          />
        ))}
      </div>
    </div>
  );
};

export default ProductsList;

ProductItem/index.jsx

import React from 'react';

const ProductItem = ({ product, deleteProduct }) => {
  return (
    <div style={{ 
      backgroundColor: '#646FD4',
      borderRadius: '5px',
      width: '120px',
      marginBottom: '10px' 
    }}>
      <div style={{ 
        textAlign: 'center',
        fontSize: '18px',
        fontWeight: 'bold',
        color: '#F5F5F5'
      }}>
        {product.name}
      </div>
      <div style={{
        textAlign: 'center',
        fontSize: '14px',
        fontWeight: 'bold',
        color: '#F5F5F5'
      }}>
        {product.price.toLocaleString("en-IE", {style:"currency", currency:"EUR"})}
      </div>
      <div style={{ 
        marginTop: '5px',
        textAlign: 'center',
      }}>
        <button 
          style={{
            backgroundColor: '#F32424',
            border: '1px solid #F32424',
            borderRadius: '5px',
            padding: '6px 8px',
            color: '#FFFFFF',
            fontWeight: 'bold',
            marginBottom: '5px',
          }}
          onClick={() => deleteProduct(product)}
        >
          Apagar
        </button>
      </div>
    </div>
  );
};

export default ProductItem;

Important thing here: I do not use css styles inline as shown in the code above. I'm just passing it inline because I wanted a very simple style instead of show you all the raw html. So, sorry for that! I hope you understand me.

Well, basically, the App component has an array of products as its state and a function that delete from that array some specific product. It only renders the ProductList component that receives both the array of products and the delete function as props.

The ProductsList component, as mentioned above receives the array of products and uses the map method to render to each product of the array one instance of the ProductItem component.

The ProductItem component just receives the product and the deleteProduct function as props and renders a simple div, showing the name and price of product and a button that, once clicked, deletes that product.

After all that effort, let's see what we have just created

Okay! Pretty good! Now, let's understand the hierarchy tree of our application so far.

It's just a simple hierarchy tree but it's enough to understand what is happening: despite the function handleDeleteProduct is created in the App component, since it need the use the products array to filter the element to be deleted, it will only be used in the ProductItem component and, even though, the ProductsList component needs to receive it by the App component to pass it, again as props to its son, the ProductItem component. In this situation, the ProductsList component is just a bridge where the prop needs to pass so it can be delivered into the component that will really use it.

This is called prop drilling, which as the name suggests, is basically a situation when the same data is being sent at almost every level due to requirements in the final level. Every React developer will face this situation eventually. You could tell me, come on, this is not a problem at all to pass it through the ProductList component but believe me, in a real world application, with a huge hierarchy tree, you can face the problem of one parent component passing props to a child component after several nodes in different directions. And yes, this can become a hell. More than that, in a real world application, we usually deal with other libraries in our projects and we need to use every single prop in those. For example, generally I use the prop-types library. Using this library, we need to set the type of each prop of the component and yes, it is very annoying to pass the same data to several components just because of some leaf component needs to use one element from the root or from some node above.

Okay, after this, kind of big explanation, how can we avoid the prop drilling? Well, let's think about functions in programming. You can have some variables defined locally or globally. Every single global variable can be used in any function as a parameter but none local variables can be used globally. So, by that logic, we should think about those data globally, right?

Right. Actually, roughly speaking, from the React point of view, our components play the same role as functions (remember the name function components?) in procedural programming and props are, exactly what you are thinking, local variables. And yes, React Context API will basically allow us to use some data globally in our components. That way, every single state in the context can be passed directly only to those components that really need to use it.

The solution

Well, basically, the solution requires 3 steps:

Create the context;
Provide the context;
Consume the context;

Let's start with creating our context. In order to do that, I usually create a new folder inside src, called context, according to the following image.

Inside the context folder, we create a new file named ProductsContext.jsx with the following code

ProductsContext.jsx

import { createContext } from 'react';

const ProductsContext = createContext({});

export const ProductsProvider = ProductsContext.Provider;

export default ProductsContext;

We use the createContext function to (guess what?) create a the context and we store it in the variable ProductsContext and then, we use the ProductsContext.Provider to generate a wrapper from which we will deliver values to all components inside this wrapper. This provider is stored in the variable ProductsProvider.

Once this is done, we go back to the App component and import the provider.

import { ProductsProvider } from '../../context/ProductsContext';

After that, we wrap up the everything in the return of the App component and we pass the handleDeleteProduct function as a method of the value object of the provider. Roughly speaking, the handleDeleteProduct is kind of becoming one global variable (in this case a function) that can be used to any component child of the App component. We also remove the props deleteProduct that was initially being passed to the ProductsList component.

App/index.jsx

import React, { useState } from 'react';

import { ProductsProvider } from '../../context/ProductsContext';

import ProductsList from '../ProductsList';

const App = () =>  { 

  const initialProducts = [
    { id: 1, name: 'Apple', price: 0.45 },
    { id: 2, name: 'Onion', price: 0.54 },
    { id: 3, name: 'Meat', price: 3.55 },
    { id: 4, name: 'Milk', price: 0.86 },
    { id: 5, name: 'Bread', price: 1.18 },
  ];

  const [products, setProducts] = useState(initialProducts);

  const handleDeleteProduct = (product) => {
    const productElements = products.filter(prod => prod.id !== product.id);
    setProducts(productElements);
  };

  return (
    <ProductsProvider value={{ deleteProduct: handleDeleteProduct }}>
      <ProductsList products={products} />
    </ProductsProvider>
  );

}

export default App;

Since we don't have to use the handleDeleteProduct inside the ProductsList component, we remove the deleteProduct as a prop of it and, of course, we do not have to pass it as props into the ProductItem

ProductsList/index.jsx

import React from 'react';

import ProductItem from '../ProductItem';

const ProductsList = ({ products }) => {
  return (
    <div style={{ marginLeft: '10px' }}>
      <h3>Products List</h3>
      <div>
        {products.map((product) => (
          <ProductItem 
            key={product.id}
            product={product}
          />
        ))}
      </div>
    </div>
  );
};

export default ProductsList;

Now, in the ProductItem component, we need to call the context in order to use the deleteProduct method to delete the product item. To do that, we make use of the useContext hook. So, we import the useContext from the React library and the ProductContext and just create a variable value to store the (again!) value of the context by making use of the useContext hook. To finish, we remove the deleteProduct as a received prop of ProductItem component and call the value.deleteProduct in the onClick of the delete button.

ProductItem/index.jsx

import React, { useContext } from 'react';

import ProductsContext from '../../context/ProductsContext';

const ProductItem = ({ product }) => {

  const value = useContext(ProductsContext);

  return (
    <div style={{ 
      backgroundColor: '#646FD4',
      borderRadius: '5px',
      width: '120px',
      marginBottom: '10px' 
    }}>
      <div style={{ 
        textAlign: 'center',
        fontSize: '18px',
        fontWeight: 'bold',
        color: '#F5F5F5'
      }}>
        {product.name} 
      </div>
      <div style={{
        textAlign: 'center',
        fontSize: '14px',
        fontWeight: 'bold',
        color: '#F5F5F5'
      }}>
        {product.price.toLocaleString("en-IE", {style:"currency", currency:"EUR"})}
      </div>
      <div style={{ 
        marginTop: '5px',
        textAlign: 'center',
      }}>
        <button 
          style={{
            backgroundColor: '#F32424',
            border: '1px solid #F32424',
            borderRadius: '5px',
            padding: '6px 8px',
            color: '#FFFFFF',
            fontWeight: 'bold',
            marginBottom: '5px',
          }}
          onClick={() => value.deleteProduct(product)}
        >
          Delete
        </button>
      </div>
    </div>
  );
};

export default ProductItem;

Well, that's it! We finish the task and we can use the handleDeleteProduct function defined in the App component in a non-direct of its child components. Again, this was just a simple application specifically created to show the prop drilling problem and how to solve it using the React context API. It can be tempting to say that we increase the difficulty of the example (which I definitely agree, considering only these components), but in a real world application, the React context API really increase your productivity.

An important observation to make here is that this context was very simple. But we can create contexts that passes through more than just a simple javascript function, but also entirely other components. For example, I use context to pass through alerts and modals components. This increases the productivity a lot, since every time I need to show an alert or a modal in any page, I just need to call the respective context as a function. I can also notice that many people is using contexts today as an alternative to Redux.