LightningWeb.Components.Oauth (Lightning v2.13.5)

View Source

OAuth-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

missing_client_warning(assigns)

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 />

oauth_status(assigns)

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 to nil.
  • userinfo (:map) - Defaults to nil.
  • error (:any) - Defaults to nil.
  • scopes_changed (:boolean) - Defaults to false.
  • socket (:any) - Defaults to nil.

scopes_picklist(assigns)

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 to nil.
  • disabled (:boolean) - Defaults to false.