CODEWITHSUNDEEP
firebasewebfirebase-authenticationfirebaseui
Abhimanyu
Abhimanyu

Reputation: 14817

Firebase Auth UI not working in Web

I am learning Firebase Auth UI in web and I follow Firecast Tutorial videos from youtube. I had created the following page. But the UI is not loading! Is there something I missed?

Note :
1. I am loading the page using a local server. (using firebase serve in cmd)
2. I have hidden the API key details for security reasons.

var config = {
  apiKey: "myapiKey",
  authDomain: "myauthDomain",
  databaseURL: "mydatabaseURL",
  projectId: "myprojectId",
  storageBucket: "mystorageBucket",
  messagingSenderId: "mymessagingSenderId"
};
firebase.initializeApp(config);

//  Firebase UI auth
var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: 'localhost:5000/success.html',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>'
};

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

ui.start('#firebaseui-auth-container', uiConfig);

//  Auth state change listener
firebase.auth().onAuthStateChanged(function(user) {
  console.log("Inside onAuthStateChanged Function");
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    console.log(displayName);
    console.log(email);
    console.log(emailVerified);
    console.log(photoURL);
    console.log(isAnonymous);
    console.log(uid);
    console.log(providerData);
  } else {
    console.log("Use is not si");
  }
});
<html>

<head>
  <title>Firebase Web Tutorial</title>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-firestore.js"></script>

  <!-- Firebase Auth UI -->
  <script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js" />
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
</head>

<body>
  <div id="firebaseui-auth-container"></div>
  <script src="index.js"></script>
</body>

</html>

This is what I saw in chrome developer mode :

enter image description here

Upvotes: 2

Views: 3405

Answers (1)

Jake Hall
Jake Hall

Reputation: 41

I know this is kind of an old post, but I just had a similar problem when creating a Vue project that will be using firebase. I found some info on the firebaseui-web github docs:

https://github.com/firebase/firebaseui-web#installation

What fixed it for me was adding a line importing the styling directly.

So it went from this:

import * as firebase from 'firebase/app'
import * as fireabaseui from 'firebaseui'

To this:

import * as firebase from 'firebase/app'
import * as firebaseui from 'firebaseui'

/* the line below added in the styling for me */
import 'firebaseui/dist/firebaseui.css'

I've never answered here, but this is the first issue I've found and fixed so I thought I should post it incase someone else runs into it!

*edited to add a missing ":" that annoyed me.

Upvotes: 4

Related Questions