Firebase login functionality with React
Login from firebase database in React-native and Reactjs
Login from firebase database in React-native and Reactjs
Follow Below code to complete your login functionality in your website or app
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
{
constructor(props) {
super(props);
this.state={
username:"",
password:"",
}
this.getUsername = this.getUsername.bind(this);
this.getPassword = this.getPassword.bind(this);
}
getUsername(event) {
this.setState({username: event.target.value});
}
getPassword(event) {
this.setState({password: event.target.value});
}
SubmitLoginForm=()=>{
if(this.state.username && this.state.password !=="")
{
let ref = firebase.database().ref('users/clients/'+this.state.username);
ref.on('value', snapshot => {
const uname=snapshot.val().username.toString();
const upass=snapshot.val().password.toString();
if(uname==this.state.username && upass==this.state.password)
{
alert("Login success");
}
else{
alert("invalid user");
}
});
}
}
render()
{
return(
<div className="row">
<div className="col-md-6">
<form className="form-horizontal">
<div className="col-xs-8 col-xs-offset-4">
<h2>Login</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.username}
/>
</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.getPassword}
value={this.state.password}
/>
</div>
</div>
<div className="form-group">
<div className="col-xs-8 col-xs-offset-4">
<button type="button" className="btn btn-primary btn-lg" onClick={this.SubmitLoginForm}>
Login
</button>
</div>
</div>
</form>
</div>
</div>
);
}
}
 |
| Output |
