Required props are fundamental to the component’s operation. SsoProviderTable requires both navigation actions to handle the typical provider management workflow.
Prop
Type
Description
createAction
ComponentAction<void>
Required. Navigate to create provider.
editAction
ComponentAction<IdentityProvider>
Required. Navigate to edit provider.
createActionType:ComponentAction<void>The createAction prop is required because it controls where users are navigated to when they click “Add Provider”. Without this, the table wouldn’t know how to initiate the provider creation flow.Properties:
disabled - Disable the “Add Provider” button
onBefore() - Runs before the navigation occurs. Return false to prevent navigation (e.g., if the user lacks permissions).
onAfter() - Runs after onBefore succeeds. Use this to navigate to your create page or track analytics.
Example:
// Navigate to create pagecreateAction={{ onAfter: () => navigate("/providers/create"),}}// Check permissions before allowing createcreateAction={{ onBefore: () => { if (!hasPermission("create:providers")) { alert("You don't have permission to create providers"); return false; } return true; }, onAfter: () => navigate("/providers/create"),}}// Track analytics on create intentcreateAction={{ onAfter: () => { analytics.track("Create Provider Started"); navigate("/providers/create"); },}}
editActionType:ComponentAction<IdentityProvider>The editAction prop is required because it controls where users are navigated to when they click on a provider row. The callback receives the provider data so you can navigate to the correct edit page.Properties:
disabled - Disable row click navigation
onBefore(provider) - Runs before the navigation occurs. Return false to prevent navigation (e.g., for conditional access checks).
onAfter(provider) - Runs after onBefore succeeds. Use this to navigate to the edit page with the provider data.
Action props handle user interactions beyond the core navigation. These control deletion, removal, and enable/disable operations.
Prop
Type
Description
deleteAction
ComponentAction<IdentityProvider>
Delete provider permanently.
deleteFromOrganizationAction
ComponentAction<IdentityProvider>
Remove provider from organization.
enableProviderAction
ComponentAction<IdentityProvider>
Enable/disable provider toggle.
deleteActionType:ComponentAction<IdentityProvider>Controls permanent deletion of an SSO provider. This is destructive - the provider is deleted from your Auth0 tenant entirely.Properties:
disabled - Disable the delete option
onBefore(provider) - Runs before the deletion. Return false to prevent deletion (recommended for confirmation dialogs).
onAfter(provider) - Runs after the provider is successfully deleted. Use this to track the event or show a notification.
deleteFromOrganizationActionType:ComponentAction<IdentityProvider>Controls removing a provider from the organization without deleting it from the tenant. The provider remains available to be re-added later.Properties:
disabled - Disable the remove option
onBefore(provider) - Runs before the removal. Return false to prevent removal (e.g., to show a confirmation).
onAfter(provider) - Runs after the provider is successfully removed from the organization.
enableProviderActionType:ComponentAction<IdentityProvider>Controls the enable/disable toggle for providers. Disabled providers remain configured but users cannot authenticate through them.Properties:
disabled - Disable the toggle
onBefore(provider) - Runs before the toggle. Return false to prevent the state change.
onAfter(provider) - Runs after the provider is successfully enabled or disabled.
Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
Prop
Type
Description
schema
SsoProviderTableSchema
Confirmation field validation.
customMessages
Partial<SsoProviderTableMessages>
i18n text overrides.
styling
ComponentStyling<SsoProviderTableClasses>
CSS variables and class overrides.
schemaSet custom validation rules for confirmation dialogs (e.g., type provider name to confirm deletion).
Available Schema Fields
All schema fields support: regex, errorMessagedelete.providerName - Confirmation for permanent deletion
remove.providerName - Confirmation for removal from organization
<SsoProviderTable createAction={{ onAfter: () => navigate("/providers/create") }} editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }} schema={{ delete: { providerName: { regex: /^.+$/, errorMessage: "Please type the provider name to confirm", }, }, }}/>
customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.
The SsoProviderTable component is composed of smaller subcomponents and hooks. You can import them individually to build custom provider management workflows if you use shadcn.
For advanced use cases, you can import individual subcomponents to build custom provider management interfaces. This is useful when you need to embed the table in a different layout or customize row rendering.
Core props are fundamental to the component’s operation. SsoProviderTable requires both navigation actions to handle the typical provider management workflow.
Prop
Type
Description
createAction
ComponentAction<void>
Required. Navigate to create provider.
editAction
ComponentAction<IdentityProvider>
Required. Navigate to edit provider.
createActionType:ComponentAction<void>The createAction prop is required because it controls where users are navigated to when they click “Add Provider”. Without this, the table wouldn’t know how to initiate the provider creation flow.Properties:
disabled - Disable the “Add Provider” button
onBefore() - Runs before the navigation occurs. Return false to prevent navigation (e.g., if the user lacks permissions).
onAfter() - Runs after onBefore succeeds. Use this to navigate to your create page or track analytics.
Example:
// Navigate to create pagecreateAction={{ onAfter: () => router.push("/providers/create"),}}// Check permissions before allowing createcreateAction={{ onBefore: () => { if (!hasPermission("create:providers")) { alert("You don't have permission to create providers"); return false; } return true; }, onAfter: () => router.push("/providers/create"),}}// Track analytics on create intentcreateAction={{ onAfter: () => { analytics.track("Create Provider Started"); router.push("/providers/create"); },}}
editActionType:ComponentAction<IdentityProvider>The editAction prop is required because it controls where users are navigated to when they click on a provider row. The callback receives the provider data so you can navigate to the correct edit page.Properties:
disabled - Disable row click navigation
onBefore(provider) - Runs before the navigation occurs. Return false to prevent navigation (e.g., for conditional access checks).
onAfter(provider) - Runs after onBefore succeeds. Use this to navigate to the edit page with the provider data.
Action props handle user interactions beyond the core navigation. These control deletion, removal, and enable/disable operations.
Prop
Type
Description
deleteAction
ComponentAction<IdentityProvider>
Delete provider permanently.
deleteFromOrganizationAction
ComponentAction<IdentityProvider>
Remove provider from organization.
enableProviderAction
ComponentAction<IdentityProvider>
Enable/disable provider toggle.
deleteActionType:ComponentAction<IdentityProvider>Controls permanent deletion of an SSO provider. This is destructive - the provider is deleted from your Auth0 tenant entirely.Properties:
disabled - Disable the delete option
onBefore(provider) - Runs before the deletion. Return false to prevent deletion (recommended for confirmation dialogs).
onAfter(provider) - Runs after the provider is successfully deleted. Use this to track the event or show a notification.
deleteFromOrganizationActionType:ComponentAction<IdentityProvider>Controls removing a provider from the organization without deleting it from the tenant. The provider remains available to be re-added later.Properties:
disabled - Disable the remove option
onBefore(provider) - Runs before the removal. Return false to prevent removal (e.g., to show a confirmation).
onAfter(provider) - Runs after the provider is successfully removed from the organization.
enableProviderActionType:ComponentAction<IdentityProvider>Controls the enable/disable toggle for providers. Disabled providers remain configured but users cannot authenticate through them.Properties:
disabled - Disable the toggle
onBefore(provider) - Runs before the toggle. Return false to prevent the state change.
onAfter(provider) - Runs after the provider is successfully enabled or disabled.
Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
Prop
Type
Description
schema
SsoProviderTableSchema
Confirmation field validation.
customMessages
Partial<SsoProviderTableMessages>
i18n text overrides.
styling
ComponentStyling<SsoProviderTableClasses>
CSS variables and class overrides.
schemaSet custom validation rules for confirmation dialogs (e.g., type provider name to confirm deletion).
Available Schema Fields
All schema fields support: regex, errorMessagedelete.providerName - Confirmation for permanent deletion
remove.providerName - Confirmation for removal from organization
<SsoProviderTable createAction={{ onAfter: () => router.push("/providers/create") }} editAction={{ onAfter: (p) => router.push(`/providers/${p.id}`) }} schema={{ delete: { providerName: { regex: /^.+$/, errorMessage: "Please type the provider name to confirm", }, }, }}/>
customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.
The SsoProviderTable component is composed of smaller subcomponents and hooks. You can import them individually to build custom provider management workflows.
For advanced use cases, you can import individual subcomponents to build custom provider management interfaces. This is useful when you need to embed the table in a different layout or customize row rendering.
Core props are fundamental to the component’s operation. SsoProviderTable requires both navigation actions to handle the typical provider management workflow.
Prop
Type
Description
createAction
ComponentAction<void>
Required. Navigate to create provider.
editAction
ComponentAction<IdentityProvider>
Required. Navigate to edit provider.
createActionType:ComponentAction<void>The createAction prop is required because it controls where users are navigated to when they click “Add Provider”. Without this, the table wouldn’t know how to initiate the provider creation flow.Properties:
disabled - Disable the “Add Provider” button
onBefore() - Runs before the navigation occurs. Return false to prevent navigation (e.g., if the user lacks permissions).
onAfter() - Runs after onBefore succeeds. Use this to navigate to your create page or track analytics.
Example:
// Navigate to create pagecreateAction={{ onAfter: () => navigate("/providers/create"),}}// Check permissions before allowing createcreateAction={{ onBefore: () => { if (!hasPermission("create:providers")) { alert("You don't have permission to create providers"); return false; } return true; }, onAfter: () => navigate("/providers/create"),}}// Track analytics on create intentcreateAction={{ onAfter: () => { analytics.track("Create Provider Started"); navigate("/providers/create"); },}}
editActionType:ComponentAction<IdentityProvider>The editAction prop is required because it controls where users are navigated to when they click on a provider row. The callback receives the provider data so you can navigate to the correct edit page.Properties:
disabled - Disable row click navigation
onBefore(provider) - Runs before the navigation occurs. Return false to prevent navigation (e.g., for conditional access checks).
onAfter(provider) - Runs after onBefore succeeds. Use this to navigate to the edit page with the provider data.
Action props handle user interactions beyond the core navigation. These control deletion, removal, and enable/disable operations.
Prop
Type
Description
deleteAction
ComponentAction<IdentityProvider>
Delete provider permanently.
deleteFromOrganizationAction
ComponentAction<IdentityProvider>
Remove provider from organization.
enableProviderAction
ComponentAction<IdentityProvider>
Enable/disable provider toggle.
deleteActionType:ComponentAction<IdentityProvider>Controls permanent deletion of an SSO provider. This is destructive - the provider is deleted from your Auth0 tenant entirely.Properties:
disabled - Disable the delete option
onBefore(provider) - Runs before the deletion. Return false to prevent deletion (recommended for confirmation dialogs).
onAfter(provider) - Runs after the provider is successfully deleted. Use this to track the event or show a notification.
deleteFromOrganizationActionType:ComponentAction<IdentityProvider>Controls removing a provider from the organization without deleting it from the tenant. The provider remains available to be re-added later.Properties:
disabled - Disable the remove option
onBefore(provider) - Runs before the removal. Return false to prevent removal (e.g., to show a confirmation).
onAfter(provider) - Runs after the provider is successfully removed from the organization.
enableProviderActionType:ComponentAction<IdentityProvider>Controls the enable/disable toggle for providers. Disabled providers remain configured but users cannot authenticate through them.Properties:
disabled - Disable the toggle
onBefore(provider) - Runs before the toggle. Return false to prevent the state change.
onAfter(provider) - Runs after the provider is successfully enabled or disabled.
Customization props let you adapt the component to your brand, locale, and validation requirements without modifying source code.
Prop
Type
Description
schema
SsoProviderTableSchema
Confirmation field validation.
customMessages
Partial<SsoProviderTableMessages>
i18n text overrides.
styling
ComponentStyling<SsoProviderTableClasses>
CSS variables and class overrides.
schemaSet custom validation rules for confirmation dialogs (e.g., type provider name to confirm deletion).
Available Schema Fields
All schema fields support: regex, errorMessagedelete.providerName - Confirmation for permanent deletion
remove.providerName - Confirmation for removal from organization
<SsoProviderTable createAction={{ onAfter: () => navigate("/providers/create") }} editAction={{ onAfter: (p) => navigate(`/providers/${p.id}`) }} schema={{ delete: { providerName: { regex: /^.+$/, errorMessage: "Please type the provider name to confirm", }, }, }}/>
customMessagesCustomize all text and translations. All fields are optional and use defaults if not provided.
The SsoProviderTable component is composed of smaller subcomponents and hooks. You can import them individually to build custom provider management workflows if you use shadcn.
For advanced use cases, you can import individual subcomponents to build custom provider management interfaces. This is useful when you need to embed the table in a different layout or customize row rendering.
