Android Example [B4X] Supabase - Authentification SignIn with Google

[B4X] Supabase - The Open Source Firebase alternative

Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product. Supabase uses Postgres database with real-time capabilities. Basically, supabase provides an interface to manage postgres database that you can use to create table and insert, edit...

www.b4x.com

In this example, we will take a look at how we can implement authentication using Google sign-in to secure our application using the Supabase SDK for B4X.

Configure the Client IDs on the Google developer console
We will obtain client IDs for B4I, B4A and B4J from the Google Cloud console, and register them to our Supabase project.

1. Go to Google developer console, create a new project if needed and add a client id:

We need a separate Client Id for each platform.

• Type
  • B4A=Android
  • B4I=Ios
  • B4J=Web application

For the B4A client you need to get the SHA-1 signature. It is available under Tools - Private Sign Key.
Set the package name or bundle identifier fields to your app's package name.

For the B4J client you need to whitelist a uri:

http://127.0.0.1:3000

2. B4A:
Add to the manifest editor:

AddActivityText(Main,
  <intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="$PACKAGE$" />
  </intent-filter>
   )

Add this to B4XMainPage:

Private Sub B4XPage_Foreground
    #if B4A
    xSupabase.Auth.CallFromResume(B4XPages.GetNativeParent(Me).GetStartingIntent)
    #End If
End Sub

B4i:
Change b4i.example2 with your package name.

#UrlScheme: b4i.example2

Add this to the main module:

Private Sub Application_OpenUrl (Url As String, Data As Object, SourceApplication As String) As Boolean
    B4XPages.MainPage.xSupabase.Auth.CallFromOpenUrl(Url)
    Return True
End Sub

Configure Google sign-in on Supabase Auth
Open the Supabase Dashboard and got to: authentication -> Providers -> Google
to set up Google auth. Toggle the Enable Sign in with Google switch first. Then add the 3 client IDs you obtained in your Google Cloud console to Authorized Client IDs field with a comma in between the two client IDs like this: ANDROID_CLIENT_ID,IOS_CLIENT_ID.

B4A, B4I and B4J Code
Simply insert the "xxx" with the client id from the respective platform. In B4J you still need the ClientSecret, you can also find it in the Google Dashboard.

    #If B4A
    Wait For (xSupabase.Auth.SignInWithOAuth("xxx.apps.googleusercontent.com","google","profile email https://www.googleapis.com/auth/userinfo.email")) Complete (User As SupabaseUser)
    #Else If B4I
    Wait For (xSupabase.Auth.SignInWithOAuth("xxx.apps.googleusercontent.com","google","profile email https://www.googleapis.com/auth/userinfo.email")) Complete (User As SupabaseUser)
    #Else If B4J
    Wait For (xSupabase.Auth.SignInWithOAuth("xxx.apps.googleusercontent.com","google","profile email https://www.googleapis.com/auth/userinfo.email","xxx")) Complete (User As SupabaseUser)
    #End If

    If User.Error.Success Then
        Log("successfully logged in with " & User.Email)
        xui.MsgboxAsync("successfully logged in with " & User.Email, "SignIn with Google")
    Else
        Log("Error: " & User.Error.ErrorMessage)
        xui.MsgboxAsync("Error: " & User.Error.ErrorMessage, "SignIn with Google")
    End If

Tips
It may be that you still need to enable the People API in the Google Dashboard.

That's it!
Now your users can easily log in to your app with google.

 

[Alexander Stolte]

A big thank you goes to @Erel for his oauth2 class, this is the foundation in this implementation.