LightningWeb.Components.Oauth (Lightning v2.13.5)
View SourceOAuth-related UI components for Lightning credentials.
This module provides components for OAuth authentication flows, including scope selection, user information display, and error handling with structured error messages based on validation results.
Summary
Functions
Displays a warning alert when the OAuth client configuration is missing.
Renders the OAuth authentication status and flow UI.
Renders a scope selection interface for OAuth permissions.
Functions
Displays a warning alert when the OAuth client configuration is missing.
This component shows an error message when the OAuth client associated with a credential cannot be found, typically due to misconfiguration or deletion.
Examples
<.missing_client_warning />
Renders the OAuth authentication status and flow UI.
This component manages the complete OAuth authentication flow, displaying different UI states based on the authentication progress. It handles initial authorization, loading states, success states with user information, and various error conditions.
Attributes
:state
- Current authentication state (:idle
,:authenticating
,:fetching_userinfo
,:complete
,:error
):provider
- OAuth provider name (e.g., "Google", "GitHub"):myself
- Phoenix LiveView socket reference for event handling:authorize_url
- OAuth authorization URL (required when state is:idle
or:error
):userinfo
- User information map from OAuth provider (required when state is:complete
):error
- Error information (required when state is:error
):scopes_changed
- Boolean indicating if selected scopes have changed since last authorization
States
:idle
- Initial state, shows authorize button:authenticating
- OAuth flow in progress:fetching_userinfo
- Retrieving user details from provider:complete
- Successfully authenticated:error
- Authentication failed
Examples
<.oauth_status
state={:complete}
provider="Google"
myself={@myself}
userinfo={%{"name" => "John Doe", "email" => "john@example.com"}}
scopes_changed={false}
/>
<.oauth_status
state={:error}
provider="GitHub"
myself={@myself}
authorize_url="https://github.com/login/oauth/authorize?..."
error={:invalid_token}
scopes_changed={false}
/>
Attributes
state
(:atom
) (required)provider
(:string
) (required)myself
(:any
) (required)authorize_url
(:string
) - Defaults tonil
.userinfo
(:map
) - Defaults tonil
.error
(:any
) - Defaults tonil
.scopes_changed
(:boolean
) - Defaults tofalse
.socket
(:any
) - Defaults tonil
.
Renders a scope selection interface for OAuth permissions.
This component displays a list of OAuth scopes as checkboxes, allowing users to select which permissions they want to grant. Mandatory scopes are automatically checked and disabled to prevent deselection.
Attributes
:id
- Unique identifier for the component:on_change
- Event handler for scope selection changes:target
- Phoenix LiveView target for events:selected_scopes
- List of currently selected scope strings:mandatory_scopes
- List of required scope strings that cannot be deselected:scopes
- Complete list of available scope strings:provider
- OAuth provider name (e.g., "Google", "GitHub"):doc_url
- Optional URL to provider's scope documentation:disabled
- Whether all checkboxes should be disabled
Examples
<.scopes_picklist
id="google-scopes"
on_change="scope_changed"
target={@myself}
selected_scopes={["read", "write"]}
mandatory_scopes={["read"]}
scopes={["read", "write", "admin"]}
provider="Google"
doc_url="https://developers.google.com/identity/protocols/oauth2/scopes"
disabled={false}
/>
Attributes
id
(:string
) (required)on_change
(:any
) (required)target
(:any
) (required)selected_scopes
(:list
) (required)mandatory_scopes
(:list
) (required)scopes
(:list
) (required)provider
(:string
) (required)doc_url
(:string
) - Defaults tonil
.disabled
(:boolean
) - Defaults tofalse
.