login & signup with firebase auth

charakamihiranga · Sep 4, 2024 · 4bc2a6c · 4bc2a6c
1 parent f5c1460
commit 4bc2a6c
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 0 deletions.
diff --git a/Login_With_Firebase/js/app.js b/Login_With_Firebase/js/app.js
@@ -0,0 +1,87 @@
+// Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyA6nlNiX2IAHg5ExATth07ocveaFuHl8eo",
+  authDomain: "se10login.firebaseapp.com",
+  projectId: "se10login",
+  storageBucket: "se10login.appspot.com",
+  messagingSenderId: "860492503747",
+  appId: "1:860492503747:web:5a45a905db0397871fe076",
+  measurementId: "G-JD6RFS4VSQ"
+};
+
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+
+// Sign up function
+function userRegistration(event) {
+  const email = document.getElementById('email').value;
+  const password = document.getElementById('password').value;
+
+  firebase.auth().createUserWithEmailAndPassword(email, password)
+      .then((userCredential) => {
+          // Signed up 
+          const user = userCredential.user;
+          console.log("User signed up:", user);
+          alert("Sign-up successful!");
+
+          // Clear the form fields
+          document.getElementById('signupForm').reset();
+
+          // Optionally, redirect to a welcome page or sign-in page
+          window.location.href = "signin.html";
+      })
+      .catch((error) => {
+          handleAuthError(error);
+      });
+}
+
+// Sign in function
+function userSignIn(event) {
+  const email = document.getElementById('email').value;
+  const password = document.getElementById('password').value;
+
+  firebase.auth().signInWithEmailAndPassword(email, password)
+      .then((userCredential) => {
+          // Signed in 
+          const user = userCredential.user;
+          console.log("User signed in:", user);
+          alert("Sign-in successful!");
+
+          // Clear the form fields
+          document.getElementById('loginForm').reset();
+      })
+      .catch((error) => {
+          handleAuthError(error);
+      });
+}
+
+// Function to handle authentication errors
+function handleAuthError(error) {
+  const errorCode = error.code;
+  const errorMessage = error.message;
+  console.error("Error:", errorCode, errorMessage);
+
+  // Custom error handling
+  switch (errorCode) {
+      case 'auth/invalid-email':
+          alert('Invalid email format. Please check your email.');
+          break;
+      case 'auth/user-disabled':
+          alert('This user has been disabled.');
+          break;
+      case 'auth/user-not-found':
+          alert('No user found with this email.');
+          break;
+      case 'auth/wrong-password':
+          alert('Incorrect password. Please try again.');
+          break;
+      case 'auth/email-already-in-use':
+          alert('This email is already in use by another account.');
+          break;
+      case 'auth/weak-password':
+          alert('The password is too weak. Please choose a stronger password.');
+          break;
+      default:
+          alert('An unexpected error occurred: ' + errorMessage);
+  }
+}
diff --git a/Login_With_Firebase/js/jquery-3.7.1.min.js b/Login_With_Firebase/js/jquery-3.7.1.min.js
diff --git a/Login_With_Firebase/signin.html b/Login_With_Firebase/signin.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Firebase-SignIn</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="js/jquery-3.7.1.min.js"></script>
+    <style>
+     body {
+      background-color: #f8f9fa;
+    }
+    .container {
+      max-width: 400px;
+      margin-top: 50px;
+      padding: 20px;
+      background-color: white;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    h2 {
+      color: #007bff;
+    }
+    </style>
+</head>
+<body>
+    <section>
+    <div class="container">
+        <h2 class="text-center mb-4">Login</h2>
+        <form id="loginForm">
+          <div class="mb-3">
+            <label for="email" class="form-label">Email</label>
+            <input type="email" class="form-control" id="email" required>
+          </div>
+          <div class="mb-3">
+            <label for="password" class="form-label">Password</label>
+            <input type="password" class="form-control" id="password" required>
+          </div>
+          <div class="d-grid gap-2">
+            <button type="button" class="btn btn-primary w-100" onclick="userSignIn()">Sign In</button>
+          </div>
+          <p class="text-center mt-3">Don't have an account? <a href="signup.html">Sign Up</a></p>
+        </form>
+      </div>
+    </section>
+
+    <!-- Firebase App (the core Firebase SDK) -->
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
+    <!-- Firebase Authentication -->
+    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/Login_With_Firebase/signup.html b/Login_With_Firebase/signup.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html class="no-js" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Firebase-SignUp</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="js/jquery-3.7.1.min.js"></script>
+  <style>
+    body {
+      background-color: #f8f9fa;
+    }
+    .container {
+      max-width: 500px;
+      margin-top: 50px;
+      padding: 20px;
+      background-color: white;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    h2 {
+      color: #007bff;
+    }
+  </style>
+</head>
+
+<body>
+<div class="container">
+  <h2 class="text-center mb-4">User Registration</h2>
+  <form id="signupForm">
+    <div class="mb-3">
+      <label for="name" class="form-label">Full Name</label>
+      <input type="text" class="form-control" id="name" required>
+    </div>
+    <div class="mb-3">
+      <label for="email" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="email" required>
+    </div>
+    <div class="mb-3">
+      <label for="password" class="form-label">Password</label>
+      <input type="password" class="form-control" id="password" required>
+    </div>
+
+    <button type="button" class="btn btn-primary w-100" onclick="userRegistration()">Sign Up</button>
+    <p class="text-center mt-3">Already have an account? <a href="signin.html">Login</a></p>
+  </form>
+</div>
+
+<!-- Firebase App (the core Firebase SDK) -->
+<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
+<!-- Firebase Authentication -->
+<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
+<script src="js/app.js"></script>
+</body>
+
+</html>