In This Blog I am going to tell you about,how to authenticate user and redirect to users profile using with and backed link php or mysql.
Before starting You must have a knowledge of
BASIC HTML
BASIC CSS
BASIC JAVASCRIPT
Then only you can understand the code clearly.
LET GET STARTED
Firstly we will open firebase and make a new project.
Click on get started, After that
Create a new project
You can give your project name as you want.
After that it will ask for Analytics,You can give or you can not give as you wish.
After completing the process press continue button.
After that you will see the above page,Now you have to click on </>.
Now , you have to give your App nickname,you can give any name as your wish.
Now,Open Build and then click on Authentication.
Then Click on get started
Now ,Choose the sign-in method for auth.In this Blog we will use sign-in with Email and Password It best for understanding and easy to learn.
After that you will see this now you have to go in Users there you can add users for auth.
Now,Click on Add user then add the Email and password for authentication.
Now , you have to give your App nickname,you can give any name as your wish.
We have created all the things in firebase.Now let's code sign-in form for User authentication.
Now,open your code editor and make a new project.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CURIOUS CODER AYUSH</title>
<link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="login">
<input type="email" placeholder="email" required id="email">
<input type="password" placeholder="Password" required id="password">
<button id="login-button">Login</button>
</form>
<script src="login.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
</body>
</html>
Now,make a new file style.css .
// YOUR CONFIGURATION CODE
const firebaseConfig = {
apiKey: "YOUR API KEY",
authDomain: "YOUR AUTH DOMIN",
projectId: "YOUR PROJECT ID",
storageBucket: "YOR STORAGE",
messagingSenderId: "ID",
appId: "APP ID"
};
firebase.initializeApp(firebaseConfig);
// js for authentication
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const loginButton = document.getElementById('login-button');
loginButton.addEventListener('click', function () {
const email = emailInput.value;
const password = passwordInput.value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then((userCredential) => {
// Authentication success
const user = userCredential.user;
window.location.href = '/user-page.html'; // Redirect to user page
})
.catch((error) => {
// Handle authentication error
const errorCode = error.code;
const errorMessage = error.message;
alert(errorCode + errorMessage)
});
});
body {
width: 100%;
height: 100%;
background-color: #f45b69;
font-family: "Asap", sans-serif;
}
.login {
overflow: hidden;
background-color: #A2A7DF;
padding: 40px 30px 30px 30px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: -webkit-transform 300ms, box-shadow 300ms;
-moz-transition: -moz-transform 300ms, box-shadow 300ms;
transition: transform 300ms, box-shadow 300ms;
box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}
.login::before, .login::after {
content: "";
position: absolute;
width: 600px;
height: 600px;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
z-index: -1;
}
.login::before {
left: 40%;
bottom: -130%;
background-color: rgba(69, 105, 144, 0.15);
-webkit-animation: wawes 6s infinite linear;
-moz-animation: wawes 6s infinite linear;
animation: wawes 6s infinite linear;
}
.login::after {
left: 35%;
bottom: -125%;
background-color: rgba(2, 128, 144, 0.2);
-webkit-animation: wawes 7s infinite;
-moz-animation: wawes 7s infinite;
animation: wawes 7s infinite;
}
.login > input {
font-family: "Asap", sans-serif;
display: block;
border-radius: 5px;
font-size: 16px;
background: white;
width: 100%;
border: none;
padding: 10px 10px;
margin: 15px -10px;
}
.login > button {
font-family: "Asap", sans-serif;
cursor: pointer;
color: #fff;
font-size: 16px;
text-transform: uppercase;
width: 80px;
border: none;
padding: 10px 0;
margin-top: 10px;
margin-left: -5px;
border-radius: 5px;
background-color: #f45b69;
-webkit-transition: background-color 300ms;
-moz-transition: background-color 300ms;
transition: background-color 300ms;
}
.login > button:hover {
background-color: #f24353;
}
@-webkit-keyframes wawes {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes wawes {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
}
}
@keyframes wawes {
from {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
NOW MAKE A NEW FILE user-page.html, AFTER SUCCESSFUL LOG-IN, YOU WILL BE REDIRECTED TO THIS PAGE