User Account Management - Chris
I created 3 Components to handle the integration of accounts within the marketplace:
1. SignInWithEmail
A component to handle users who sign in with their email accounts. This component initializes state variables for email, password, and error using the useState hook. These variables are used to store the user's input and any error messages.
It uses the useNavigate hook from react-router-dom to get a function that can be used to navigate to different routes in the application. It gets a reference to the Firebase authentication service using the getAuth function. It defines a handleSubmit function that is called when the form is submitted. This function prevents the default form submission behavior, clears any existing errors, and then attempts to sign in the user with their email and password using the signInWithEmailAndPassword function from Firebase. If the sign-in is successful, the user is redirected to the /profile page. If there's an error, the error message is stored in the error state variable. In the render method, it displays a title, an error message if there is one, and a form. The form's onSubmit prop is set to the handleSubmit function, so this function will be called when the form is submitted.
2. SignInWithGoogle
A component to handle user sign in with google accounts. The component initializes state variables for error and loading using the useState hook. The error variable is used to store any error messages, and the loading variable is used to indicate whether the sign-in process is ongoing.
It uses the useNavigate hook from react-router-dom to get a function that can be used to navigate to different routes in the application. It defines a signInWithGoogle function that is called when the "Sign In with Google" button is clicked. This function sets loading to true, creates a new GoogleAuthProvider, and then attempts to sign in the user using the signInWithPopup function from Firebase. If the sign-in is successful, the user is redirected to the /profile page. If there's an error, the error message is stored in the error state variable. Regardless of whether the sign-in is successful or not, loading is set to false at the end. In the render method, it displays a button that, when clicked, calls the signInWithGoogle function. The button is disabled while loading is true. The button's text changes to "Signing in..." while loading is true and changes back to "Sign In with Google" when loading is false. If there's an error, an error message is displayed below the button.
3. SignUpWithEmail
This component is used to allow users to add their credentials so they may login with email. It initializes state variables for email, password, error, and successMessage using the useState hook. These variables are used to store the user's input, any error messages, and success messages.
It uses the useNavigate hook from react-router-dom to get a function that can be used to navigate to different routes in the application. It gets a reference to the Firebase authentication service using the getAuth function. It defines a handleSubmit function that is called when the form is submitted. This function prevents the default form submission behavior, clears any existing errors and success messages, and then attempts to create a new user with their email and password using the createUserWithEmailAndPassword function from Firebase. If the account creation is successful, a success message is displayed and the user is redirected to the /profile page after a short delay. If there's an error, the error message is stored in the error state variable.