Google Sign-In JS Bridge

Last updated: Jun 20, 2026

The Google Sign-In Bridge lets your website JavaScript trigger native Google authentication on the device and receive the signed-in user's profile back — without any redirect, browser tab, or PKCE flow.

This is useful when your website cannot complete the Google Sign-In flow on its own inside the app (for example, single-page apps, custom auth libraries, or AI-built platforms like Lovable and Bolt that use a managed OAuth flow).

For a general introduction to the JavaScript Bridge, see the Overview article.

Prerequisites

Before the JS Bridge can trigger Google Sign-In, you must configure the Google Sign-In module in your Appilix dashboard:

  1. Go to your app's Integration Modules and enable Google Sign-In.

  2. Enter the Android Client ID (and/or iOS Client ID) generated from Google Cloud Console for your app.

The JS Bridge will not work if the Android/iOS Client ID is not configured in the dashboard. See the Google Sign-In settings article for how to obtain and enter these credentials.

Triggering Sign-In

Call appilix.postMessage with type: "google_sign_in" to open the native Google account picker on the device:

javascript
appilix.postMessage(JSON.stringify({
    type: "google_sign_in",
    props: {
        web_client_id: "WEB_CLIENT_ID", // optional if already set in dashboard module settings
        scope:         "email profile", // optional — defaults to "email profile"
        response_type: "code",          // optional — "code" | "id_token"
    }
}));

Props reference:

PropRequiredDescription
scopeNoOAuth scopes to request, space-separated. Defaults to email profile.
web_client_idNoYour website's Web OAuth Client ID from Google Cloud Console. Can be omitted if already entered in the dashboard Integration Modules settings. Required here if not set there, or when using response_type.
response_typeNo"code" returns a server auth code your backend can exchange for tokens. "id_token" returns a signed JWT your backend can verify. Only valid when web_client_id is provided.

Receiving the Response

Set appilix.onmessage before or immediately after triggering sign-in. The app calls it once with the result:

javascript
appilix.onmessage = function(event) {
    const data = JSON.parse(event.data);
    if (data.type !== "google_sign_in") return;

    appilix.onmessage = null; // Remove listener after handling

    if (data.response.error) {
        console.error("Google Sign-In failed:", data.response.error);
        return;
    }

    console.log("Signed in:", data.response);
    // data.response.email, .name, .picture, .id, .code, .id_token
};

Response fields:

FieldDescription
emailUser's Google account email address
nameUser's display name
pictureURL of the user's Google profile photo
idStable Google account ID
codeServer auth code — present when response_type: "code". Exchange on your backend via https://oauth2.googleapis.com/token.
id_tokenSigned JWT — always present. Verify on your backend using Google's public keys.
errorError message string on failure, null on success.

Complete Example

javascript
function signInWithGoogle() {
    if (typeof appilix === 'undefined') return; // only runs inside the app

    appilix.onmessage = function(event) {
        const data = JSON.parse(event.data);
        if (data.type !== "google_sign_in") return;

        appilix.onmessage = null;

        if (data.response.error) {
            console.error("Sign-in error:", data.response.error);
            return;
        }

        const { email, name, picture, code } = data.response;

        // Send the auth code to your backend for token exchange
        fetch("/auth/google/callback", {
            method:  "POST",
            headers: { "Content-Type": "application/json" },
            body:    JSON.stringify({ code, email, name, picture })
        })
        .then(res => res.json())
        .then(result => {
            if (result.success) window.location.href = "/dashboard";
        });
    };

    appilix.postMessage(JSON.stringify({
        type: "google_sign_in",
        props: {
            web_client_id: "YOUR_WEB_CLIENT_ID",
            scope:         "email profile",
            response_type: "code"
        }
    }));
}

When to Use This

Use the JS Bridge flow when:

  • Your website uses a managed OAuth flow (Lovable, Bolt, Supabase Auth, Firebase Auth, etc.) that Appilix cannot intercept automatically.

  • Your website is a single-page app where there is no page reload to complete a redirect-based flow.
  • You need an auth code (server-side token exchange) rather than just the user's profile.

For websites where the automatic sign-in flow already works, the JS Bridge is not required. See the Google Sign-In settings article for the standard setup.