Firebase Google sign in not working

Question

Firebase Google sign in not working

603 Views Asked by user8984670 At 22 November 2017 at 02:40

I've made a sign in code like this:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gmail Sign In</title>

<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyC04no7Ge4ku9xQI3bjJknjhUK9W3UuoiE",
    authDomain: "sb-sign.firebaseapp.com",
    databaseURL: "https://sb-sign.firebaseio.com",
    projectId: "sb-sign",
    storageBucket: "sb0!-sign.appspot.com",
    messagingSenderId: "431178337718"
  };
  firebase.initializeApp(config);
   window.onload = login();
  function login(){
    firebase.auth().onAuthStateChanged(newLoginHappend);
    function newLoginHappend(user){
        if (user){
            //user has signed in
            app(user);
            document.getElementById("SignOutButton").style = "display:block";
        }
        else{
            document.getElementById("SignInButton").style = "display:block";
            document.getElementById("ClientName").innerHTML = there! please login.;

  }
  function app(user){
  //user.displayName    
  //user.email
  //user.photoURL
  //user.uid
document.getElementById("ClientName").innerHTML = user.displayName;
  }

  SignIn(){
    var provider = new firebase.auth.GoogleAuthProvider();
            firebase.auth().signInWithRedirect(provider);
        }
    }


  }



</script>
   </head>
   <body>
     <h1>
         Hello, <span id="ClientName"></span>
         <button id="SignInButton" style="display:none" onclick='SignIn()'>Sign In</button> <button id="SignOutButton" style="display:none" onclick='firebase.auth().signOut();window.refresh();'>Sign Out</button>
     </h1>
   </body>
</html>

When body loads, if user is not signed in, then want to show the sign-in button (#SignInButton), hide the sign out button and show a text output saying "hello there! Please login". And when user click over that button, I want show 'em the sign in page. On body load, if the user is already signed in, I wants to show the text, saying "hello ". And also, I want to hide the sign in button and show the sign out button. But when I open this page, I just saw a text "Hello" in the screen. Nothing else shown. Nor sign-in button neither signout button. Please help. Thanks in advance.

Original Q&A

There are 2 best solutions below

**B-GangsteR** · Answer 1 · 2017-11-22T06:45:45.470000

Your javascript contain syntax error:

SyntaxError: missing ; before statement firebase.html:29:60

That means that string should be quoted like this:

document.getElementById("ClientName").innerHTML = 'there! please login.';

or like this:

document.getElementById("ClientName").innerHTML = "there! please login.";

**user8984670** · Answer 2 · 2017-11-22T13:55:16.873000

I've found the answer my self. I've done some code rewriting and some changes. Now it's working properly. Here's the new code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Gmail Sign In</title>

<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyC04no7Ge4ku9xQI3bjJknjhUK9W3UuoiE",
    authDomain: "sb-sign.firebaseapp.com",
    databaseURL: "https://sb-sign.firebaseio.com",
    projectId: "sb-sign",
    storageBucket: "sb-sign.appspot.com",
    messagingSenderId: "431178337718"
  };
firebase.initializeApp(config);
  function login(){
    function newLoginHappend(user){
        if (user){
            //user has signed in
            app(user);
document.getElementById("SignOutButton").style = "display:block";
document.getElementById("SignInButton").style = "display:none";
        }
        else{       }
    }
firebase.auth().onAuthStateChanged(newLoginHappend);


  }
  function login2(){
    function newLoginHappend(user){
        if (user){
            //user has signed in
            app(user);
document.getElementById("SignOutButton").style = "display:block";
        }
        else{
            var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider);
        }
    }
firebase.auth().onAuthStateChanged(newLoginHappend);
  }
  function app(user){
  //user.displayName    
  //user.email
  //user.photoURL
  //user.uid
document.getElementById("ClientName").innerHTML = user.displayName;
  }
  window.onload = login();
</script>
   </head>
   <body>
     <h1>
         Hello, <span id="ClientName"></span> 
         </h1>
         <button id="SignInButton" style="display:block" onclick='login2()'>Sign In</button>    <button id="SignOutButton" style="display:none" onclick='firebase.auth().signOut();location.reload(true);'>Sign Out</button>

   </body>
</html>

Firebase Google sign in not working

There are 2 best solutions below

Related Questions in FIREBASE

Related Questions in FIREBASE-AUTHENTICATION

Related Questions in FIREBASEUI

Related Questions in FIREBASESIMPLELOGIN

Trending Questions

Popular # Hahtags

Popular Questions