SocialLogin

block

A provider login or registration card with authentication feedback and optional password-form content.

In this static copy, provider sign-in requires the application server; the static examples show the login and registration cards. Run the full demo to try it.

Install

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

README Source

What it installs

Copies: templates/ → templates/
Recipes: card alert oauth-provider-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 (3)

Default

Light

Dark

Code

<div class="w-full max-w-sm">
    <twig:SocialLogin :providers="[
        {provider: 'google', href: '#'},
        {provider: 'facebook', href: '#'},
        {provider: 'github', href: '#'}
    ]" alternativeHref="#" />
</div>

Registration

Light

Dark

Code

<div class="w-full max-w-sm">
    <twig:SocialLogin mode="signup" :providers="[
        {provider: 'google', href: '#'},
        {provider: 'github', href: '#'}
    ]" alternativeHref="#" />
</div>

Password and provider sign in

Light

Dark

Code

<div class="w-full max-w-sm">
    <twig:SocialLogin :providers="[{provider: 'github', href: '#'}]" feedback="Sign-in was cancelled. Choose a provider to try again." feedbackVariant="warning">
        <p class="text-center text-sm text-body">Your application's email sign-in form appears here.</p>
    </twig:SocialLogin>
</div>