Initiates 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. This endpoint validates various fields (scope, client_id, redirect_uri, prompt, etc...) are correct and returns relevant information for rendering an OAuth Consent Screen.
The ID of the Connected App client.
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.
The OAuth 2.0 response type. For authorization code flows this value is code.
An array of scopes requested by the client.
Space separated list that specifies how the Authorization Server should prompt the user for reauthentication and consent. Only consent is supported today.
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.
The Connected App affected by this operation. Only a subset of fields safe for public viewing are returned.
The ID of the Connected App client.
A human-readable name for the client.
A human-readable description for the client.
The type of Connected App. Supported values are first_party, first_party_public, third_party, and third_party_public.
The logo URL of the Connected App, if any.
Whether the user must provide explicit consent for the authorization request.
Details about each requested scope.
The name of the scope.
A human-readable description of the scope, taken from the RBAC Policy.
Indicates whether the scope can be granted. Users can only grant scopes if they have the required permissions.
import React, { useState } from 'react';
import { useStytchB2BClient } from '@stytch/react/b2b';
export const OAuthAuthorizeStart = () => {
const stytch = useStytchB2BClient();
const [loading, setLoading] = useState(false);
const [result] = useState(null);
const startOAuthAuthorization = async () => {
setLoading(true);
try {
await stytch.idp.oauthAuthorizeStart({
client_id: 'connected-app-test-d731954d-dab3-4a2b-bdee-07f3ad1be888',
redirect_uri: 'https://example.com/callback',
response_type: 'code',
scopes: ['openid', 'profile', 'email'],
prompt: 'consent',
});
} catch (error) {
console.error('Error starting OAuth authorization:', error);
} finally {
setLoading(false);
}
};
return (
<div>
<button onClick={startOAuthAuthorization} disabled={loading}>
{loading ? 'Starting Authorization...' : 'Start OAuth Authorization'}
</button>
{result && (
<div>
<h3>Authorization Result:</h3>
<pre>{JSON.stringify(result, null, 2)}</pre>
</div>
)}
</div>
);
};{
"request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
"member_id": "member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
"member": {
"member_id": "member-test-32fc5024-9c09-4da3-bd2e-c9ce4da9375f",
"email_address": "sandbox@stytch.com",
"status": "active",
"name": "Sandbox Member",
"created_at": "2023-06-01T12:00:00Z",
"updated_at": "2023-06-01T12:00:00Z"
},
"organization": {
"organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
"organization_name": "Sandbox Organization",
"organization_slug": "sandbox-org",
"organization_logo_url": "https://example.com/logo.png",
"created_at": "2023-06-01T12:00:00Z",
"updated_at": "2023-06-01T12:00:00Z"
},
"connected_app": {
"client_id": "example-connected-app-client-id",
"client_name": "Example Connected App",
"client_description": "An example connected app for testing",
"client_logo_url": "https://example.com/app-logo.png",
"client_website_url": "https://example.com",
"client_terms_of_service_url": "https://example.com/terms",
"client_privacy_policy_url": "https://example.com/privacy"
},
"consent_required": true,
"connected_app_scope_results": [
{
"scope": "openid",
"description": "Request basic profile information",
"is_grantable": true
},
{
"scope": "profile",
"description": "Request basic profile information",
"is_grantable": true
},
{
"scope": "email",
"description": "Request email address",
"is_grantable": true
},
{
"scope": "read:data",
"description": "Read organization data",
"is_grantable": true
}
]
}