---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: oauthButton
layout: subsection
wd_wcptag: oauthButton
---

<a id="section_N10021_N1001E_N10001"></a>
Displays a button that calls an external OAuth2 authentication provider to authenticate an app user. When an app user clicks the `oauthButton`, it invokes the external OAuth2 authentication provider defined in the SMD. The external OAuth2 provider takes care of prompting your app user to sign in with any required parameters, including any required authentication scope. Upon successful authentication, `oauthButton` navigates to the page specified in `redirectTaskReference`.

Use `oauthButton` on view and edit pages.

## <a id="section_ykv_mgd_h2b"></a>Prerequisites

-   Register your Extend app with the external authentication provider. The external OAuth2 authentication provider must use the standard OAuth2 authentication code flow. For Workday redirect URLs, see [Reference: Tenant Redirect URLs for External OAuth Providers](/wcp_docs/cpx1566499453357.html).
-   Register the external OAuth2 authentication provider on Workday credential store. See [Reference: OAuth2 Authorization Code](/wcp_docs/jzx1537909761291.html) for details about the required configuration.
-   Define the `OAUTH2` authentication type in the `authTypes` list in the Site Metadata (SMD) of your app. Reference the authentication type id on the `authId` attribute of the `oauthButton` tag. See [Reference: OAuth2 Authorization Code](/wcp_docs/jzx1537909761291.html) for details about the required configuration.


## <a id="section_pxr_d4d_h2b"></a>Example

This sample `oauthButton` authenticates with the LinkedIn OAuth2 authentication provider. If the LinkedIn authentication request is successful, the button navigates to the default <i>root</i> page. Otherwise, the button navigates to the <i>error</i> page.

```
{
"type": "oauthButton",
"buttonType": "AUXILIARY",
"redirectTaskReference": {
  "type": "taskReference",
  "taskId": "root"
},
"errorTaskReference": {
  "type": "taskReference",
  "taskId": "error"
},
"label": "Authenticate",
"authId": "linkedInOauth2Client"
}
```

The sample <i>linkedInOauth2Client</i> authId corresponds to this `OAUTH2` definition in the SMD:

```
{
"scheme": "OAUTH2",
"id": "linkedInOauth2Client",
"source": "CREDSTORE",
"referenceId": "linkedinApp_ycjtxv",
"providerType": "STANDARD_POST",
"useProxyServer": true
}
```

For an example of how to use the `oauthButton` with an external OAuth authentication provider, see [Developer Forum: How to use OAuth to call external web services](https://forum.developer.workday.com/t/the-extend-experience-s3-ep-7-how-to-use-oauth-to-call-external-web-services).

## <a id="section-mobile-support"></a>Mobile Support

Android, iOS

## <a id="section_qpw_1kc_ccb"></a>Attributes

-   <b>additionalAuthParameters</b>

    Data type: Map<String, Binding<String>>

    A map of key/value pairs for any custom authentication parameters required by the external OAuth2 authentication provider.

    Example:

    ```
    "additionalAuthParameters" : {
      "field1" : "foo",
      "field2" : <% bar %>,
    }
    ```

    The `oauthButton` sends the specified parameters as query parameters in the OAuth2 authentication URL. Example:

    ```
    https://www.myoauth2.com/authentication?foo=bar
    ```

-   <b>authId</b>

    Data type: string

    The ID for the authentication type, which is defined in the `authTypes` list in the Site Metadata (SMD) siteAuth list. The authId determines which OAuth type needs authentication in the flow.

-   <b>buttonType</b>

    Data type: string

    The display style of the button. Valid values:

    -   `PRIMARY` - Displays a button with high emphasis. This display style is typically for designating the primary action that moves the user forward in a process.
    -   `AUXILIARY` - (Default) Displays a button with medium emphasis. This display style is typically for:

        -   Secondary actions on a screen.
        -   Canceling a process.
        -   Taking an action that moves the user away from a process.

    -   `LINK` - Displays a link. This display style is for a page navigation option. Not supported in the Workday mobile app.

-   <b>errorTaskReference</b>

    Data type: taskReference

    Contains the reference to the task (or page) to navigate to when the external OAuth2 provider encounters an error. Example:

    ```
    "errorTaskReference": {
     "type": "taskReference",
     "taskId": "oauthError"
    },
    ```

-   <b>id</b>

    Data type: binding-String

    Unique identifier used to reference this widget from other tags.

    Notes:

    -   The `id` must start with a letter.
    -   The `id` must be unique per page.
    -   To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD.
    -   Workday recommends that you include the `id` in your tag definitions for debugging purposes.

-   <b>label</b>

    Data type: dynamicBinding-String

    The text that displays on `oauthButton`. If you do not set the label, the button doesn't display.

-   <b>redirectTaskReference</b>

    Data type: taskReference

    (Required) Contains the reference to the task or page to navigate to upon successful authentication. Specify a [taskReference](/wcp_docs/cgt1531499518059.html#) tag. Example:

    ```
    "redirectTaskReference": {
     "type": "taskReference",
     "taskId": "<% root %>"
    },
    ```

-   <b>render</b>

    Data type: binding-Boolean

    If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true.

    Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value.

-   <b>visible</b>

    Data type: dynamicBinding-Boolean

    If true, the widget generated by this tag is visible. If false, this tag and its children tags aren't visible. This tag provides the ability to display or hide the widget dynamically based on user interactions on the page. The default is true. Unlike the `render` attribute, the generated widget persists on the page even when `visible` is false.

    <b>Notes:</b>

    -   When the widget or field you’re hiding changes on the page, you must include it inside a `fieldSet`.
    -   When the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the `valueOutBinding` or `valuesOut` data of the widget in the payload. To include the `valueOutBinding` or `valuesOut` data in the payload, use the `onSend` event handler.