Start OAuth Authorization

import { useState } from 'react';
import { useSearchParams } from 'react-router';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const OAuthConsentStart = () => {
  const stytch = useStytchB2BClient();
  const [searchParams] = useSearchParams();
  const [consentData, setConsentData] = useState(null);

  const startAuthorization = async () => {
    const response = await stytch.idp.oauthAuthorizeStart({
      client_id: searchParams.get('client_id'),
      redirect_uri: searchParams.get('redirect_uri'),
      response_type: searchParams.get('response_type'),
      scopes: searchParams.get('scope')?.split(' ') || [],
      prompt: searchParams.get('prompt'),
    });
    setConsentData(response);
  };

  return (
    <div>
      <button onClick={startAuthorization}>Start Authorization</button>
      {consentData && (
        <div>
          <h3>{consentData.connected_app.client_name}</h3>
          <p>{consentData.connected_app.client_description}</p>
        </div>
      )}
    </div>
  );
};

import { useState } from 'react';
import { useSearchParams } from 'react-router';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const OAuthConsentStart = () => {
  const stytch = useStytchB2BClient();
  const [searchParams] = useSearchParams();
  const [consentData, setConsentData] = useState(null);

  const startAuthorization = async () => {
    const response = await stytch.idp.oauthAuthorizeStart({
      client_id: searchParams.get('client_id'),
      redirect_uri: searchParams.get('redirect_uri'),
      response_type: searchParams.get('response_type'),
      scopes: searchParams.get('scope')?.split(' ') || [],
      prompt: searchParams.get('prompt'),
    });
    setConsentData(response);
  };

  return (
    <div>
      <button onClick={startAuthorization}>Start Authorization</button>
      {consentData && (
        <div>
          <h3>{consentData.connected_app.client_name}</h3>
          <p>{consentData.connected_app.client_description}</p>
        </div>
      )}
    </div>
  );
};

import { useState } from 'react';
import { useSearchParams } from 'react-router';
import { useStytchB2BClient } from '@stytch/react/b2b';

export const OAuthConsentStart = () => {
  const stytch = useStytchB2BClient();
  const [searchParams] = useSearchParams();
  const [consentData, setConsentData] = useState(null);

  const startAuthorization = async () => {
    const response = await stytch.idp.oauthAuthorizeStart({
      client_id: searchParams.get('client_id'),
      redirect_uri: searchParams.get('redirect_uri'),
      response_type: searchParams.get('response_type'),
      scopes: searchParams.get('scope')?.split(' ') || [],
      prompt: searchParams.get('prompt'),
    });
    setConsentData(response);
  };

  return (
    <div>
      <button onClick={startAuthorization}>Start Authorization</button>
      {consentData && (
        <div>
          <h3>{consentData.connected_app.client_name}</h3>
          <p>{consentData.connected_app.client_description}</p>
        </div>
      )}
    </div>
  );
};

idp.oauthAuthorizeStart wraps the Start OAuth Authorization API endpoint. It initiates a request for authorization of a Connected App to access a account. Call this endpoint using the query parameters from an OAuth Authorization request. This endpoint validates various fields (scope, client_id, redirect_uri, prompt, etc…) are correct and returns relevant information for rendering an OAuth Consent Screen.

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

string[]

required

An array of scopes requested by the client.

prompt

string

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

Response

connected_app

object

Show properties

client_id

string

The ID of the Connected App client.

client_type

string

The type of Connected App. Supported values are first_party, first_party_public, third_party, and third_party_public.

client_name

string

A human-readable name for the client.

client_description

string

A human-readable description for the client.

client_logo_url

string

The logo URL of the Connected App, if any.

Whether the user must provide explicit consent for the authorization request.

scope_results

object[]

Show properties

scope

string

The name of the scope.

description

string

A human-readable description of the scope, taken from the RBAC Policy.

is_grantable

boolean

Indicates whether the scope can be granted. Users can only grant scopes if they have the required permissions.

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.

⌘I

​Parameters

​Response

Parameters

Response