Firebase Integration
Relevant source files
The following files were used as context for generating this wiki page:The react-multi-step-form project utilizes Firebase for backend services, specifically Cloud Firestore, to persist data collected from the user through the multi-step form. The integration is responsible for initializing the Firebase connection and handling the data submission process upon the final step of the form. The entire form submission logic is managed within the MultiStepForm component, which is the core of the application's functionality.
The integration relies on the official firebase npm package. The primary interaction with Firebase is to write a new document to a Firestore collection named formDetails when the user submits their information.
Sources: src/firebase.js, src/components/MultiStepForm.jsx, package.json:8
Dependencies
The project's connectivity to Firebase is established through a direct dependency on the firebase library.
| Dependency | Version | Description |
|---|---|---|
firebase | ^10.12.5 | Provides the necessary SDKs for interacting with Firebase services, including Firestore. |
Sources: package.json:8
Configuration
Firebase is configured in a dedicated module, which initializes the application and exports the necessary Firestore database instance and functions.
Sources: src/firebase.js
Initialization
The file src/firebase.js contains the Firebase project configuration and initializes the connection.
initializeAppis imported fromfirebase/appand called with a configuration object.getFirestoreis imported fromfirebase/firestoreto get the database instance.- The database instance (
db) and key Firestore functions (collection,addDoc) are exported for use in other parts of the application.
Sources: src/firebase.js:1-2, src/firebase.js:13-16
Configuration Details
The firebaseConfig object contains the project-specific credentials required to connect to the Firebase backend.
| Key | Value |
|---|---|
apiKey | "AIzaSyAoEkweCEECJa2dE9zL5euJuwaUU-zJ3lY" |
authDomain | "react-multi-step-form-3706c.firebaseapp.com" |
projectId | "react-multi-step-form-3706c" |
storageBucket | "react-multi-step-form-3706c.appspot.com" |
messagingSenderId | "909707174433" |
appId | "1:909707174433:web:91d6a8bd6b31b91a61b960" |
Sources: src/firebase.js:4-11
Data Submission Flow
The process of submitting form data to Firebase is initiated from the final step of the form and handled by the parent MultiStepForm component.
Submission Trigger
The submission is triggered when the user clicks the "SUBMIT" button in the ReviewSubmit component. This button is enabled unless a submission is already in progress (loading is true). The onClick handler for this button calls the handleSubmit function, which is passed down as a prop from the MultiStepForm component.
// src/components/formsteps/ReviewSubmit.jsx:62-68
<button
onClick={handleSubmit}
className="submit-btn"
disabled={loading}
>
{loading ? <span className="spinner"></span> : "SUBMIT"}
</button>
Sources: src/components/formsteps/ReviewSubmit.jsx:62-68, src/components/MultiStepForm.jsx:217-223
Submission Logic
The core submission logic resides in the handleSubmit asynchronous function within the MultiStepForm.jsx component.
This diagram illustrates the sequence of events during form submission.
The handleSubmit function performs the following steps:
- Sets the
loadingstate totrueto provide visual feedback and disable the submit button. - Calls the
addDocfunction, passing the Firestorecollectionreference (for "formDetails") and theformDatastate object. - On successful submission, it displays a success toast notification.
- If an error occurs during the
addDoccall, it is caught, logged to the console, and an error toast is displayed. - The
finallyblock ensures theloadingstate is set back tofalse, re-enabling the submit button regardless of the outcome.
Sources: src/components/MultiStepForm.jsx:134-157
Data Model
The data saved to Firestore corresponds to the structure of the formData state object in the MultiStepForm component. A new document is created in the formDetails collection for each submission.
Firestore Collection: formDetails
This diagram shows the entity relationship for the data stored in Firestore.
formData Fields
The following table details the fields within each document stored in the formDetails collection.
| Field | Type | Description | Source Component |
|---|---|---|---|
name | String | User's full name. | PersonalInfo.jsx |
email | String | User's email address. | PersonalInfo.jsx |
phoneNumber | String | User's 10-digit phone number. | PersonalInfo.jsx |
address | String | User's street address. | AddressDetails.jsx |
city | String | User's city. | AddressDetails.jsx |
state | String | User's state. | AddressDetails.jsx |
postalCode | String | User's 5 or 6-digit postal code. | AddressDetails.jsx |
cardNumber | String | User's 16-digit credit card number. | PaymentInfo.jsx |
expiryDateMonth | String | Card expiration month (MM). | PaymentInfo.jsx |
expiryDateYear | String | Card expiration year (YYYY). | PaymentInfo.jsx |
cvv | String | Card's 3-digit CVV code. | PaymentInfo.jsx |
Sources: src/components/MultiStepForm.jsx:13-26, src/components/formsteps/PersonalInfo.jsx, src/components/formsteps/AddressDetails.jsx, src/components/formsteps/PaymentInfo.jsx
Summary
The Firebase integration in this project is focused and effective. It uses Cloud Firestore to persist form data, with a clear separation of concerns. Configuration is handled in src/firebase.js, while the submission logic is managed by the MultiStepForm component. This setup provides a robust mechanism for capturing and storing user information securely in the cloud.