Question 119257 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase Google Login does not ask for user passwords

Firebase Google Login does not ask for user passwords and redirects to a wrong page.

The firebase email sign in does work.

I have set up the Authorised redirect URIs to the correct ones in the config JS code, in the firebase console and in the Google Cloud API key.

When I press the Google button it redirects to something like:

www.myurl.com/__/auth/handler?apiKey=xxxxxxxxxxxxxxxxxxxxx&appName=%5BDEFAULT%5D-firebaseui-temp&authType=signInViaRedirect&redirectUrl=https%3A%2F%2Fwww.myurl.com%2Fsign-in&v=9.13.0&providerId=google.com&scopes=profile

The code in my site is the following:

In the header:

<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link
      type="text/css"
      rel="stylesheet"
      href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css"
      />

in the body, I have an element with the following code:

<div id="firebaseui-auth-container"></div>

<script type="text/javascript">
      //const auth = firebase.auth();
      // FirebaseUI config.
      var uiConfig = {
        // Important: the following URL should be in both Firebase and Gloogle Cloud authorised clients
        signInSuccessUrl: "/private/main",
        // autoUpgradeAnonymousUsers: true,
        signInOptions: [
          // Leave the lines as is for the providers you want to offer your users.
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.EmailAuthProvider.PROVIDER_ID,

        ],
        // tosUrl and privacyPolicyUrl accept either url string or a callback.
        // Terms of service url/callback.
        tosUrl: "/terms-of-services",
        // Privacy policy url/callback.
        privacyPolicyUrl: "/privacy-policy"
      };
      // App's Firebase configuration
      const firebaseConfig = {
        apiKey: "xxxxxxxxxxxxxxxxxx",
        authDomain: "myurl.com",
        projectId: "xxxxxxxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxxxxxxx",
        appId: "xxxxxxxxxxxxxxxxx",
      };

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

      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // The start method will wait until the DOM is loaded.
      ui.start("#firebaseui-auth-container", uiConfig);
    </script>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out the solutions was to add to the Google Cloud API key the firebase authentication domain that appears in the firebaseConfig variable apart of the URL where the website doing the authentication is hosted.


  2. 0

    There seems to be an issue with the syntax in element firebaseui-auth-container where the redirects are not getting called properly,which lands to an incorrect signIn page also as per your comment if the user is also already signedIn and you have verified it,then the redirects and rendering might cause this behavior.
    I would suggest you remove the extra comma you have after the Email AuthProvider below;and check if the sign options work properly.

    signInOptions: [ // Leave the lines as is for the providers you want to offer your users.    
  firebase.auth.GoogleAuthProvider.PROVIDER_ID,  
  firebase.auth.EmailAuthProvider.PROVIDER_ID]

    Along with the above changes, try to add the following custom parameters if you wish to configure forced password re-entry every time the page is loaded for re authentication and singIn.

      signInOptions: [
{
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },

    Also check the section for default redirect url on the sigIn success.

    // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>'

    I would also recommend you to check below links for similar examples:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search