1 year ago

#361885

test-img

Liam Sawyer

Firebase Sign In with Github/Twitter/Facebook Not working

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!

javascript

firebase-authentication

github-oauth

0 Answers

Your Answer

Accepted video resources

Posts

Questions

Blogs

Jobs