Social Sign In

Ensemble supports Social Sign in with Google and Apple. This guide will specifically target the Sign in with Google flow. For each service, we support three different mechanism for managing the signed-in users: Client-side, with your Server, or with Firebase.

Client-side

Ensemble supports Signing In from the client side without any backend server. User information is stored locally on the device.

Build your screens on Studio

First build a Login screen.


View:
  styles:
    useSafeArea: true
 
  body:
    Column:
      styles:
        # centering the content
        mainAxisSize: min
        crossAxis: center
        alignment: center
      children:
        - Text:
            text: Welcome to a SignIn Example
            styles:
              textStyle:
                fontSize: 20
              padding: 0 0 20 0
 
        - SignInWithGoogle:
            # Once signed in, go to the screen 'Home' 
            # Also clear all previous screens to prevent Back button navigation
            onSignedIn:
              navigateScreen:
                name: Home
                options:
                  clearAllScreens: true

Now build the screen Home to show the currently logged-in user’s information.


View:
  header:
    title: Welcome Home
  
  # onLoad check if currently signed in. If not go to the Login screen
  onLoad:
    verifySignIn:
      onNotSignedIn:
        navigateScreen:
          name: Login
 
  body:
    Column:
      styles:
        padding: 24
        gap: 8
      children:
        - Row:
            styles:
              gap: 7
            children:
              # Current user's info is under ${auth.user.*}
              - Avatar:
                  source: ${auth.user.photo}
              - Text:
                  text: |-
                    ${auth.user.name}
                    ${auth.user.email}
        - Button:
            label: Sign Out
            onTap:
              # sign out will clear the user info
              signOut:
                onComplete:
                  # once signed out, go to the Login screen
                  # Also clear all existing screens so the user can't go back
                  navigateScreen:
                    name: Login
                    options:
                      clearAllScreens: true

Server-side

Currently Social Sign In with your custom Server has to be managed manually. Below is an example flow, and your implementation can varies per your needs.

Use the Social Sign in to authenticate the user. This will return the idToken and the user information.
Send this idToken to your server, which can validate that this idToken was issued by Google, extract the user information from the idToken, and return server-specific credentials (e.g. bearer token, cookies) for this user back to the client.
The client can then save these credentials into storage and use them for subsequent requests.


View:
  body:
    SignInWithGoogle:
      # the user successfully authenticated with Google
      onAuthenticated:
        invokeAPI:
          # call your server, pass the idToken and return server-specific credentials
          name: signInToServer
          inputs:
            # idToken can be accessed on event.data.idToken
            token: ${event.data.idToken}
 
            # user info can be accessed via event.data.user.*
            email: ${event.data.user.email}
 
          onResponse:
            executeCode:
              # store the bearerToken for latter use
              body: |-
                ensemble.storage.token = response.body.bearerToken;
              onComplete:
                navigateScreen:
                  name: Home
                  options:
                    replaceCurrentScreen: true
 
API:
  # Your server should validate that the idToken is indeed issued by Google
  # The server can then create/update the user account in your database, and return server-specific credentials about this user
  signInToServer:
    inputs: [token]
    uri: https://myExampleApi.com/auth
    parameters:
      token: ${token}

NOTE: This property only works for native applications (Android and iOS), on web it will not replace default Google Sign-In Button.

Ensemble allows you to replace the default SignInWithGoogle Widget UI with your own custom widget. By using the widget property within the SignInWithGoogle Widget, you can specify any widget to display in place of the default button. This feature enables full customization of the UI, while maintaining the same behavior for signing in and handling events.

The widget property can be used inside the SignInWithGoogle Widget to define a custom widget. If this property is set, it will replace the default Google Sign-In button with the provided widget.

Example:


SignInWithGoogle:
  onSignedIn:
    showToast:
      message: ${auth.user.email}
  onError:
    showToast:
      message: Something went wrong
  widget:
    IconButton:
      icon:
        name: google
        library: fontAwesome
        color: red

Social Sign In

Client-side

Build your screens on Studio

Server-side

Add Custom Widget to Google Sign-In Button

How to Use the widget Property:

Example: