How to create a user in the firebase using authentication function using react.js

1. Set Up Firebase Project:
   • Go to the Firebase Console and create a new project.
   • Set up Firebase Authentication in your project.
2. Install Firebase SDK:
   • In your React.js project, install the Firebase SDK using npm
   • Command for installing firebase is “npm install firebase“

3. Configure Firebase in Your React App:

• Create a Firebase configuration file, e.g., firebase.js:

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

Note: Replace placeholder values with your actual Firebase project configuration.

4. Create a Registration Component:

• Create a React component for user registration, where users can input their email and password.
• Firebase provide a default function i.e. createUserWithEmailAndPassword and other function for Updation of user information

import React, { useState } from 'react';
import { auth,  createUserWithEmailAndPassword } from './firebase';

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

  const handleRegistration = async () => {
    try {
      const userCredential = await createUserWithEmailAndPassword(email, password);
      console.log('User registered successfully:', userCredential.user);
    } catch (error) {
      console.error('Registration error:', error.message);
    }
  };

  return (
    <div>
      <h2>Registration</h2>
      <label>Email:</label>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <label>Password:</label>
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleRegistration}>Register</button>
    </div>
  );
};

export default RegistrationForm;

5. Use the Registration Component:

• Import and use the RegistrationForm component in your main application file.

import React from 'react';
import RegistrationForm from './RegistrationForm';

const App = () => {
  return (
    <div>
      <h1>React Firebase Authentication</h1>
      <RegistrationForm />
    </div>
  );
};

export default App;

6. Run Your React App:

• Start your React app to see the registration form in action
  Start the react app by using the following command “npm start“