OAuth Consent Login Block for React

All of it. The four permissions, the account and the addresses are typed; Allow waits a moment and shows what was granted, Deny shows that nothing was shared, and no request is made. In a product this is the page your authorization endpoint renders for a valid request: show the client's registered name, check its redirect address against the registered one, and on Allow issue a code that carries only the scopes that were ticked, then send the person back to the redirect address with it. On Deny, send them back with error=access_denied.

Required ones are what the app can't work without, so they are ticked and locked and each row says Required with a lock; asking for them is the whole request. Optional ones are extras the person can decline and the app must still work without. Unticking one changes the count on the button ("Allow 2 of 4"), the scope list and the return address, and a polite message says what changed.

They are the names the app would send and your server would store, such as events.create. Most people never open the disclosure, but developers and administrators do, and it lists each scope as Allowed or Not allowed with the return address beside it, so what the button counts and what would be sent can be compared.

Name the app and the account in plain words, never let the app supply its own description unchecked, show the registered redirect address, and keep Deny as easy to reach as Allow. This page puts the account and a "Not you?" link above the permissions, so someone on the wrong account can leave before granting anything. Third-party tiles here are neutral lettermarks; use the app's registered logo only after you have verified it.

A disabled control can't explain itself and keyboard users can't reach it. The locked permissions are real checkboxes that are ticked and unavailable, with the reason (Required) in text beside them, and both buttons stay available. Deny never waits behind a form or a delay.

Nothing is hidden: the pair, the heading, the account line, the four rows and both buttons stack in one column, with Allow on the first screen. The page is start-aligned, not centered, so opening Scope details only grows it downward, and in an RTL page the arrow between the tiles mirrors while the scope strings and addresses keep their own direction.