ConnectedAccounts

block

An account settings card with connection forms, identity summaries and explicit unavailable-action feedback.

In this static copy, connecting and disconnecting accounts requires authenticated server requests; the static examples use disabled actions. Run the full demo to try it.

Install

php bin/console ux:install connected-accounts \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Recipes: card alert button
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (2)

Default

Light

Dark

Code

<div class="w-full max-w-xl">
    <twig:ConnectedAccounts returnTo="/account/connections" :accounts="[
        {
            provider: 'google', connected: true, identity: 'alex@example.com', subject: 'demo-google',
            disconnectAction: '#', disconnectToken: 'preview-only'
        },
        {provider: 'facebook', connected: false, connectAction: '#', connectToken: 'preview-only'},
        {provider: 'github', connected: true, identity: 'alex-code', cannotRemove: true}
    ]" />
</div>

Keep a usable sign in method

Light

Dark

Code

<div class="w-full max-w-xl">
    <twig:ConnectedAccounts idPrefix="last-sign-in" :accounts="[
        {
            provider: 'github', connected: true, identity: 'alex-code',
            cannotRemove: true,
            cannotRemoveReason: 'Add another sign-in method before disconnecting GitHub.'
        }
    ]" />
</div>