Home

Signup Form in reactjs with firebase

Tutorial Rocket
4 min read

Simple registration form in Reactjs with firebase Integration

Follow Below Code:


import React,{Component} from "react";
import "../css/style.css";
import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxxxxxx",
  databaseURL: "xxxxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxxxxxxxxxxxxx"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}



export default class RegisterForm extends React.Component
{

You may like these posts

  constructor(props) {
    super(props);
    this.state={
        user:null,
        pass:null,
        email:null,
        re_pass:null
    }


    this.getUserName = this.getUserName.bind(this);
    this.getPass = this.getPass.bind(this);
    this.getEmail = this.getEmail.bind(this);
    this.getRePass = this.getRePass.bind(this);
  }

  getUserName(event) {
    this.setState({user: event.target.value});
  }
  getPass(event) {
    this.setState({pass: event.target.value});
  }
  getEmail(event) {
    this.setState({email: event.target.value});
  }
  getRePass(event) {
    this.setState({re_pass: event.target.value});
  }

 SubmitSignupForm=()=>{
    
    if(this.state.pass==this.state.re_pass)
    {
      firebase.database().ref('users/clients/'+this.state.user).set({
        username:this.state.user,
        email:this.state.email,
        password:this.state.pass,
       });

      
    }
    else{
      alert("Password not match !")
    }

  
  }




    render()
    {
        return(
           
            <div className="row">
                <div className="col-md-6">
                <form className="form-horizontal">
                
  <div className="col-xs-8 col-xs-offset-4">
    <h2>Sign Up</h2>
  </div>
  <div className="form-group">
    <label className="control-label col-xs-4">Username</label>
    <div className="col-xs-8">
      <input
        type="text"
        className="form-control"
        name="username"
        required="required"
        onChange={this.getUserName} 
        value={this.state.user}
      />
    </div>
  </div>
  <div className="form-group">
    <label className="control-label col-xs-4">Email Address</label>
    <div className="col-xs-8">
      <input
        type="email"
        className="form-control"
        name="email"
        required="required"
        onChange={this.getEmail} 
        value={this.state.email}
      />
    </div>
  </div>
  <div className="form-group">
    <label className="control-label col-xs-4">Password</label>
    <div className="col-xs-8">
      <input
        type="password"
        className="form-control"
        name="password"
        required="required"
        onChange={this.getPass} 
        value={this.state.pass}
      />
    </div>
  </div>
  <div className="form-group">
    <label className="control-label col-xs-4">Confirm Password</label>
    <div className="col-xs-8">
      <input
        type="password"
        className="form-control"
        name="confirm_password"
        required="required"
       
        onChange={this.getRePass} 
        value={this.state.re_pass}
      />
    </div>
  </div>
  <div className="form-group">
    <div className="col-xs-8 col-xs-offset-4">
      <p>
        <label className="checkbox-inline">
          <input type="checkbox" required="required" /> I accept the{" "}
          <a href="#">Terms of Use</a> &amp; <a href="#">Privacy Policy</a>.
        </label>
      </p>
      <button type="submit" className="btn btn-primary btn-lg"  onClick={this.SubmitSignupForm}>
        Sign Up
      </button>
    </div>
  </div>
</form>
               </div>
            </div>
            
          
        );
    }
}
simple registration form in reactjs with firebase
Output