Sign In with Google

Learn how to configure the "Sign in with Google" feature in the Social Login add-on.

Olga Tereshina avatar
Written by Olga Tereshina
Updated over a week ago

The Google Login feature set-up in an X-Cart store consists of the following steps:

Creating OAuth2 Client ID

To create an OAuth2 client ID for your store:

  1. Go to the Google Developers Console and create a new project there, using one of the following ways.

    • use the CREATE PROJECT button on the Dashboard (if there are no other projects):

    • open the list of the current projects and use the NEW PROJECT button there:

  2. On the New Project page that opens, either enter a project name or accept the default one, then select Create.


    The project ID is an identifier that automatically assigns when you create a project, and it is used only within the Developers Console. A project ID is unique and can be changed only at the moment of project creation, so choose an ID that you’ll be comfortable using for the project's lifetime.

    After you have clicked Create, the Developer Console will create the new project. Make sure to select the newly created project in the project list drop-down at the top of the page:

  3. In the sidebar on the left, locate API and services > OAuth Consent Screen. Select External user type and click Create.

  4. On the Edit app registration page, follow the steps to complete app registration:

    • OAuth consent screen

      • Use the settings on this page to configure the consent screen for your project (That is what users see when they click a Google Login widget on your store site for the first time and see a request to allow your store to access their information on Google).

        • App name: Specify your company name here.

        • User support email: Choose an email from the list. This email address will display to users on the authorization screen. You can use your email address or a Google Group email address that you manage.

        • Application logo (Optional): Add a company logo, if applicable.

        • Application home page (Optional): Specify your store homepage here.

        • Application Privacy Policy link (Optional): Specify a link to your store’s privacy policy page, if applicable.

        • Application Terms of Service link (Optional): Specify a link to your store’s Terms and Conditions page, if applicable.

        • Authorized domains: Click the ADD DOMAIN button to specify the URL.

        • Developer contact information: Specify the contact email on your choice.

      • Click SAVE AND CONTiNUE to access the next step.

    • Scopes
      Configure scopes your app might need to request to access Google APIs, depending on the level of access needed. Many scopes overlap, so it's best to use a scope that isn't sensitive. For information about each method's scope requirements, see the individual API documentation.

      • Click the ADD OR REMOVE SCOPES button to access the list of available scopes.

      • Selet the scopes in the popup and click Update.

      • Click SAVE AND CONTINUE to access the next step.

    • Test users
      Use this step to add users with access to the app while publishing status is set to 'Testing.' Click ADD USERS, then SAVE AND CONTINUE.

    • Summary

      Use this page to check the app configuration settings.

  5. In the sidebar on the left, locate Credentials and select OAuth client Id in the Create credentials dropdown:

    You will see a screen titled Create OAuth Client ID:

  6. On the Create OAuth Client ID screen:

    • Select Web application for the Application type.

    • In the Authorized JavaScript origins section, enter the HTTP origins that host your web application. This value can't contain wildcards or paths. If you use a port other than 80, you must specify it. For example: https://example.com:8080

    • In the Authorized redirect URIs section, enter the redirect URI for your store site (Copy and paste the URI from the Google Login setup instructions on your store’s Social Login add-on settings page).

    • Click Create.


    The Client ID will be created.

  7. You need to copy-paste the Client ID and Secret values to the Social Login add-on configuration screen.

Configuring the Social Login Add-on: Google

  1. On the Credentials page of your project in the Google Developers Console, locate the needed credentials and click on the pencil icon to open the screen with the Client ID and Client Secret values:

  2. Open a separate browser tab or window for the X-Cart Admin interface so you can copy and paste the Client ID and Client secret values.

  3. Locate the entry for the Social Login add-on on the My Apps page of your store's Admin area (Apps -> My Apps) and click the Settings link below it:

    The Social Login add-on settings page will open.

    540-settings-page.png

  4. Scroll down to the Google section of the page and enter your Client ID and Client secret values:

    540-settings-page-google.png

  5. Click the Submit button near the bottom of the page to save the changes.

    The Google Login feature should now be enabled.

    google-sign-in-cus.png

Related pages:

Did this answer your question?