Authentication by Google Account - SchneiderInfosystems/FB4D GitHub Wiki

To get to know this complex workflow, we recommend using the demo application to get started. This workflow requires some preparations for your Firebase project and some things can go wrong.

The red-bordered controls must be observed for this login variant, whereby the first upper field User EMail address is only optional and can be left empty at the beginning and should not be taken into account.

The following short video shows how authentication works when using an existing Google account.

Google OAuth2 Authentication with FB4D in Demo Application

For this login, Google requires that the standard system Internet browser is operated by the user during login. It does not matter whether Edge, Chrome or Firefox is configured as the default browser on a Windows system. On a Mac system, Safari, Chrome or an alternative browser can also be defined as the default browser.

For security reasons, Google prevents the embedding of a Chrome-based browser in the calling application, which would of course be much easier from a user perspective and would place fewer demands on users when switching back to their application.

In contrast to the demo application, you will not display the ClientID and ClientSecret in a real application, but hide them as securely as possible in your application so that nobody can misuse your Firebase access information.

The next chapter explains how to obtain these two values ​​and what else needs to be prepared.

Preparation in the Firebase Console

First, the authentication provider for Google is enabled in the Firebase project. See also setup the authentication method.

The next step requires an application for the Firebase project. Although this step can also be performed in the Google Cloud Console, it's a bit easier here. Add an application using Add App. For the application in FB4D, it doesn't matter whether you're creating an Android, iOS, or web application. It's important to remember the application name; we'll need it again in the Google Cloud Console in the next step.

It doesn't matter exactly what you fill out in the app wizard; we only need this app indirectly to create a corresponding Google Auth client later. If you've already created an app on this Firebase project or needed FCM, use that app. Otherwise, the easiest way is to create a web application by clicking on the symbol </>.

You can ignore the information from the Add Firebase SDK step. You can also ignore the information from the Install Firebase CLI and the Deploy to Firebase hosting steps unless you also want to use a Firebase Serverless function in the same project.

Preparation in the Google Cloud Console

Unfortunately, not all of the preparation can be done in the tidy Firebase Console; instead, the Google Cloud Console, which is much more complicated and difficult for a beginner to master, must also be opened for the same Firebase project.

If you have no experience using the Google Cloud Console, I recommend that you follow the instructions below so that you don't lose track.

In the project settings, go to Service Accounts and click on Manage service account permissions as shown in the following figure.

First, I recommend checking your project name in the Cloud console, as shown in [1]. If it matches, click the settings icon [2] to navigate to the API [3] and the OAuth consent screen [4].

By clicking on the Clients menu [1] you will get to the following view.

Here you can see the Client ID [2] created for this web application, which you must write down. The Client Secret [3] will also be needed later in the demo app.

For authentication to work from the FB4D application, one more step is required. We need to enter the following authorized redirect URI: http://localhost. To do this, add a URI in [4] and enter the address above.

To test the entire workflow, we launch our demo app again and enter the client ID and secret. Then click "Login by using Google Account" and wait until the browser starts with Google authentication.

If the authorization was successfully completed on a Mac, you will see the following situation.

Close the browser and continue with the demo application. Note that a 60-second timeout limits the authentication process.

If the Firebase token needs to be renewed after one hour of operation, authorization via Google Cloud Authorization is no longer required. FB4D Authentication will handle this step automatically in the background as usual.

Hint to the final authorization view in the browser.

At this point, I've taken the liberty of pointing out the FB4D library. Clicking on the logo will take you to this project's sponsorship page. I'm happy to remove this subtle advertisement for your commercial project. Please read the details on the sponsorship page. The last point below Sponsorship Benefits explains the conditions. I count on your understanding that such an extensive library cannot be further developed without your support.