DEV Community: Olorì Àṣàbí

Form, Page Navigation using React-Router-Dom with Ionic-React, TypeScript, React-Hook-Form, React-Redux, and @reduxjs/toolkit!

Olorì Àṣàbí — Mon, 07 Aug 2023 12:56:43 +0000

Welcome to this comprehensive Ionic-React-Native tutorial, where we'll explore key aspects such as file structuring, page navigation using React-Router-Dom, state management with React-Redux and @reduxjs/toolkit, seamless API connections with @reduxjs/toolkit/query/react, and elegant styling using Ionic. Let's dive in!

To get started, follow these steps to create your application using Create React App and install the necessary dependencies for managing user state with React-Redux and React Router. Before proceeding, ensure you have Node.js installed, a code editor (preferably Visual Studio Code), and a basic understanding of React.

Step 1: Create the React Application

Open your terminal or command prompt and run the following command to create a new React application using Create React App:

npm install -g @ionic/cli

Now, create the Ionic React Native app with TypeScript template using the following command:

ionic start my_ionic_react_native_app blank --type=react --capacitor --language=typescript

This will generate a new folder named my-app containing the basic structure of your React application.

This command creates a new Ionic app with a blank template, using React as the framework, TypeScript as the language, and Capacitor for native integration.

Step 2: Navigate to the Application Directory

Change your working directory to the newly created application folder:

cd my_ionic_react_native_app

Step 3: Run the App

To run the app in a development server, use the following command:

ionic serve

This will open the app in your web browser, and you can see the web version of your Ionic React Native app.

Step 4: Set Up Native Platforms (Optional)

If you want to build the app for native platforms (iOS and Android), you'll need to set up the native platforms using Capacitor. First, make sure you have Xcode installed for iOS development and Android Studio for Android development.

To add the native platforms, run the following commands:

npx cap add ios
npx cap add android

Step 5: Build the Native App

After adding the native platforms, you can build the app for each platform:

npx cap copy
npx cap open ios   // For iOS
npx cap open android   // For Android

These commands will open the native projects in Xcode and Android Studio, where you can build, run, and test your app on actual devices or emulators.

Step 6: Install React-Redux, React Router, @reduxjs/toolkit, and React Hook Form Dependencies

Now that we have our Ionic React Native app set up, let's proceed with installing the necessary dependencies to manage user state, handle API connections, and handle form input with React Hook Form.

In your terminal or command prompt, run the following command to install the required dependencies:

npm install react-redux react-router-dom @reduxjs/toolkit @reduxjs/toolkit/query/react react-hook-form

With these dependencies installed, our app is equipped with powerful tools to efficiently manage state, handle API connections with @reduxjs/toolkit/query/react, and seamlessly handle form input using React Hook Form.

Step 7: Organizing File Structure

A well-organized file structure is crucial for a scalable and maintainable project. Let's reorganize our project to keep it clean and organized. Here's a suggested file structure for our Ionic React Native app:

my_ionic_react_native_app
  |- src
        |- pages
          |- SignUp.tsx
          |- Login.tsx
          |- Home.tsx
          |- ForgotPassword.tsx
          |- ResetPassword.tsx
      |- store
          |- apiSlice.ts
          |- rootReducer.ts
      |- interfaces.ts
      |- Routes.tsx
      |- App.tsx
      |- index.tsx
  |- public
      |- index.html
      |- ...

In this file structure, we've grouped related components into the components folder, pages into the pages folder, and Redux-related code into the store folder. The interfaces.ts file is used to define types and interfaces for better type safety and code consistency.

Step 8: Setting Up React Router with Ionic

In the Routes.tsx file, we'll set up React Router with Ionic to handle navigation between different pages. Replace the content of Routes.tsx with the following code:

import React from 'react';
import { IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route, Redirect } from 'react-router-dom';
import SignUp from './pages/SignUp';
import Login from './pages/Login';
import Home from './pages/Home';
import ForgotPassword from './pages/ForgotPassword';
import ResetPassword from './pages/ResetPassword';

const Routes: React.FC = () => {
  return (
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/" component={Home} exact />
        <Route path="/sign-up" component={SignUp} exact />
        <Route path="/login" component={Login} exact />
        <Route path="/forgot-password" component={ForgotPassword} exact />
        <Route path="/reset-password" component={ResetPassword} exact />
        {/* Add other routes as needed */}
        <Route exact path="/">
          <Redirect to="/" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  );
};

export default Routes;

Step 9: Setting up the Project and Store

Create a file named interface.ts and add the all necessary interface to it:


//interface.ts

export interface User {
  id: number;
  username: string;
  email: string;
  // Add more user properties as needed
}

export interface UserState {
  user: User | null;
  isLoading: boolean;
  error: string | null;
}

export interface RootState {
  user: UserState;
}

Inside the store folder, create a file named userSlice.ts with the following content:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { User, RootState, UserState } from './interface';

const initialState: UserState = {
  user: null,
  isLoading: false,
  error: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      state.user = action.payload;
      state.isLoading = false;
      state.error = null;
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.isLoading = action.payload;
    },
    setError: (state, action: PayloadAction<string>) => {
      state.isLoading = false;
      state.error = action.payload;
    },
  },
});

// Export actions
export const { setUser, setLoading, setError } = userSlice.actions;

// Selector to get the user from the state
export const selectUser = (state: RootState) => state.user.user;

// Selector to get the loading state
export const selectLoading = (state: RootState) => state.user.isLoading;

// Selector to get the error
export const selectError = (state: RootState) => state.user.error;

export default userSlice.reducer;

In the src folder, create a new folder named store to house our Redux-related code. In your rootReducer.ts file (in the same store folder), import and add the userSlice reducer to the root reducer:

import { combineReducers } from '@reduxjs/toolkit';
import userReducer from './userSlice'; // Import your userSlice reducer here

const rootReducer = combineReducers({
  // Other reducers go here
  user: userReducer,
});

export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

Next, create a file named apiSlice.ts in the store folder. This file will handle API connections using @reduxjs/toolkit/query/react. Here's a basic example of how it can be structured:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

// Define your API endpoints and base query
const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com/' }), // Replace with your API base URL
  endpoints: (builder) => ({
    // Define your API endpoints here
    // For example:
    // getUserById: builder.query<User, number>({
    //   query: (id) => `user/${id}`,
    // }),
  }),
});

// Export the hooks for using the API endpoints
// For example:
// export const { useGetUserByIdQuery } = api;

// Export the API object to use in the store
export default api;

Inside the store folder (same location where userSlice.ts and rootReducer.ts are located), create a file named store.ts with the following content:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer'; // Import your root reducer here

const store = configureStore({
  reducer: rootReducer,
  // Add middleware or other store configurations as needed
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof rootReducer>;

export default store;

Now, let's set up the Redux store in App.tsx. Import the necessary dependencies and the rootReducer from the store folder:

import React from 'react';
import { Provider } from 'react-redux';
import Routes from './Routes';
import store from './store/store'; 

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <Routes />
    </Provider>
  );
};

export default App;

With these changes, you've now properly set up the project structure and the Redux store using @reduxjs/toolkit/query/react for API connections.

Step 10: Using React Hook Form for Form Handling with Ionic React

Create a file named interface.ts and add the all necessary interface to it:

// interface.ts
export interface SignUpForm {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
}

export interface LoginForm {
  email: string;
  password: string;
}

export interface ForgotPasswordForm {
  email: string;
}

export interface ResetPasswordForm {
  newPassword: string;
  confirmPassword: string;
}

Component Organization: Create a PasswordField component to handle password input with show/hide password functionality:
SignUp.tsx

// Create PasswordField.tsx
import React, { useState } from 'react';
import { IonInput, IonIcon } from '@ionic/react';
import { eye, eyeOff } from 'ionicons/icons';

interface PasswordFieldProps {
  label: string;
  field: any;
  fieldState: any;
  register: (name: string) => void;
}

const PasswordField: React.FC<PasswordFieldProps> = ({ label, field, fieldState, register }) => {
  const [visibility, setVisibility] = useState<"text" | "password">("password");

  const toggleVisibility = () => {
    setVisibility((prevVisibility) => (prevVisibility === "password" ? "text" : "password"));
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', gap: '20px' }}>
      <IonInput
        {...field}
        type={visibility}
        onPaste={(e) => {
          e.preventDefault();
          return false;
        }}
        required={true}
        onIonChange={(e) => field.onChange(e.detail.value)}
        onKeyUp={() => {
          register(field.name);
        }}
        style={{
          color: '#345430',
          fontSize: '10px',
          borderRadius: '10px',
          border: '2px solid',
          borderColor: fieldState.invalid ? 'red' : '#345430',
          height: '50px',
        }}
      />
      <IonIcon
        icon={visibility === 'text' ? eye : eyeOff}
        onClick={toggleVisibility}
        style={{ color: '#345430' }}
      />
    </div>
  );
};

export default PasswordField;

**Use the PasswordField component in your SignUp component and apply the other suggestions to your code as well:

import React from 'react';
import { IonContent, IonButton, IonLabel, IonItem, IonPage, IonInput } from '@ionic/react';
import { useForm, Controller } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { setUser, selectLoading } from './store/userSlice';
import { SignUpForm } from './interface';
import PasswordField from '../components/PasswordField'; // Import the PasswordField component

const SignUp: React.FC = () => {
  const dispatch = useDispatch();
  const isLoading = useSelector(selectLoading);

 const { control, handleSubmit, getValues, setError: setErrorFromForm, watch, formState: { errors, isValid }, register, trigger } = useForm<SignUpForm>({
    defaultValues: {
      email: '',
      username: '',
      password: '',
      confirmPassword: '',
    },
  });

  const onSubmit = (data: SignUpForm) => {
    // Handle sign up form submission
    console.log(data);

    // Example: Dispatch setUser action to update user data in the state
    dispatch(setUser(data));
  };

  const handleConfirmPassword = () => {
    const { password, confirmPassword } = getValues();
    if (password !== confirmPassword) {
      setErrorFromForm('confirmPassword', { type: 'manual', message: 'Passwords do not match' });
    }
  };

  const confirmPassword = watch('confirmPassword');

return (
    <IonPage>
      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <IonItem>
            <IonLabel position="floating">Username</IonLabel>
            <Controller
              render={({ field, fieldState }) => (
                <IonInput
                  {...field}
                  {...register("username")}
                  placeholder="Enter Username"
                  aria-label="Username"
                  onIonChange={(e) => field.onChange(e.detail.value)}
                  required={true}
                  onKeyUp={() => {
                    trigger('username');
                  }}

                  style={{
                    color: '#345430',
                    fontSize: '10px',
                    borderRadius: '10px',
                    border: '2px solid',
                    borderColor: fieldState.invalid ? 'red' : '#345430',
                    height: '50px',
                  }}
                />
              )}
              name="username"
              control={control}
              rules={{
                required: 'Username is required',
               pattern: {
                value: /^[A-Za-z0-9_!@#$%^&*()-]+$/,
                message: "Username must contain only letters, numbers, underscores, and symbols !@#$%^&*()-",
              },
            minLength: {
              value: 4,
              message: "Username must be at least 4 characters",
            },
            maxLength: {
              value: 20,
              message: "Username must be less than 20 characters",
            }
              }}
            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.username?.message}</span>
          <IonItem>
            <IonLabel position="floating">Email</IonLabel>
            <Controller
              render={({ field, fieldState }) => 
            <IonInput 
            {...field}
            {...register("email")}
            onIonChange={(e) => field.onChange(e.detail.value)}
                    placeholder="Enter Email" 
                    aria-label="Email"
                required={true}
                    onKeyUp={() => {
                        trigger("email")
                    }}
                            style={{
                                color: "#345430",
                                fontSize: "10px",
                                borderRadius: "10px",
                                border: "2px solid",
                                borderColor: fieldState.invalid ? "red" : "#345430",
                                height: "50px",
                            }}

            />}
              name="email"
              control={control}
              rules={{ 
                required: 'Email is required',
                pattern: {
                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                        message: "Invalid email address",
             } }}
            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.email?.message}</span>
          <IonItem>
            <IonLabel position="floating">Password</IonLabel>
            <Controller
              render={({ field, fieldState }) => 
            <div 
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                width: "100%",
                gap: "20px",
              }}>
    <PasswordField
            label="Password"
            field={field.password}
            fieldState={fieldState.password}
            register={{...register("password")}}
          />
          <span style={{ color: 'red' }}>{errors.password?.message}</span>
              </div>
                }
              name="password"
              control={control}
                  rules={{
                required: "Password is required",
                pattern: {
                    value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.!@#$%^&*])[A-Za-z\d.!@#$%^&*]{8,20}$/,
                    message: "Password must have a capital letter, a small letter, a number, and a symbol (e.g., .!@#$%^&*)",
                  },
                minLength: {
                  value: 8,
                  message: "Password must be at least 8 characters",
                },
                maxLength: {
                  value: 20,
                  message: "Password must be less than 20 characters",
                },
              }}            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.password?.message}</span>
   <IonItem>
            <IonLabel position="floating">Confirm Password</IonLabel>
            <Controller
              render={({ field, fieldState }) =>
  <div 
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                width: "100%",
                gap: "20px",
              }}>
            <PasswordField
            label="confirmPassword"
            field={field.confirmPassword}
            fieldState={fieldState.confirmPassword}
            register={{...register("confirmPassword")}}
          />
              </div>}
              name="confirmPassword"
              control={control}
              rules={{ required: 'Confirm Password is required' }}
            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.confirmPassword?.message}</span>

          <IonButton type="submit" disabled={!isValid || isLoading}>
            {isLoading ? 'Signing Up...' : 'Sign Up'}
          </IonButton>
          {errors && <span style={{ color: 'red' }}>{errors}</span>}
        </form>
      </IonContent>
    </IonPage>
  );
};

export default SignUp;

import { IonContent, IonButton, IonLabel, IonItem, IonPage, IonInput } from '@ionic/react';
import { useForm, Controller } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { setUser, selectLoading } from './store/userSlice';
import { LoginForm } from './interface';
import PasswordField from '../components/PasswordField';

const LoginPage = () => {
    const dispatch = useDispatch();
    const isLoading = useSelector(selectLoading);


const { control, handleSubmit,  formState: { errors, isValid }, register, trigger } = useForm<LoginForm>({
    defaultValues: {
      email: "",
      password: "",
    },
  });


const onSubmit = (data: LoginForm) => {
  // Handle login form submission
  dispatch(setUser(data));
};
  return (
 <IonPage>
    <IonContent>
    <form onSubmit={handleSubmit(onSubmit)}>
        <IonItem>
        <IonLabel position="floating">Email</IonLabel>
        <Controller
             name="email"
             control={control}
             rules={{
               required: 'Email is required',
              pattern: {
             value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
             message: "Invalid email address",
              }
              }}
              render={({ field, fieldState }) => (
                <IonInput
                  {...field}
                  placeholder="Enter Email"
                  aria-label="Email"
                  onIonChange={(e) => field.onChange(e.detail.value)}
                  required={true}
                  onKeyUp={() => {
                    trigger('email');
                  }}
                  {...register("email")}
                  style={{
                    color: '#345430',
                    fontSize: '10px',
                    borderRadius: '10px',
                    border: '2px solid',
                    borderColor: fieldState.invalid ? 'red' : '#345430',
                    height: '50px',
                  }}
                />
              )}
              />
             <span style={{ color: 'red' }}>{errors.email?.message}</span>
        </IonItem>
        <IonItem>
        <IonLabel position="floating">Password</IonLabel>
        <Controller
    render={({ field, fieldState }) => (
      <PasswordField
        label="Password"
        field={field.password}
        fieldState={fieldState.password}
        register={{...register("password")}}
      />
    )}
    name="password"
    control={control}
    rules={{
      required: "Password is required",
      pattern: {
        value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.!@#$%^&*])[A-Za-z\d.!@#$%^&*]{8,20}$/,
        message: "Password must have a capital letter, a small letter, a number, and a symbol (e.g., .!@#$%^&*)",
      },
      minLength: {
        value: 8,
        message: "Password must be at least 8 characters",
      },
      maxLength: {
        value: 20,
        message: "Password must be less than 20 characters",
      },
    }}
  />
            <span style={{ color: 'red' }}>{errors.password?.message}</span>
        </IonItem>
        <IonButton type="submit" disabled={!isValid || isLoading}>
            {isLoading ? 'Logging In...' : 'Login'}
          </IonButton>
          {errors && <span style={{ color: 'red' }}>{errors}</span>}
        </form>
    </IonContent>
 </IonPage>
  )
}

export default LoginPage

ResetPassword.tsx

import React from 'react';
import { IonContent, IonButton, IonLabel, IonItem, IonPage,  IonInput } from '@ionic/react';
import { useForm, Controller } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { setUser, selectLoading } from './store/userSlice';
import { ResetPasswordForm } from './interface';
import PasswordField from '../components/PasswordField';

const ResetPassword: React.FC = () => {
  const dispatch = useDispatch();
  const isLoading = useSelector(selectLoading);

  const { control, handleSubmit, getValues, setError: setErrorFromForm, formState: { errors, isValid },  register, trigger } = useForm<ResetPasswordForm>({
    defaultValues: {
      newPassword: "",
      confirmPassword: "",
    },
  });


  const onSubmit = (data: ResetPasswordForm) => {
    // Handle reset password form submission
    dispatch(setUser(data));
  };

  const handleConfirmPassword = () => {
    const { newPassword, confirmPassword } = getValues();
    if (newPassword !== confirmPassword) {
      setErrorFromForm('confirmPassword', { type: 'manual', message: 'Passwords do not match' });
    }
  };

  return (
    <IonPage>
      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          {/* New Password Field */}
          <IonItem>
            <IonLabel position="floating">New Password</IonLabel>
            <Controller
              render={({ field, fieldState }) => (
                <PasswordField
                  label="New Password"
                  field={field.newPassword}
                  fieldState={fieldState.newPassword}
                  register={{...register("password")}}
                />
              )}
              name="newPassword"
              control={control}
              rules={{
                required: "New Password is required",
                pattern: {
                    value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.!@#$%^&*])[A-Za-z\d.!@#$%^&*]{8,20}$/,
                    message: "Password must have a capital letter, a small letter, a number, and a symbol (e.g., .!@#$%^&*)",
                  },
                  minLength: {
                    value: 8,
                    message: "Password must be at least 8 characters",
                  },
                  maxLength: {
                    value: 20,
                    message: "Password must be less than 20 characters",
                  },
              }}
            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.newPassword?.message}</span>

          {/* Confirm Password Field */}
          <IonItem>
            <IonLabel position="floating">Confirm Password</IonLabel>
            <Controller
              render={({ field, fieldState }) => (
                <PasswordField
                  label="Confirm Password"
                  field={field.confirmPassword}
                  fieldState={fieldState.confirmPassword}
                  register={{...register("confirmPassword")}}
                  onKeyUp={handleConfirmPassword}
                />
              )}
              name="confirmPassword"
              control={control}
              rules={{ required: 'Confirm Password is required' }}
            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.confirmPassword?.message}</span>

          <IonButton type="submit" disabled={!isValid || isLoading}>
            {isLoading ? 'Submitting...' : 'Submit'}
          </IonButton>
          {errors && <span style={{ color: 'red' }}>{errors}</span>}
        </form>
      </IonContent>
    </IonPage>
  );
};

export default ResetPassword;

ForgotPassword.tsx

import React from 'react';
import { IonContent, IonButton, IonLabel, IonItem, IonPage, IonInput } from '@ionic/react';
import { useForm, Controller } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { setUser,  selectLoading } from './store/userSlice';
import { ForgotPasswordForm } from './interface';
import PasswordField from '../components/PasswordField';

const ForgotPassword: React.FC = () => {
  const dispatch = useDispatch();
  const isLoading = useSelector(selectLoading);

  const { control, handleSubmit,  formState: { errors, isValid }, register, trigger } = useForm<ForgotPasswordForm>({
    defaultValues: {
      email: "",
    },
  });

  const onSubmit = (data: ForgotPasswordForm) => {
    // Handle forgot password form submission
    dispatch(setUser(data));
  };

  return (
    <IonPage>
      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          {/* Email Field */}
          <IonItem>
            <IonLabel position="floating">Email</IonLabel>
            <Controller
              name="email"
              control={control}
              rules={{
                required: 'Email is required',
                pattern: {
                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                  message: "Invalid email address",
                },
              }}
              render={({ field, fieldState }) => (
                <IonInput
                  {...field}
                  {...register("password")}
                  placeholder="Enter Email"
                  aria-label="Email"
                  onIonChange={(e) => field.onChange(e.detail.value)}
                  required={true}
                  onKeyUp={() => {
                    trigger('email');
                  }}
                  style={{
                    color: '#345430',
                    fontSize: '10px',
                    borderRadius: '10px',
                    border: '2px solid',
                    borderColor: fieldState.invalid ? 'red' : '#345430',
                    height: '50px',
                  }}
                />
              )}
            />
          </IonItem>
          <span style={{ color: 'red' }}>{errors.email?.message}</span>

          <IonButton type="submit"  disabled={!isValid || isLoading}>
            {isLoading ? 'Submitting...' : 'Submit'}
          </IonButton>
          {errors && <span style={{ color: 'red' }}>{errors}</span>}
        </form>
      </IonContent>
    </IonPage>
  );
};

export default ForgotPassword;

Conclusion

In this tutorial, we covered the essentials of creating forms, debugging, and page navigation in an Ionic-React-Native application. We harnessed tools like TypeScript, React Hook Form, React-Redux, and @reduxjs/toolkit to build a powerful app.

We started by mastering form creation with React Hook Form, ensuring accurate user input through validation. Then, we explored debugging techniques, fine-tuning our app for a smooth user experience.

Our journey continued with React-Router-Dom and Ionic, where we learned to seamlessly navigate between app sections, enhancing user engagement.

We leveraged Redux and @reduxjs/toolkit to manage state efficiently, establishing a solid architecture for communication between components.

By completing this tutorial, you've gained a strong foundation for crafting advanced Ionic-React-Native apps. Good luck applying these skills to your future projects!

Feel free to contact me for jobs and project opportunities

How to create table with data grid, checkbox and pagination using React table and Tailwind CSS.

Olorì Àṣàbí — Thu, 08 Sep 2022 21:34:21 +0000

In this tutorial, we will be learning how to build a smart React data table UI with many functionalities such as searching, row and column selection, customised pagination using numbers using react-table and styling with Tailwind CSS.

Make sure you have the necessary requirements.

Node.js installed
Code editor ( Visual Studio Code preferably )
Basic knowledge of React

React Table

React-Table UI library is very lightweight and offers all the basic features necessary for displaying data on any simple table. For most developers, when building a dashboard displaying data in form of a table with columns is usually necessary and required, react-table provides features like search, filters, and sorting, pagination and many more.

First, let’s get started by creating our application using Create React App and installing all necessary dependencies by running the following commands:



npx create-react-app react-table-dashboard
cd react-table-dashboard
npm instal react-table

Setting Up Our project by a data folder with a dummy.js to provide the necessary data to display on our table.



export const customersData = () => {
  const data = [
  {
    customerID: 1001,
    customer: 'Nirav Joshi',
    CustomerEmail: 'nirav@gmail.com',
    imgUrl:
      avatar2,
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    selected: false,
    customerNumber: "+234 803 0000",
  },
  {
    CustomerID: 1002,
    customer: 'Sunil Joshi',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerEmail: 'sunil@gmail.com',
    Status: 'Active',
    imgUrl:
      avatar3,
          customerNumber: "+234 803 0000",
      selected: false,
  },
  {
    CustomerID: 1003,
    customer:'Andrew McDownland',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Failed',
    CustomerEmail: 'andrew@gmail.com',
    imgUrl:
      avatar4,
      customerNumber: "+234 803 0000",
  },
  {
    CustomerID: 1004,
    customer:'Christopher Jamil',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerEmail: 'jamil@gmail.com',
    imgUrl:
      avatar,
          customerNumber: "+234 803 0000",
  },
  {
    CustomerID: 1005,
    customer:'Andrew McDownland',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerName: 'Michael',
    customerEmail: 'michael@gmail.com',
   imgUrl:
      avatar2,
        customerNumber: "+234 803 0000",
  },
 {
    CustomerID: 1005,
    customer:'Andrew McDownland',
    deposit: 'NGN 34,600',
    date: 'Jan 6, 2022 09:21',
    voucherNo: '00437E',
    status: 'Successful',
    CustomerName: 'Michael',
    customerEmail: 'michael@gmail.com',
    imgUrl:
      avatar2,
        customerNumber: "+234 803 0000",
  }

];
 return [data]
}

And creating a file in src/Table.js, we'll mostly use the code of the basic example from the React Table docs.

Let’s create the basic UI with the useTable Hook. We will create a new Table component that will accept two props: data and columns. data is the data we got through the dummy data we created, and columns is the object to define the table columns (headers, rows, how the row will be shown, etc.).



import React, {useMemo} from 'react';
import { customersData } from '../data/dummy';

function Table() {
     const columns = useMemo(() => [
      {
        Header: "Customer",
        accessor: "customer",
      },
      {
        Header: "Deposit",
        accessor: "deposit",
      },
      {
        Header: "Date",
        accessor: "date",
      },
      {
        Header: "Voucher NO.",
        accessor: "voucherNo",
      },
      {
        Header: "Trans.Status",
        accessor: "status",
      },

], []);

  const data = useMemo(() => customersData(), []);

  return (
    <>
      <h1>Hello React!</h1>
      <div>
        <Table columns={columns} data={data} />
      </div>
    </>
  );
}

export default Table;

run npm start

Building Our Table

React-table uses React Hook called useTable. The Hook will return the necessary props for the table, body, and transformed data to create the header and cells. The header will be created by iterating through headerGroups, and the rows for the table body will be created by looping through rows. We'll also set up Tailwind CSS in our project, follow the instructions from the documentation. It's a few steps, but it should work seamlessly, we'll also copy most of the classes from the table component on TailwindUI



import { useTable } from "react-table";

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });

  // Render the UI for your table and the styles
  return (
  <div className="mt-2 flex flex-col">
            <div className="-my-2 overflow-x-auto -mx-4 sm:-mx-6 lg:-mx-8">
              <div  className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table {...getTableProps()} className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-10">
                      {headerGroups.map((headerGroup) => (
                          <tr {...headerGroup.getHeaderGroupProps()}>
                              {headerGroup.headers.map((column) => (
                                  <th {...column.getHeaderProps()}
                                  className="px-6 py-5 text-left text-20 font-medium text-gray-400 uppercase rounded-sm tracking-wider"
                                  >
                                    {column.render("Header")}
                                    </th>
                              ))}
                          </tr>
                      ))}
                  </thead>
                  <tbody {...getTableBodyProps()}
                  className="bg-white divide-y divide-gray-200">
                    {row.map((row, i) => {
                      prepareRow(row);
                      return (
                          <tr {...row.getRowProps()}>
                          {row.cells.map((cell) => {
                              return <td {...cell.getCellProps()} className="px-6 py-10 whitespace-nowrap">{cell.render("Cell")}</td>
                          })}
                          </tr>
                      );
                      })}
                  </tbody>
                    </table>
                </div>
              </div>
          </div>
         </div>
  );
}

export default Table;

Run npm start to open the app in the browser.

Adding Search Functionality with GlobalFilter

Let's add a global search feature to our table, it can enable users to find text typed in the input field, and the table only displays rows with data that matches this text.

In the src/Table.js, add the following code.



import { useTable, useGlobalFilter, useAsyncDebounce } from 'react-table'  // new

// Define a UI for filtering

function GlobalFilter({
    globalFilter,
    setGlobalFilter,
    placeholder
  }) {
    const [value, setValue] = useState(globalFilter)
    const onChange = useAsyncDebounce(value => {
      setGlobalFilter(value || undefined)
    }, 200)

    return (
      <span className='flex justify-between  pt-10 pb-10 '>
        <input
          value={value || ""}
          onChange={e => {
            setValue(e.target.value);
            onChange(e.target.value);
          }}
          className='w-8/12 rounded-xl border p-4 text-gray-500 cursor-pointer' 
          type="search"  
          placeholder="Search..."
        />
      </span>
    )
  };

The GlobalFilter component accepts a few props that will be provided by the Table component.

It also defines value using the useState hook, which is coupled to the element's value. When the user types in the element, the onChange handler will call the setGlobalFilter method to pass the value to the parent Table component. The useAsyncDebounce is used to add a little delay to avoid too many re-renders while the user is typing.

Finally, make a few updates to the Table component to integrate the GlobalFilter.



function Table({ columns, data }) {
  // Use the state and functions returned from useTable 
  const {
    ...
    state, // new
    preGlobalFilteredRows, // new
    setGlobalFilter, // new
  } = useTable({
    columns,
    data,
  },
    useGlobalFilter // new
  )

  // Render the UI for your table
  return (
    <>
      <GlobalFilter
        preGlobalFilteredRows={preGlobalFilteredRows}
        globalFilter={state.globalFilter}
        setGlobalFilter={setGlobalFilter}
      />
      <table {...getTableProps()}>
        ...
      </table>
    </>
  )
}

run npm start and try out the search functionality in the browser.

Adding useRowSelectColumn

The useRowSelectColumn react-table plugin hook injects a new column at the beginning showing checkboxes to select rows. This hook depends on the useRowSelect hook from react-table.

First we need to add this dependency @lineup-lite/hooks to help with row and column selection in the table. Enter the following command

npm install @lineup-lite/hooks

In the src/Table.js, add the following code.



import { useTable, useGlobalFilter, useAsyncDebounce, useRowSelect } from 'react-table';
import { useRowSelectColumn } from '@lineup-lite/hooks';


  // Use the state and functions returned from useTable to build your UI
    const {
    ...
   getTableProps,
   getTableBodyProps, 
   headerGroups, 
   rows, 
   prepareRow
  } = useTable({
    columns,
    data,
  },
    useRowSelect, //new
    useRowSelectColumn //new
  );

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                {column.render('Header')}
                {column.id === 'selection' && column.render('Summary')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Custom Status cell component

Let's custom components for different cells, e.g. a show a thumbnail of the user image with the name, or a nice color-coded pill indicating the status.

Let's implement a custom cell for the status.



// src/Table.js
export function StatusPill({ value }) {
  const status = value ? value.toLowerCase() : "unknown";

  return (
    <span
      className={classNames(
        "px-3 py-1 uppercase leading-wide font-bold text-xs rounded-full shadow-sm",
        status.startsWith("active") ? "bg-green-100 text-green-700" : null,
        status.startsWith("inactive") ? "bg-yellow-100 text-yellow-700" : null,
        status.startsWith("offline") ? "bg-red-100 text-red-700" : null
      )}
    >
      {status}
    </span>
  );
}

Let's import this in our data and use it in the column definition.




function Table() {
  const columns = React.useMemo(
    () => [
      // ...
      {
        Header: "Status",
        accessor: "status",
        Cell: StatusPill, // new
      },
      // ...
    ],
    []
  );

  // ...
}

Let's check the result.

This is the greatness of React Table combined with the beauty of Tailwind CSS.

Adding User avatar cell component

In the first column, to show a user avatar and the email address. Let's write a component for this. plus necessary styles.



// src/Table.js
export function AvatarCell({ value, column, row }) {
  return (
    <div className="flex items-center">
      <div className="flex-shrink-0 h-10 w-10">
        <img
          className="h-10 w-10 rounded-full"
          src={row.original[column.imgAccessor]}
          alt=""
        />
      </div>
      <div className="ml-4">
        <div className="text-sm font-medium text-gray-900">{value}</div>
        <div className="text-sm text-gray-500">
          {row.original[column.emailAccessor]}
        </div>
      </div>
    </div>
  );
}

The AvatarCell takes two additional props as arguments, column and row. This is useful, because it allows you to use extra data from the object and use it within the cell.

Column configuration:



// src/App.js
function App() {
  const columns = React.useMemo(() => [
    {
      Header: "Name",
      accessor: "name",
      Cell: AvatarCell,
      imgAccessor: "imgUrl",
      emailAccessor: "email",
    },
    // ...
  ]);

  // ...
}

Pagination

The last feature I want to implement is pagination, to implement pagination, make the following changes (all of which are copied from the React Table pagination example)



// src/Table.js
import { ..., usePagination } from 'react-table'  // new

function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,

    //new
    page, // Instead of using 'rows', we'll use page,
    // which has only the rows for the active page

    // The rest of these things are super handy, too ;)
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,

    state,
    preGlobalFilteredRows,
    setGlobalFilter,
  } = useTable({
      columns,
    data,
  },
    useGlobalFilter,
    usePagination,  // new
  )

Before we display on UI, let's customise the pagination, so as to display numbers as the pagination options.

Create another file ./useCustomPagination.js



import {useMemo} from 'react';

export const DOTS = '...';

const range = (start, end) => {
    const length = end - start + 1;
    return Array.from({length}, (_, idx) => idx + start);
};

export const useCustomPagination = ({totalPageCount, siblingCount = 1, currentPage}) => {
    return useMemo(() => {

        // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS
        const totalPageNumbers = siblingCount + 5;

        /*
          If the number of pages is less than the page numbers we want to show in our
          paginationComponent, we return the range [1..totalPageCount]
        */
        if (totalPageNumbers >= totalPageCount) {
            return range(1, totalPageCount);
        }

        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
        const rightSiblingIndex = Math.min(
            currentPage + siblingCount,
            totalPageCount
        );

        /*
          We do not want to show dots if there is only one position left
          after/before the left/right page count as that would lead to a change if our Pagination
          component size which we do not want
        */
        const shouldShowLeftDots = leftSiblingIndex > 2;
        const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;

        const firstPageIndex = 1;
        const lastPageIndex = totalPageCount;

        if (!shouldShowLeftDots && shouldShowRightDots) {
            const leftItemCount = 3 + 2 * siblingCount;
            const leftRange = range(1, leftItemCount);

            return [...leftRange, DOTS, totalPageCount];
        }

        if (shouldShowLeftDots && !shouldShowRightDots) {
            const rightItemCount = 3 + 2 * siblingCount;
            const rightRange = range(
                totalPageCount - rightItemCount + 1,
                totalPageCount
            );
            return [firstPageIndex, DOTS, ...rightRange];
        }

        if (shouldShowLeftDots && shouldShowRightDots) {
            const middleRange = range(leftSiblingIndex, rightSiblingIndex);
            return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
        }
    }, [totalPageCount, siblingCount, currentPage]);
};

import and integrate it into ./Table.js



import {DOTS, useCustomPagination} from './useCustomPagination';


function Table({ columns, data }) {
    // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,

    //new
    page, 
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,

    state,
    preGlobalFilteredRows,
    setGlobalFilter,
  } = useTable({
      columns,
    data,
  },
    useGlobalFilter,
    usePagination,  // new
  )


  const {pageIndex} = state;
            const paginationRange = useCustomPagination({
              totalPageCount: pageCount,
              currentPage: pageIndex
       }); //new

          useEffect(() => {
                  setPageSize(5);
            }, [setPageSize]); //set according to your preferrence


              return (
      <>
      ...
      <table {...getTableProps()} border="1">
        ...
        <tbody {...getTableBodyProps()}>
          {page.map((row, i) => {  // replace row with page
            ...
          })}
        </tbody>
      </table>
      {/* new */}
            <div className="py-3 flex items-center text-center justify-center pt-10">
        <div className="flex-1 flex justify-between md:hidden">
          <Button onClick={() => previousPage()} disabled={!canPreviousPage}>Previous</Button>
          <Button onClick={() => nextPage()} disabled={!canNextPage}>Next</Button>
        </div>
        <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between" aria-label="Pagination">
          <div className="relative z-0 inline-flex items-center ml-auto mr-auto rounded-md shadow-sm space-x-10" aria-label="Pagination">
                {paginationRange?.map((pageNumber, index) => {
                    if (pageNumber === DOTS) {
                        return (
                            <div
                            key={index}>...</div>
                        );
                    }

                    if ((pageNumber - 1) === pageIndex) {
                        return (
                            <div
                                key={index}
                                className=' active:bg-gray-500 active:border-gray-300'
                                onClick={() => gotoPage(pageNumber - 1)}>{pageNumber}</div>
                        );
                    }

                    return (
                        <div
                            key={index}
                            className='active:bg-gray-500 active:border-gray-300'
                            onClick={() => gotoPage(pageNumber - 1)}>{pageNumber}</div>
                    );
                })}
             </div>
          </div>
            </div>
          </div>
           )
};

Note that we've replaced row with page, which is an object provided by React Table that only contains the data for the current page.

In order to properly demo the pagination properly, we need a bit more data, so let's modify the getData function to concatenate the initial array three times using the JavaScript spread operator ..., before returning it.



const getData = () => {
  const data = [
    ...
  ]
  return [...data, ...data, ...data]
}

Run npm start and Vula!!!

Style the input elements

For the input elements (search field, filter drop-down and number-of-pages selector) we've relied on the default browser styling so far. Let's change that and make it fit to the rest of our design. I'll use another Tailwind plug-in for that: @tailwindcss/forms. Check out their live demo to see examples of styles you can achieve with it.

Install it with npm.

npm install @tailwindcss/forms

Then add it to your tailwind.config.js file:



// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require("@tailwindcss/forms"),

    // ...

  ],

};

Conclusion

In this tutorial, we have learnt how to create table with data grid, checkbox and pagination using React table and Tailwind CSS. I hope you enjoyed and learnt from this tutorial, kindly like, share and drop your comment and also I've provided the code repo for you, below.

Code

References

React Table Tutorial Part 1: Style the table with Tailwind CSS
Tailwind CSS
React-Table

Google OAuth2 using the new Google Identity Services SDK for React using Jwt-decode

Olorì Àṣàbí — Mon, 27 Jun 2022 13:24:24 +0000

In this tutorial, we will be learning how to make sign-ups stress free and hassle-free by implementing authentication via Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google🚀.

You'll need

To create-react-app React application that makes requests of your API
Installation of jwt-decode
Basic knowledge of React
Node.js installed
Code editor ( Visual Studio Code preferably )

Setting up Your Google Cloud project

To integrate Google Login into our React app, you need a Google Client ID. First, you'll need to create a Google Cloud project.

Create a project and choose a name for your project.

Once you have a project in place, proceed to Credentials - Create credentials - OAuth client ID.

You'll need to configure your OAuth consent screen. Choose external since we want to give access to everyone with a Google account. Google will then ask for the app's name plus some developer contact details.

Fill up the app registration form. For the most part, you can leave it blank.

Choose the scope best suited for the app that you shall develop and fill all other necessary inputs according your application requirement.

We head back to Credentials - Create credentials - OAuth client ID. Choose the Web application type and we can provide all Authorised origins and redirect URL' s.

We will see our Google client ID and a client secret. We'll only need the client ID.

Let's create our React App and Login Component

Once you have your Google Client ID, we start creating our React application to integrate Google Login.

We will start with create-react-app application, and add all necessary dependencies which are Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google🚀 and jwt-decode is a small browser library that helps decoding JWTs token which are Base64Url encoded.

Let's get started by running the following commands but make sure you have the necessary requirements for authenticating Google Login in React

Node.js installed
Code editor ( Visual Studio Code preferably )
Google Client ID
Basic knowledge of React

npx create-react-app google-login cd google-login npm install @react-oauth/google jwt-decode react-router-dom

Create a file named src/lib/GoogleLoginPage.js, with the following content:

import React from 'react';
import { FcGoogle } from 'react-icons/fc';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';

const GoogleLoginPage = () => {
  const responseGoogle = (response) => {
    console.log(response);
  }

  return (
    <div className="">
          <div className="">
            <GoogleOAuthProvider 
                clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                >
             <GoogleLogin
              render={(renderProps) => (
                <button
                  type="button"
                  className=""
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className="" /> Sign in with google
                </button>
              )}
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              cookiePolicy="single_host_origin"
            />
            </GoogleOAuthProvider>
          </div>
    </div>
  )
}

export default GoogleLoginPage

You can run npm start and check your console to receive your encoded token which we will decode using jwt-decode.

Decoding Google Token using JWT-DECODE

Now that we have gotten our google response token, lets decode to get all necessary user info.

Still in the GoogleLoginPage.js let's update it

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';
import { client } from '../client';
import jwt_decode from "jwt-decode";

const GoogleLoginPage = () => {
  const navigate = useNavigate();

  const responseGoogle = (response) => {
   //console.log(response);
    const userObject = jwt_decode(response.credential);
    //console.log(userObject);
    localStorage.setItem('user', JSON.stringify(userObject));
    const { name, sub, picture } = userObject;
    const doc = {
      _id: sub,
      _type: 'user',
      userName: name,
      image: picture,
    };
    client.createIfNotExists(doc).then(() => {
      navigate('/', { replace: true });
    });

  }

  return (
    <div className="">
          <div className="">
            <GoogleOAuthProvider 
                clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
                >
             <GoogleLogin
              render={(renderProps) => (
                <button
                  type="button"
                  className=""
                  onClick={renderProps.onClick}
                  disabled={renderProps.disabled}
                >
                  <FcGoogle className="" /> Sign in with google
                </button>
              )}
              onSuccess={responseGoogle}
              onFailure={responseGoogle}
              cookiePolicy="single_host_origin"
            />
            </GoogleOAuthProvider>
          </div>
    </div>
  )
}

export default GoogleLoginPage

Let's do a break down of what we just did.

After getting our Google Login response in our responseGoogle() , we created a variable to store the decoded token by importing jwt-decode package and calling the response we got from our google login.

Now that the token has been decoded, we can now get our user info, store it into our localStorage, de-structure the necessary needed info and send it to the database.

Reconfigure Google OAuth

Lastly don't forget to configure all necessary Authorised JavaScript origins and Authorised redirect URIs in your Google API.

Hurray!!! we can now view, enjoy and test our finished application

You can check out the live demo here

You can view and download our source code at

Conclusion

In this tutorial, we have learnt how to Authenticate User with the Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google🚀 and decoding token with JWT-DECODE.

I really hope you learnt something new today, don't forget to like, share and comment.

References

Google OAuth2 using the new Google Identity Services SDK for React @react-oauth/google🚀

Decoding JWTs token which are Base64Url encoded.

Creating an Authentication Form using React Hook Form, React and Firebase.

Olorì Àṣàbí — Mon, 27 Jun 2022 09:35:16 +0000

In this tutorial , we’ll be setting up our own Firebase project through the Firebase Console to setup user registration and authentication in our React application. Firebase simplifies the process of user authentication by providing all necessary functions and SDK to be integrated in your project and allowing you to focus on other parts of the development process.

Let’s get started by creating our application using Create React App and installing the Firebase, managing User State with React Context API and React Router dependencies by running the following commands but make sure you have the necessary requirements for authenticating with Firebase in React

Node.js installed
Code editor ( Visual Studio Code preferably )
Google account which will be to used in Firebase
Basic knowledge of React

npx create-react-app react-auth-form
cd react-auth-form
npm install firebase react-router-dom

Create a Firebase account and add a "New Project".

Follow the provided prompts to complete the setup and you'll end up here:

To add Firebase to your app use the web option (</>).

To complete the Firebase setup we need to specify an authentication method. There are quite a number of options of methods available but for this tutorial we'll be using the email and password method. Navigate to "Authentication" -> "Sign-in Method" and change the "Email/Password" status setting to "Enabled".

Firebase config

Create a new file in the following location - src/firebase.js.

This file import's the Firebase SDK and contains the Firebase configuration settings and setting all inputs into your .env file with the standard variable names for secured purposes:

import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"
import "firebase/auth"
import { getFirestore } from '@firebase/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
};

export const app = initializeApp(firebaseConfig)
export const auth = getAuth(app)
export const db = getFirestore(app);

Copy these setting from "Project Settings" - "General" in the Firebase console.

Register users using React-hook-form

Create a new file in the following location - src/components/Register.js.

This component contains a sign up form so users can create accounts using react-hook-form:
To install React Hook Form, run the following command:

npm install react-hook-form

First, import the useForm Hook from the installedreact-hook-form package:

import { useForm } from "react-hook-form";

Then, inside your component, use the Hook as follows to validate errors, submit data and register:

const { handleSubmit, formState: { errors }, trigger, register, watch } = useForm();

To apply validations to a field in the form input, you can pass validation parameters to the register method. Validation parameters are similar to the existing HTML form validation standard.

These validation parameters include the following properties:

required indicates if the field is required or not. If this property is set to true, then the field cannot be empty
minlength and maxlength set the minimum and maximum length for a string input value
min and max set the minimum and maximum values for a numerical value
type indicates the type of the input field; it can be email, number, text, or any other standard HTML input types
pattern defines a pattern for the input value using a regular expression

Now lets collect data and register with firebase

import React from 'react'
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { useForm } from 'react-hook-form';

const Register = ({ history }) => {
    const {
    handleSubmit,
    formState: { errors },
    trigger,
    register,
    watch
    } = useForm();

    async function onhandleSubmit(data) {
     //console.log(data)
        try {
        await createUserWithEmailAndPassword(
        auth, data.email, data.password, data.name)
        history.push("/");
        alert ("User Created Successfully")
        } catch (error) {
        console.log(error)
        alert ("User created failed")
        alert(error);
      }
    }

 return (
  <div>
    <Form onSubmit={handleSubmit(onhandleSubmit)}>
      <h5>Create an account</h5>
      <div>
        <div>
         <label>Your email address</label>
          <input
            id="email"
            name="email"
            type= 'email'
            required={true}
            {...register("email", {
            required: "Email is Required!!!" ,
            pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "Invalid email address",
            }})}
            error={Boolean(errors.email)}
            onKeyUp={() => {trigger("email")}}
          ></input>
          {errors.email && (
          <small className="text-danger">{errors.email.message}</small>
          )}
        </div>
      <div>
        <label>Your password</label>
        <input
           name='password'
           id="password"
           type= 'password'
           autoComplete='off'
           className={`form-control ${errors.password && "invalid"}`}
           required={true}
           {...register("password", {
           required: "You must specify a password",
           pattern: {
           value: '^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){    1,})(?!.*\s).{8,}$',
           message: "Password should contain at least one number and one    special character"
           },
          minLength: {
          value: 8,
          message: "Password must be more than 8 characters"
          },
          maxLength: {
          value: 20,
          message: "Password must be less than 20 characters"
          },
          })}
          onKeyUp={() => {trigger("password")}}
          error={Boolean(errors.password)}
        ></input>
          {errors.password && (
          <small className="text-danger">{errors.password.message}</small>
          )}
      </div>
      <div>
        <label>Confirm your password</label>
        <input
           id="confirmPassword"
           name="confirmPassword"
           type='password'
           {...register( 'confirmPassword', {
           validate: value =>
           value === watch("password", "") || "The passwords do not match"
           })}
           autoComplete='off'
           onPaste={(e) =>{
           e.preventDefault();
           return false
           }}
           error={Boolean(errors.confirmPassword)}
           className={`form-control ${errors.confirmPassword && "invalid"}`}
           required={true}
           onKeyUp={() => {trigger("confirmPassowrd")}}
         />
           {errors.confirmPassword && (
           <small className="text-danger">{errors.confirmPassword.message}    </small>
           )}
      </div>
      <div>
        <label>Your full name</label>
        <input
           name='name'
           type="name"
           className={`form-control ${errors.name && "invalid"}`}
           required={true}
           defaultValue=""
          {...register("name", { required: "Fullname is Required!!!" })}
          onKeyUp={() => {trigger("name")}}/>
          {errors.name && (
          <small className="text-danger">Fullname is Required!!!</small>
         )}
        </div>
        <div>
          <button>Create an account</button>
        </div>
      </div>
    </Form>
  </div>
)}
export default withRouter(Register)

Managing User State with React Context API

Context API is a way to share data with components at any level of the React component tree without having to pass it down as props. Since a user might be required by a different component in the tree, using the Context API is great for managing the user state.

Before we start using the Context API, there are a few things we need to set up:

Create a context object using the createContext() method
Pass the components we want to share the user state with as children of Context.Provider
Pass the value we want the children/consuming component to access as props to Context.Provider

Let’s get to it. In the src directory, create an AuthContext.js file and add the following lines of code to it:

import React, { useEffect, useState, useContext } from "react";
import { auth } from "./api";
import {
  createUserWithEmailAndPassword, 
  onAuthStateChanged,
  sendPasswordResetEmail,
  signInWithEmailAndPassword } from "firebase/auth";

export const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext)
}

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  function signup(email, password, name) {
   return createUserWithEmailAndPassword(auth, email, password, name)
  }

  function login(email, password) {
   return signInWithEmailAndPassword(auth ,email, password)
  }
  function logout() {
    return auth.signOut()
  }

  function resetPassword(email) {
    return sendPasswordResetEmail(auth, email)
  }

  function updateEmail(email) {
   return currentUser.updateEmail(email)
  }

  function updatePassword(password) {
    return currentUser.updatePassword(password)
  }
  useEffect(() => {
   const unsubscribe = onAuthStateChanged(auth, user => {
    setCurrentUser(user)
    setPending(false)
   });
   return unsubscribe
  }, []);

  if(pending){
    return <>Loading...</>
  }

  const value = {
      currentUser,
      login,
      signup,
      logout,
      resetPassword,
      updateEmail,
      updatePassword
   }
    return (
      <AuthContext.Provider
      value={value}
      >
       {children}
      </AuthContext.Provider>
    );
};

Create a new file in the following location — src/components/Login.js.

This component contains the log in form so users can sign into their account:

import React, { useContext } from "react";
import { Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";
import firebaseConfig from "../firebase.js";
import { useForm, Controller } from 'react-hook-form';

const Login = () => {

  const {
   handleSubmit,
   control,
   formState: { errors },
  } = useForm();

  const submitHandler = async ({ email, password }) => {
    await try {
        firebaseConfig.auth().signInWithEmailAndPassword(email,   password);
      } catch (error) {
        alert(error);
      }
    };

    const { currentUser } = useContext(AuthContext);

    if (currentUser) {
      return <Redirect to="/dashboard" />;
    }
  return (
    <>
      <h1>Log In</h1>
      <form onSubmit={handleSubmit(submitHandler)}>
        <label for="email">Email</label>
        <input
         id="email"
         name="email"
         type= 'email'
         required={true}
         {...register("email", {
          required: "Email is Required!!!",
          pattern: {
          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
           message: "Invalid email address",
           }})}
           error={Boolean(errors.email)}
           onKeyUp={() => {trigger("email")}}
          ></input>
        {errors.email && (
         <small className="text-danger">{errors.email.message}</small>
        )}
       </div>
       <div>
       <label>Your password</label>
       <input
         name='password'
         id="password"
         type= 'password'
         autoComplete='off'
         className={`form-control ${errors.password && "invalid"}`}
         required={true}
         {...register("password", {
         required: "You must specify a password", 
         pattern: {
         value: '^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})
         (?=. (.*.      [\W]){    1,})(?!.*\s).{8,}$',
         message: "Password should contain at least one number
         and      one    special character"
          },
         minLength: {
         value: 8,
          message: "Password must be more than 8 characters"
           },
           maxLength: {
          value: 20,
          message: "Password must be less than 20 characters"
          },
          })}
          onKeyUp={() => {trigger("password")}}
          error={Boolean(errors.password)}
           ></input>
          {errors.password && (
          <small className="text-danger">  
          {errors.password.message}
          </small>
          )}
       </div>        
        <button type="submit">Submit</button>
      </form>
    </>
  );
};
export default Login;

If the current user is already logged in they’ll get redirected to the home page. Otherwise we capture the form input on submit and send the details to the Firebase Authentication signInWithEmailAndPassword method.

Home page

Create a new file in the following location — src/components/Home.js.

This component contains content that can only be viewed by authenticated users:

import React from "react";
import { useAuth } from '../../services/auth';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';

const Home = () => {
  const [error, setError] = useState("")
  const { currentUser, logout } = useAuth()
  const history = useHistory()

  async function handleLogout() {
    setError("")
    try {
      await logout()
      history.push("/login")
   } catch {
      setError("Failed to log out")
          }
   }

return (
    <div>
      <h1>Welcome</h1>
      <p>This is the Home Page, if you can see this you're logged in.
       </p>
      <button onClick={handleLogout}>Sign out</button>
    </div>
  );
};
export default Home;

If this page is accessed by a non-authenticated user the browser will re-direct to the login page. If the user is authenticated we display the private content. We’ve also included a button so users can sign out of their account.

Pulling it all together in App.js

Modify the App.js file to include the following:

import './App.css';
import {
BrowserRouter as Router,
Route,
} from "react-router-dom";
import Register from "./pages/Register/Register";
import Login from "./pages/Login/Login";
import { AuthProvider } from "./services/auth";
import PrivateRoute from "./PrivateRoute";
import Profile from "./pages/Profile/Profile";
import Home from "./pages/Home/Home";

function App() {

return (
  <AuthProvider>
    <Router>
      <div>
        <PrivateRoute exact path="/" component={Home} />
        <Route  path="/login" component={Login} />
        <Route path="/register" component={Register} />
      </div>
    </Router>
  </AuthProvider>
)}
export default App;

You can now run npm start to start the application and test out the registration and authentication process. Once the sign up form has been submitted you can browse to “Authentication” - “Users” in the Firebase console to confirm registration was successful and manage user accounts.

You now know how to authenticate users in your React applications using Firebase. If you would like to learn more about Firebase Authentication, I’d suggest checking out the official guide.

Conclusion

In this tutorial, we have learned how to use of the Firebase Authentication to build user registration and authentication service in React using React Hook Form for form validation.

References

Get Started with Firebase Authentication on Websites (Firebase documentation)
Form Validation using React Hook Form (React Hook Form documentation)
Manage Users in Firebase (Firebase Users documentation)
Managing User State with React Context API