Example 1: how to make a working login system using code
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script>
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
function signUp(){
var email = document.getElementById("email");
var password = document.getElementById("password");
const promise = auth.createUserWithEmailAndPassword(email.value, password.value);
promise.catch(e => alert(e.message));
alert("Signed Up");
}
function signIn(){
var email = document.getElementById("email");
var password = document.getElementById("password");
const promise = auth.signInWithEmailAndPassword(email.value, password.value);
promise.catch(e => alert(e.message));
}
function signOut(){
auth.signOut();
alert("Signed Out");
}
auth.onAuthStateChanged(function(user){
if(user){
var email = user.email;
alert("Signed in as " + email);
}else{
alert("No Active User");
}
});g
</script>
<style type="text/css">
body{
background-color:
}
h1{
background-color:
margin: 10px auto;
text-align: center;
color: white;
}
background-color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
width: 25%;
height: 45;
margin: 10px auto;
}
width: 100%;
height: 10px;
background: black;
}
width: 70%;
height: 40px;
display:block;
margin: 25px auto;
border: none;
outline: none;
border-bottom: 2px solid black;
}
width: 70%;
height: 40px;
display: block;
margin: 10px auto;
border: none;
outline: none;
border-bottom: 2px solid black;
}
background-color:
color: white;
border: none;
font-weight: bold;
padding: 15px 32px;
border-radius: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin-top: 20px;
margin-left: 50px;
}
background-color:
color: white;
font-weight: bold;
border: none;
padding: 15px 35px;
border-radius: 10px;
text-align: center;
text-decoration: none;
font-size: 13px
}
background-color:
color: white;
border: none;
padding: 12px 32px;
border-radius: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin-top: 9px;
margin-left: 74px;
font-weight: bold;
}
button: hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 7px 50px 0 rgba(0,0,0,0,.19);
}
</style>
</head>
<body>
<h1>Login Here</h1>
<div id="formContainer">
<div id="header"> </div>
<input type="email" placeholder="Email" id="email">
<input type="password" placeholder="Password" id="password">
<button onclick="signUp()" id="signUp"> Sign Up </button>
<button onclick="signIn()" id="signIn"> Sign In </button>
<button onclick="signOut()" id="signOut"> Sign Out </button>
Continue</a>
</body>
</html>
Example 2: php user login and registration
<?php
session_start();
$username = "";
$email = "";
$errors = array();
$db = mysqli_connect('localhost', 'root', '', 'registration');
if (isset($_POST['reg_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
if (empty($username)) { array_push($errors, "Username is required"); }
if (empty($email)) { array_push($errors, "Email is required"); }
if (empty($password_1)) { array_push($errors, "Password is required"); }
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) {
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "email already exists");
}
}
if (count($errors) == 0) {
$password = md5($password_1);
$query = "INSERT INTO users (username, email, password)
VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}
}
Example 3: how to make a sign-up database
<html>
<head>
<title>PHP User Registration Form</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form name="frmRegistration" method="post" action="">
<div class="demo-table">
<div class="form-head">Sign Up</div>
<?php
if (! empty($errorMessage) && is_array($errorMessage)) {
?>
<div class="error-message">
<?php
foreach($errorMessage as $message) {
echo $message . "<br/>";
}
?>
</div>
<?php
}
?>
<div class="field-column">
<label>Username</label>
<div>
<input type="text" class="demo-input-box"
name="userName"
value="<?php if(isset($_POST['userName'])) echo $_POST['userName']; ?>">
</div>
</div>
<div class="field-column">
<label>Password</label>
<div><input type="password" class="demo-input-box"
name="password" value=""></div>
</div>
<div class="field-column">
<label>Confirm Password</label>
<div>
<input type="password" class="demo-input-box"
name="confirm_password" value="">
</div>
</div>
<div class="field-column">
<label>Display Name</label>
<div>
<input type="text" class="demo-input-box"
name="firstName"
value="<?php if(isset($_POST['firstName'])) echo $_POST['firstName']; ?>">
</div>
</div>
<div class="field-column">
<label>Email</label>
<div>
<input type="text" class="demo-input-box"
name="userEmail"
value="<?php if(isset($_POST['userEmail'])) echo $_POST['userEmail']; ?>">
</div>
</div>
<div class="field-column">
<div class="terms">
<input type="checkbox" name="terms"> I accept terms
and conditions
</div>
<div>
<input type="submit"
name="register-user" value="Register"
class="btnRegister">
</div>
</div>
</div>
</form>
</body>
</html>