Google Login

Let members sign in with their Google account. This uses a per-tenant, bring-your-own (BYO) Google app, so the consent screen shows your app name. First, ① create an OAuth 2.0 client (Web) in the Google Cloud Console and register your callback page URL (e.g. https://your-domain.com/user/oauth-callback) under Authorized redirect URIs; then ② save the Client ID/Secret in the Admin Console under System > Settings ('Google Login' card). ③ Finally, use the form below. Both the sign-in form page and the callback page run under the same data identifier SIGN_IN.

Data Identifier

{
  "dataID": "SIGN_IN"
}
KeyDescription
dataIDThe data identifier. Google login uses the same SIGN_IN flow as normal login, and both the sign-in form page and the callback page run under this identifier.

HTML

<form id="frm_sign_in">
    <input type="hidden" id="return_url" name="return_url" value="/login/success.html">
    <input type="hidden" id="fail_url" name="fail_url" value="https://your-domain.com/user/sign-in">
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://your-domain.com/user/oauth-callback">
    <button type="button" class="h-btn-sign-in-google">Continue with Google</button>
</form>

<!-- ================================================================= -->
<!-- 2) OAuth callback page  (the oauth_redirect_uri URL,               -->
<!--    e.g. https://your-domain.com/user/oauth-callback)               -->
<!--    Same dataID: SIGN_IN. user.js detects ?code&state and           -->
<!--    auto-submits AUTH_USER, then redirects to return_url.           -->
<!-- ================================================================= -->
<form id="frm_sign_in">
    <input type="hidden" id="return_url" name="return_url" value="/login/success.html">
    <input type="hidden" id="fail_url" name="fail_url" value="https://your-domain.com/user/sign-in">
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://your-domain.com/user/oauth-callback">
</form>

<!-- Load the H:Dev+ connector + user.js on BOTH pages (adjust api host as needed). -->
<script src="https://api.hdevplus.com/_js/core/common.js"></script>
<script src="https://api.hdevplus.com/_js/core/user.js"></script>
  • form
    <form id="frm_sign_in"></form>

    The sign-in form. The id MUST be frm_sign_in (user.js finds the form by this id).

  • return_url
    <input type="hidden" id="return_url" name="return_url" value="/login/success.html">

    Where to go after a successful login.

  • fail_url
    <input type="hidden" id="fail_url" name="fail_url" value="https://your-domain.com/user/sign-in">

    Where to return on failure (usually the sign-in page).

  • oauth_redirect_uri
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://your-domain.com/user/oauth-callback">

    The callback page URL Google redirects back to. It must match the Authorized redirect URI in Google Cloud exactly (a mismatch causes the redirect_uri_mismatch error).

  • button
    <button type="button" class="h-btn-sign-in-google"></button>

    The Google sign-in button. With the h-btn-sign-in-google class, user.js starts the SIGN_IN (Google) flow on click and redirects to the Google auth page.

  • form
    <form id="frm_sign_in"></form>

    The form on the callback page. Host it at the registered oauth_redirect_uri; it needs no button — just the same id="frm_sign_in" and hidden fields as the sign-in form. When Google returns ?code and ?state, user.js auto-calls AUTH_USER to complete the login.

Response Result

  • On success, the member is found by their Google email or created on first login.
  • A login session is issued and the browser is redirected to <code>return_url</code>. Tenants without credentials return a <code>GOOGLE_NOT_CONFIGURED</code> error.

Example

<form id="frm_sign_in" class="col-md-7 col-xs-12 my-4 mx-2 mx-sm-4 mx-md-auto" method="post">
    <input type="hidden" id="return_url" name="return_url" value="https://domain.com">
    <input type="hidden" id="fail_url" name="fail_url" value="https://domain.com/user/sign-in">
    <input type="hidden" id="oauth_redirect_uri" name="oauth_redirect_uri" value="https://domain.com/user/oauth-callback">
    <div class="form-group mt-4">
        <button class="h-btn-sign-in-google btn btn-outline-dark border-hbnc-primary bg-hanbnc-primary-3 w-100 border border-3" type="button">Continue with Google</button>
    </div>
</form>

Related Links