Firebase

Question

I'm playing around with Firebase and I'm trying to get authenticated through Google sign in. I created a firebase project and in sign-in methods, I enabled the Google provider.

Then in my index.html I have this which was mostly generated by firebase init. I added the button in there.

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/6.0.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/6.0.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/6.0.2/firebase-database.js"></script>
    <script defer src="/__/firebase/6.0.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/6.0.2/firebase-storage.js"></script>
    <!-- initialize the SDK after all desired features are loaded -->
    <script defer src="/__/firebase/init.js"></script>
    <script src="signin.js"></script>

    </style>
  </head>
  <body>
      <button id="signin">Sign in</button>
  </body>
</html>

And in my signin.js I handle the login

document.addEventListener("DOMContentLoaded", function(event) { 
    var firebaseConfig = {
        apiKey: "AIzaSyC8bHVEtWDcTLJ0b8UOOZ5ClCV1tobqm5w",
        authDomain: "second-d10d4.firebaseapp.com",
        databaseURL: "https://second-d10d4.firebaseio.com",
        projectId: "second-d10d4",
        storageBucket: "second-d10d4.appspot.com",
        messagingSenderId: "912088308787",
        appId: "1:912088308787:web:24c9fa6af5dd0771"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    let signinbutton = document.getElementById("signin");
    signinbutton.addEventListener("click", signin);            
  });

  function signin(){
    var provider = new firebase.auth.GoogleAuthProvider()
    firebase.auth().signInWithPopup(provider)
    .then(result => {
        console.log("auth success")
        console.log(result)

        var token = result.credential.accessToken

        var user = result.user

    })
    .catch(error => {
        console.log("auth error")

        var errorCode = error.code;
        var errorMessage = error.message;

        var email = error.email;

        var credential = error.credential;

    })
}

After deploying, when I visit the site and try to sign in I receive this error.

403. That’s an error.

Error: restricted_client

Application: project-912088308787

You can email the developer of this application at: unconfiguredapp@google.com

This app is not yet configured to make OAuth requests. To do that, set up the app’s OAuth consent screen in the Google Cloud Console.

Learn more

Request Details
response_type=code
client_id=912088308787-potc94v4vl23tscu3gm9pnqu282s52nl.apps.googleusercontent.com
redirect_uri=https://second-d10d4.firebaseapp.com/__/auth/handler
state=AMbdmDnNM2kSjUeMO4KsxjdWqODEehA03g2bOBE5ZMEgzwCFXx5_n81fN_IKs52mn6P9bWpzMGF0ja9gDSyA39vx5ukZo_bY6UBitPUkFTKQvK3hSYxYyrjCxW4mJ3F5076yhktxbVchOAkMtKCl7vyh2pX4SjBV2YjvP-_CL8l9y-RWaegyO7_qq7qcxXsjVe8SKziqRV_AjMt7I9GZTVfaLovBfz-KkLwG1CSGdvfXs8XZImuDz6KR9sri-QlcDFthhxih0EOi9fJt10oNYEvBNtn5Y_54sQcMVKanlnIWiltG-KJyjY_0pwy6HyhPBDdDGKUe5g
scope=openid https://www.googleapis.com/auth/userinfo.email profile https://www.googleapis.com/auth/contacts.readonly

Does anyone know what might be causing this error?

Edit: Problem solved. Solution proposed by user: Vanduc1102 fixed it. Set the support email in firebase project settings enter image description here Edit 31/07/2019: If you still have issues after inserting the support email: On the displayed 403 Error page, clicking "Learn More" takes you to the GCP "OAuth Consent Screen" From there you will see two fields "Support email" and "Application Logo". For the Application Logo any icon/image can be used to identify the app and for the support email, should be the email used in the firebase console. Once Application Logo is uploaded and Support Email field is filled, save the changes and Google Authentication should now work with your app.

vanduc1102 · Accepted Answer

I got the issue while following the tutorial: https://medium.com/firebase-developers/how-to-setup-firebase-authentication-with-react-in-5-minutes-maybe-10-bb8bb53e8834

I fixed the issue by correcting the support email field, it was blank

enter image description here

Joshua Craven · Answer

Setting up OAuth 2.0 To use OAuth 2.0 in your application, you need an OAuth 2.0 client ID, which your application uses when requesting an OAuth 2.0 access token.

To create an OAuth 2.0 client ID in the console:

Go to the Google Cloud Platform Console. From the projects list, select a project or create a new one. If the APIs & services page isn't already open, open the console left side menu and select APIs & services. On the left, click Credentials. Click New Credentials, then select OAuth client ID. Note: If you're unsure whether OAuth 2.0 is appropriate for your project, select Help me choose and follow the instructions to pick the right credentials.

Select the appropriate application type for your project and enter any additional information required. Application types are described in more detail in the following sections. If this is your first time creating a client ID, you can also configure your consent screen by clicking Consent Screen. (The following procedure explains how to set up the Consent screen.) You won't be prompted to configure the consent screen after you do it the first time. Click Create client ID

Firebase - Can't authenticate with Google sign in

Tags:

google-authentication

Irelia

2 Answers

vanduc1102

Joshua Craven

Recent Activity

Donate For Us