> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Submit OAuth Authorization

> Submit OAuth Authorization using the Stytch Next.js SDK

Completes a request for authorization of a Connected App to access a Member's account.

Call this endpoint using the query parameters from an OAuth Authorization request, after previously validating those parameters using the Preflight Check API.

Note that this endpoint takes in a few additional parameters the preflight check does not - `state`, `nonce`, and `code_challenge`.

> [!NOTE]
>
> We recommend configuring a [Custom Domain](https://stytch.com/docs/connected-apps/resources/custom-domains.md) whenever possible. This ensures the issuer on authorization responses matches the advertised issuer.

If the authorization was successful, the `redirect_uri` will contain a valid `authorization_code` embedded as a query parameter.

If the authorization was unsuccessful, the `redirect_uri` will contain an OAuth2.1 `error_code`. In both cases, redirect the Member to the location for the response to be consumed by the Connected App.

Exactly one of the following must be provided to identify the User/Member granting authorization:

* `user_id` (for Consumer) or `organization_id` + `member_id` (for B2B)
* `session_token`
* `session_jwt`

If a `session_token` or `session_jwt` is passed, the OAuth Authorization will be linked to the User's/Member's session for tracking purposes. One of these fields **must** be used if the Connected App intends to complete the Exchange Access Token flow.

## Parameters

**client\_id** `string` *required*

The ID of the Connected App client.

**redirect\_uri** `string` *required*

The callback URI used to redirect the user after authentication. This is the same URI provided at the start of the OAuth flow. This field is required when using the authorization\_code grant.

**response\_type** `string` *required*

The OAuth 2.0 response type. For authorization code flows this value is code.

**scopes** `array[strings]` *required*

An array of scopes requested by the client.

**consent\_granted** `boolean` *required*

Indicates whether the user granted the requested scopes.

**code\_challenge** `string`

A base64url encoded challenge derived from the code verifier for PKCE flows.

**nonce** `string`

A string used to associate a client session with an ID token to mitigate replay attacks.

**prompt** `string`

Space separated list that specifies how the Authorization Server should prompt the user for reauthentication and consent. Only consent is supported today.

**state** `string`

An opaque value used to maintain state between the request and callback.

## Response

**redirect\_uri** `string`

The callback URI used to redirect the user after authentication. This is the same URI provided at the start of the OAuth flow. This field is required when using the authorization\_code grant.

**authorization\_code** `string`

A one-time use code that can be exchanged for tokens.

**request\_id** `string`

Globally unique UUID that is returned with every API call. This value is important to log for debugging purposes; we
may ask for this value to help identify a specific API call when helping you debug an issue.

**status\_code** `number`

The HTTP status code of the response. Stytch follows standard HTTP response status code patterns, e.g. 2XX values
equate to success, 3XX values are redirects, 4XX are client errors, and 5XX are server errors.

```jsx theme={null}
import { useState } from 'react';
import { useStytch } from '@stytch/nextjs';

export const OAuthAuthorizeSubmit = () => {
  const stytch = useStytch();
  const [loading, setLoading] = useState(false);
  const [result] = useState(null);

  const submitOAuthAuthorization = async () => {
    setLoading(true);
    try {
      const response = await stytch.idp.oauthAuthorizeSubmit({
        client_id: '${exampleConnectedAppClientID}',
        redirect_uri: 'https://example.com/callback',
        response_type: 'code',
        scopes: ['openid', 'profile', 'email'],
        prompt: 'consent',
        state: 'example-state',
        nonce: 'example-nonce',
        code_challenge: 'example-code-challenge',
        consent_granted: true,
      });

      // Redirect to the returned redirect URI
      if (response.redirect_uri) {
        window.location.href = response.redirect_uri;
      }
    } catch (error) {
      console.error('Error submitting OAuth authorization:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={submitOAuthAuthorization} disabled={loading}>
        {loading ? 'Submitting Authorization...' : 'Submit OAuth Authorization'}
      </button>
      {result && (
        <div>
          <h3>Authorization Result:</h3>
          <pre>{JSON.stringify(result, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};
```

```json 200 theme={null}
{
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "connected_app_redirect_uri": "https://example.com/callback?authorization_code=example-authorization-code&state=example-state",
    "authorization_code": "example-authorization-code"
  }
```