Skip to content
English - United States
  • There are no suggestions because the search field is empty.

 How to set up an OAuth 2 sign-in integration

Add a "Sign in with…" button to your login screen so members can access your app using an account they already have with another service.

How to set up an OAuth 2 sign-in integration

Add a "Sign in with…" button to your login screen so members can access your app using an account they already have with another service.

Preview

Members tap your button and sign in on the service's own login page, so your app never sees their password. The service asks them to approve the information your app requests, and an account is created automatically in your app the first time they use the button.

Overview

An OAuth 2 sign-in integration adds a "Sign in with…" button for an external service beyond the Apple, Google, Facebook, and X options that are already built in. It is useful when your members already have accounts with a service you work with, such as a member portal, fitness platform, learning system, or online community.

You can add multiple integrations. Each integration becomes its own button that you can style, reorder, disable, or remove without affecting the others.

Requirements

OAuth 2 sign-in integrations are only available on select plans. If you do not see this option in your Control Panel, contact your account administrator.

You need administrator access to your app's Control Panel, an account with the service you want to connect to, and permission to create an application in that service's developer or integrations area.

Before you begin, create an application in the service's developer settings and collect the following information:

  • Client ID and Client Secret

  • Authorize URL, Token URL, and User Info URL

  • Scopes required to access the member information you need

  • Response Type supported by the service, preferably Code

You will also need to copy the Redirect URL from the Control Panel and add it to the application's settings on the service's side.

How to set up an OAuth 2 sign-in integration

  1. Log in, go to User Access, then select Login Screen from the left-side menu.

  2. Click the Settings tab.

  3. Scroll to Sign In Integrations and click Add Sign In Integration.

  4. Select OAuth 2 Sign In Integration. A dialog opens with three sections: Design, Configurations and Advanced.

  5. Click the Design tab and configure the appearance of the sign-in button.

    1. Enter the Sign In Button Text, such as "Sign in with Acme".

    2. Enter the Register Button Text, such as "Register with Acme".

    3. Choose the button background or gradient and text color

    4. Choose a button icon or upload the service's logo from the media library. A 24 x 24 px icon works best

  6. Click the Configurations tab and enter an Integration Name of up to 50 characters.

    1. Choose the name carefully because it cannot be changed later

    2. Members who sign in through the integration are permanently linked to it. Deleting the integration and creating a new one with a different name disconnects members who previously signed in through it

    3. Enter an optional Description for your own reference

  7. Enter the Authorize URL, Token URL, and User Info URL provided by the service.

    1. Select the User Info Request Method specified in the service's documentation: GET or POST. GET is the usual option

    2. Enter a User Info Request Body only if the service requires one. This field appears when POST is selected and can be left empty if no request body is required

  8. Click the copy button beside the Redirect URL field, then paste the address into your application's settings on the service's side where it asks for a redirect or callback URL.

  9. Paste the URL exactly as copied

  10. Do not add or remove a slash at the end of the URL

  11. Sign-in will not work until the service recognizes the Redirect URL

  12. Enter the Client ID, Client Secret, and Scopes provided by the service.

  13. Select the Response Type supported by the service: Code or Token. Select Code if the service supports it.

  14. If you selected Code and the PKCE fields appear, configure the Code Challenge Algorithm and Code Verifier according to the service's documentation.

    1. If the service supports PKCE, set the Code Challenge Algorithm to SHA-256 and leave the Code Verifier blank

    2. If the service does not support PKCE, or you are unsure, leave the Code Challenge Algorithm set to None

  15. Click the Advanced tab and check the User Info Object Keys against the sample response in the service's documentation.

    1. Id (sub/unique): The default value is sub

    2. Email: The default value is email

    3. First Name: The default value is given_name

    4. Last Name: The default value is family_name

    5. Display Name: The default value is name

    6. Replace any default value that does not match the field name returned by the service. For example, use user_id instead of sub if that is what the service returns

    7. Make sure the Id (sub/unique) mapping is correct. Sign-in fails without a valid user ID, while incorrect mappings for the other fields only affect how complete the member's profile appears

  16. Click Save. The integration appears in the Sign In Integrations list.

  17. Manage the integration from the Sign In Integrations list when needed.

    1. Drag the handle to change the order of the sign-in button

    2. Click the pencil to edit the integration. Everything except the Integration Name can be changed

    3. Click the toggle to disable the button without deleting the integration

    4. Click the X to remove the integration entirely

  18. Test the integration by opening the emulator, tapping the new button, and signing in with a real account from the connected service.

Pro tips

  • You do not need to update the app after adding the integration. Saving the integration takes effect immediately, including for members who already have the app installed

  • Match the button's color and logo to the connected service so members can identify it easily

  • If you offer several sign-in options, place the option most members will use at the top of the list

  • Disable an integration if you need to take a provider offline temporarily. Deleting the integration disconnects member accounts, while disabling it does not

  • Keep the Client Secret private and treat it like a password

  • Button shape is shared by all sign-in buttons and is configured on the Design tab of the Login Screen

  • The emulator provides a live preview while you work in the Control Panel. Changes appear in the emulator immediately but are not visible to members until you save them

Troubleshooting tips

  • If OAuth 2 Sign In Integration is not available from Add Sign In Integration, your plan may not include this feature

  • If saving fails because the integration name already exists, choose a different Integration Name. Each integration name must be unique within your app

  • If members see an error on the service's page before they can log in, check the Redirect URL. Re-copy the URL and paste it into the service exactly as it appears in the Control Panel

  • If you see an error about a missing "state," check the service's documentation for its requirements for the state value or contact the service's support team

  • If sign-in fails because of a missing user ID, check the Id (sub/unique) mapping in Advanced against the sample response provided by the service

  • If sign-in fails immediately after the member approves access and you configured PKCE, set the Code Challenge Algorithm back to None and check whether the service supports PKCE

  • If you see a permissions error, check whether the configured Scopes are sufficient to access the member's profile or email

  • If members can sign in but their names are blank, check the field mappings in Advanced

  • If the button does not appear in the app, confirm that the integration is enabled in the Sign In Integrations list