Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ervhyne
Ervhyne authored Apr 22, 2024
0 parents commit 4112aea
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 0 deletions.
84 changes: 84 additions & 0 deletions Google Auth Sign-In/dashboard.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="dashboard-content">
<h2>Welcome to Your Dashboard</h2>
<div id="user-profile">
<img id="profile-img" src="" alt="Profile Image">
<p id="user-name"></p>
</div>
<button id="logout-btn">Logout</button>
</div>
</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js";

// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyCIvLBTUvsW_u3ASsfpPbWejKVWjGRGyO8",
authDomain: "authentication-act-cfe38.firebaseapp.com",
projectId: "authentication-act-cfe38",
storageBucket: "authentication-act-cfe38.appspot.com",
messagingSenderId: "5515943136",
appId: "1:5515943136:web:b259650452ad9a6dec0485"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Get Firebase Auth instance
const auth = getAuth();

// Elements
const profileImg = document.getElementById("profile-img");
const userName = document.getElementById("user-name");
const logoutBtn = document.getElementById("logout-btn");

// Listen for authentication state changes
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in
const displayName = user.displayName;
const photoURL = user.photoURL;

// Set profile image and user name
profileImg.src = photoURL;
userName.textContent = displayName;

// Show dashboard
document.body.style.display = "block";
} else {
// User is signed out
// Redirect to login page
window.location.href = "index.html";
}
});

// Logout button click event
logoutBtn.addEventListener("click", () => {
console.log("Logout button clicked");
signOut(auth).then(() => {
// Sign-out successful
console.log("User signed out successfully");
// Redirect to login page
window.location.href = "index.html";
}).catch((error) => {
// An error happened
console.error("Error signing out:", error);
});
});
</script>
</body>

</html>
73 changes: 73 additions & 0 deletions Google Auth Sign-In/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<div class="login-form">
<h2>Login</h2>
<!-- Change type from "submit" to "button" -->
<button id="google-btn" class="social-login">
<img src="https://imagepng.org/wp-content/uploads/2019/08/google-icon.png" class="google-icon" />
Login with Google
</button>
</div>
</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js";


// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyCIvLBTUvsW_u3ASsfpPbWejKVWjGRGyO8",
authDomain: "authentication-act-cfe38.firebaseapp.com",
projectId: "authentication-act-cfe38",
storageBucket: "authentication-act-cfe38.appspot.com",
messagingSenderId: "5515943136",
appId: "1:5515943136:web:b259650452ad9a6dec0485"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Get Firebase Auth instance
const auth = getAuth();
const provider = new GoogleAuthProvider();
provider.setCustomParameters({
prompt: 'select_account'
});
// Elements
const googleLoginBtn = document.getElementById("google-login");

// Add event listener to the Google login button
document.getElementById("google-btn").addEventListener("click", (e) => {
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// Redirect to dashboard or any other page
window.location.href = "dashboard.html";
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = error.credential;
// Log the error
console.error(error);
});
});
</script>
</body>

</html>
86 changes: 86 additions & 0 deletions Google Auth Sign-In/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #111;
color: #fff;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/*--------SignIn Design--------*/

.login-form {
background-color: #222;
padding: 20px 100px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
text-align: center;
}

.login-form h2 {
margin-bottom: 20px;
}

.social-login {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}

.social-login:hover {
background-color: #0056b3;
}

.google-icon {
width: 20px;
height: 20px;
margin-right: 10px;
}

/*--------Dashboard Design--------*/
.dashboard-content {
text-align: center;
}

#user-profile {
margin-bottom: 20px;
}

#profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 10px;
}

#user-name {
font-size: 18px;
margin-bottom: 10px;
}

#logout-btn {
padding: 10px 20px;
background-color: #007bff;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}

#logout-btn:hover {
background-color: #0056b3;
}

0 comments on commit 4112aea

Please sign in to comment.