SocialAuth

Google and Apple sign-in buttons. onSelect gets the provider id; wire your OAuth flow there.

Import

Vue

import { UiSocialAuth } from '@ziyarago/ui/vue'

Vue

<UiSocialAuth variant="stack" />

Vue

<UiSocialAuth variant="icons" />

Vue

<UiSocialAuth variant="stack" :divider="false" :providers="['google']" />

Continue with Google and Apple buttons with an "or" divider. Place it under the sign-in form.

PropType and valuesDefaultDescription

providers('google' | 'apple')[]'['google', 'apple']'Which buttons to show, in order.

variantstackicons'stack''stack': full-width buttons with a label, one per row. 'icons': a row of square icon buttons.

dividerboolean'true'Show the "or" line above the buttons.

labels{ google?: string; apple?: string }—Provider names inserted into "Continue with {provider}".

onSelect(provider: 'google' | 'apple') => void—Called with the clicked provider. Start your OAuth flow here.

sizexssmmdlgxl'md'Scales padding, text and avatars.

Vue: @name. React: onName.

selectA provider button was clicked; payload is "google" or "apple".