I have created 2 web applications using firebase and hosting. I am trying to create buttons that will sign in with Facebook, twitter, GitHub. I have a google button and that works no problem. However, the twitter, Facebook, and GitHub all ask for login info and then nothing happens. The console on Chrome gives no errors.
Here is my HTML code where I am running the scripts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UFT-8">
<title>Sawyer Talks | Login</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<!-- Cool Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Our stylesheet -->
<script src="https://kit.fontawesome.com/550d583bad.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../login/style.css">
</head>
<body>
<section>
<div class="box">
<div class="container">
<div class="form">
<h2 class="form_header"> Sawyer Talks | Login </h2>
<form>
<div class="input__box">
<input type="text" placeholder="Email" id="email">
</div>
<div class="input__box">
<input type="password" placeholder="Password" id="password">
</div>
<div class="input__box">
<button type="button" onclick="login()">Login</button> </br>
<!-- <button type="button" onclick="window.location.href='/login/register.html'">Register</button> -->
</div class="social__logins">
<button style="justify-content: center;
align-items: center; background-color: rgba(255, 255, 255, 0.589); border-radius: 35px; border: 1px solid rgba(255, 255, 255, 0.5);box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height:30px; padding-left:10px;padding-right:10px; margin-bottom: 20px; margin-top: 20px; margin-right: 10px;" type="button" id="googlesignin" > <i class="fa-brands fa-google"></i> Google</button>
<button style="justify-content: center;
align-items: center;background-color: rgba(255, 255, 255, 0.589); border-radius: 35px; border: 1px solid rgba(255, 255, 255, 0.5);box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height:30px; padding-left:10px;padding-right:10px;margin-right: 10px;" type="button" id="twittersignin"><i class="fa-brands fa-twitter"></i> Twitter</button>
<button style="justify-content: center;
align-items: center;background-color: rgba(255, 255, 255, 0.589); border-radius: 35px; border: 1px solid rgba(255, 255, 255, 0.5);box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height:30px; padding-left:10px;padding-right:10px;margin-bottom: 20px; margin-right: 10px;" type="button" id="githubsignin"><i class="fa-brands fa-github"></i> Github</button>
<button style="justify-content: center;
align-items: center;background-color: rgba(255, 255, 255, 0.589); border-radius: 35px; border: 1px solid rgba(255, 255, 255, 0.5);box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height:30px; padding-left:10px;padding-right:10px;margin-right: 10px;" type="button" id="facebooksignin"> <i class="fa-brands fa-facebook"></i> Facebook</button>
<button style="justify-content: center;
align-items: center;background-color: rgba(255, 255, 255, 0.589); border-radius: 35px; border: 1px solid rgba(255, 255, 255, 0.5);box-shadow: 0 5px 15px rgb(0 0 0 / 5%); border-right: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); height:30px; padding-left:10px;padding-right:10px;margin-right: 10px;" type="button" id="applesignin"> <i class="fa-brands fa-apple"></i> Apple</button>
<!-- <button type="button" onclick="window.location.href='/login/register.html'">Register</button> -->
<p style="margin-top:20px; color:rgb(73, 73, 73); font-size: small;" class="forget">Don't have an account? <a style="color:rgb(73, 73, 73); font-weight: 600;" href="/login/register.html">Register</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<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-database.js"></script>
<!-- Our script must be loaded after firebase references -->
<script src="../login/index.js"></script>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.js";
import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, GoogleAuthProvider, signInWithRedirect, getRedirectResult, signInWithPopup, signOut, GithubAuthProvider, TwitterAuthProvider, FacebookAuthProvider, OAuthProvider } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-auth.js";
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "insert_api_key",
authDomain: "auth.sawyertalks.com",
databaseURL: "https://sawyer-talks-default-rtdb.firebaseio.com",
projectId: "sawyer-talks",
storageBucket: "sawyer-talks.appspot.com",
messagingSenderId: "364789111427",
appId: "app_id",
measurementId: "id_goes_here"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
// Login With Google Account
const googleProvider = new GoogleAuthProvider(app);
googlesignin.addEventListener('click',(e) => {
signInWithPopup(auth, googleProvider)
.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;
// The signed-in user info.
const user = result.user;
location.href = '../index.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 = GoogleAuthProvider.credentialFromError(error);
// ...
alert(errorMessage);
});
});
// Login with Github Account
const githubProvider = new GithubAuthProvider(app);
githubsignin.addEventListener('click',(e) => {
signInWithRedirect(auth, githubProvider);
getRedirectResult(auth, githubProvider)
.then((result) => {
const credential = GithubAuthProvider.credentialFromResult(result);
if (credential) {
// This gives you a GitHub Access Token. You can use it to access the GitHub API.
const token = credential.accessToken;
// ...
}
// The signed-in user info.
const user = result.user;
location.href = '../index.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 = GithubAuthProvider.credentialFromError(error);
// ...
});
});
// Login with Twitter Account
const twitterProvider = new TwitterAuthProvider(app);
twittersignin.addEventListener('click',(e) => {
signInWithPopup(auth, twitterProvider)
.then((result) => {
// This gives you a the Twitter OAuth 1.0 Access Token and Secret.
// You can use these server side with your app's credentials to access the Twitter API.
const credential = TwitterAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
const secret = credential.secret;
// The signed-in user info.
const user = result.user;
// ...
location.href = '../index.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 = TwitterAuthProvider.credentialFromError(error);
// ...
});
})
// Login with Facebook Account
const facebookProvider = new FacebookAuthProvider(app);
facebookProvider.addScope('email');
facebooksignin.addEventListener('click',(e) => {
signInWithPopup(auth, facebookProvider)
.then((result) => {
// The signed-in user info.
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
const credential = FacebookAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const user = result.user;
// ...
location.href = '../index.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 = FacebookAuthProvider.credentialFromError(error);
// ...
});
});
// Login with Apple Account
const appleProvider = new OAuthProvider('apple.com')
appleProvider.addScope('email');
appleProvider.addScope('name');
applesignin.addEventListener('click',(e) => {
signInWithPopup(auth, appleProvider)
.then((result) => {
// The signed-in user info.
// Apple credential
const credential = OAuthProvider.credentialFromResult(result);
const accessToken = credential.accessToken;
const idToken = credential.idToken;
const user = result.user;
// ...
location.href = '../index.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 credential that was used.
const credential = OAuthProvider.credentialFromError(error);
// ...
});
});
</script>
Below is my .js code which runs fine
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyCLSGVG_LsnWpBYCzuVdCFei-I-qf3oODI",
authDomain: "auth.sawyertalks.com",
databaseURL: "https://sawyer-talks-default-rtdb.firebaseio.com",
projectId: "sawyer-talks",
storageBucket: "sawyer-talks.appspot.com",
messagingSenderId: "364789111427",
appId: "1:364789111427:web:9d4125884f8c2cf76599b6",
measurementId: "G-CW4Z3NZZE1"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize variables
const auth = firebase.auth()
const database = firebase.database()
// Set up our register function
function register () {
// Get all our input fields
First_Name = document.getElementById('fname').value
Last_Name = document.getElementById('lname').value
Username = document.getElementById('username').value
email = document.getElementById('email').value
password = document.getElementById('password').value
PhoneNum = document.getElementById('phonenum').value
// Validate input fields
if (validate_email(email) == false || validate_password(password) == false) {
alert('Please enter a valid email and password.')
return
// Don't continue running the code
}
if (validate_field(Last_Name) == false || validate_field(First_Name) == false || validate_field(Username) == false || validate_field(PhoneNum) == false) {
alert('Please fill out all fields.')
return
}
// Move on with Auth
auth.createUserWithEmailAndPassword(email, password)
.then(function() {
// Declare user variable
var user = auth.currentUser
// Add this user to Firebase Database
var database_ref = database.ref()
// Create User data
var user_data = {
email : email,
First_Name : First_Name,
Last_Name : Last_Name,
Username : Username,
PhoneNum : PhoneNum,
last_login : Date.now()
}
// Push to Firebase Database
database_ref.child('users/' + user.uid).set(user_data)
// DOne
alert('Registration Complete!')
location.href = '../index.html';
})
.catch(function(error) {
// Firebase will use this to alert of its errors
var error_code = error.code
var error_message = error.message
alert(error_message)
})
}
// Set up our login function
function login () {
// Get all our input fields
email = document.getElementById('email').value
password = document.getElementById('password').value
// Validate input fields
if (validate_email(email) == false || validate_password(password) == false) {
alert('Incorrect email/password.')
return
// Don't continue running the code
}
auth.signInWithEmailAndPassword(email, password)
.then(function() {
// Declare user variable
var user = auth.currentUser
// Add this user to Firebase Database
var database_ref = database.ref()
// Create User data
var user_data = {
last_login : Date.now()
}
// Push to Firebase Database
database_ref.child('users/' + user.uid).update(user_data)
// DOne
alert('Logged In!')
window.location.href="../index.html";
})
.catch(function(error) {
// Firebase will use this to alert of its errors
var error_code = error.code
var error_message = error.message
alert(error_message)
})
}
// Validate Functions
function validate_email(email) {
expression = /^[^@]+@\w+(\.\w+)+\w$/
if (expression.test(email) == true) {
// Email is good
return true
} else {
// Email is not good
return false
}
}
function validate_password(password) {
// Firebase only accepts lengths greater than 6
if (password < 6) {
return false
} else {
return true
}
}
function validate_field(field) {
if (field == null) {
return false
}
if (field.length <= 0) {
return false
} else {
return true
}
}
Any help would be appreciated. thank you!