Skip to main content

OAuth2

The oauth2 component is used to authenticate with an OAuth 2.0 server. The component sends the user to the authorization server to authenticate and receive an access token. The access token is used to authenticate the user with the application. The component can be used to authenticate with any OAuth 2.0 server.

Token must be stored in the application state to be used in the application. The onToken event is used to store the token in the application state.

Usage​

components:
  - name: "oauth2"
    description: "oAuth2"
    props:
      label:
        en-US: "Authenticating with OAuth 2.0"
      clientId: "client-id"
      clientSecret: "client-secret"
      authorizationUrl: "https://example.com/oauth2/authorize"
      tokenUrl: "https://example.com/oauth2/token" 
      scopes:
        - "read"
        - "write"
      additionalParams: # additional parameters to be sent to the authorization server
        app_name: "myapp"
      additionalHeaders: # additional headers to be sent to the authorization server
        app_name: "myapp"
      onToken:
        setData:
          token: "{{ token }}"

Redirect Url​

The redirect URL of the application must be set to the URL of the application with the path /oauth2/callback. For example, if the application is running on http://tms.example.com, the redirect URL must be set to http://tms.example.com/oauth2/callback.

The non-localized callback route preserves the OAuth query string and redirects to the current preferred locale route (/{locale}/oauth2/callback) before exchanging the authorization code. This keeps OAuth providers configured with the stable /oauth2/callback URL while letting the callback page render inside the localized app shell.

Add this URL to the list of redirect URLs in the application settings of the authorization server.

Props​

  • label : The label of the component.
  • clientId : The client id of the application.
  • clientSecret : The client secret of the application.
  • authorizationUrl : The URL of the authorization server.
  • tokenUrl : The URL of the token server.
  • scopes : The scopes of the application.
  • additionalParams : Additional parameters to be sent to the authorization server.
  • additionalHeaders : Additional headers to be sent to the authorization
  • oauthWorkflowId : Optional workflow ID used to exchange the authorization code server-side. The callback passes organizationId, credentials, tokenUrl, and headers into executeWorkflow.
  • onToken : The event to be triggered when the token is received. The response of the token server is stored in the token variable.
note

The callback stores the active organizationId with the OAuth session before opening the popup. This is required because the popup starts with a fresh Redux store; workflow-backed token exchange must receive organizationId inside the ExecuteWorkflowInput.