Auth UI Primitive Auth UI with Social Providers and Native Form.
Preview Code Create your account to continue to NuxtLego
undefined
< script setup lang = "ts" >
function handleSelectProvider ( provider : string ) {
// return the selected provider
}
function handleSubmit ( payload : { [ key : string ] : any }) {
// in this case payload will return { email: string, password: string }
}
</ script >
< template >
< LegoAuth
class = "max-w-96 w-full bg-white border rounded-2xl px-8 py-10 shadow-sm"
:hide-provider-label = "true"
:providers = "['twitter', 'google', 'facebook']"
>
< LegoAuthHeader >
< template # logo >
< img src = "/logo.svg" alt = "NuxtLego" class = "w-10" >
</ template >
< h2 class = "mt-4 font-semibold text-xl" >
Create your account
</ h2 >
< p class = "text-gray-400 text-sm mt-1" >
to continue to NuxtLego
</ p >
</ LegoAuthHeader >
< div class = "flex space-x-2 w-full mt-8" >
< LegoAuthSocialProviders
class = "w-full px-4 py-3 border bg-white hover:bg-gray-50 transition rounded-lg text-xl flex justify-center"
@select = "handleSelectProvider"
/>
</ div >
< LegoAuthForm class = "mt-10 text-sm" @submit = "handleSubmit" >
< LegoAuthFormInputText
name = "email"
type = "email"
label = "Email Address"
class = "block border w-full outline-blue-400 px-4 py-2 rounded-lg mt-1 mb-2"
/>
< LegoAuthFormInputText
name = "password"
type = "password"
label = "Password"
class = "block border w-full outline-blue-400 px-4 py-2 rounded-lg mt-1 mb-2"
/>
< LegoAuthFormButton
label = "Continue"
class = "bg-blue-400 hover:bg-blue-500 transition mt-2 px-4 py-2.5 rounded-lg w-full text-sm text-white"
/>
</ LegoAuthForm >
< div class = "mt-10 text-sm text-gray-400" >
Have an account?
< NuxtLink class = "text-blue-400 hover:text-blue-500 underline" to = "/" >
Sign In
</ NuxtLink >
</ div >
</ LegoAuth >
</ template >
Available Providers Facebook Twitter Google Discord GitHub GitLab Apple Slack Azure Bitbucket Tiktok LinkedIn Let's say if you are using a UI Library, you would want to replace the native button element with the library's button.
In (> 0.0.13), you can pass in a is prop.
Example below, we wrap a custom button named CustomButton, and pass it as is prop. So now instead of rendering native button, it will be rendering whatever component you passed in.
Preview Code Custom Button
undefined
< script setup lang = "ts" >
import CustomButton from './CustomButton.vue'
function handleSelectProvider ( provider : string ) {
// return the selected provider
}
</ script >
< template >
< LegoAuth
class = "max-w-96 w-full bg-white border rounded-2xl px-8 py-10 shadow-sm"
:hide-provider-label = "true"
:providers = "['twitter', 'google', 'facebook']"
>
< LegoAuthHeader >
< div class = "font-medium text-xl text-gray-300" >
Custom Button < br > for Social Providers
</ div >
</ LegoAuthHeader >
< div class = "flex space-x-2 w-full mt-8" >
< LegoAuthSocialProviders
:is = "CustomButton"
class = "w-full px-4 py-3 border bg-white hover:bg-gray-50 transition rounded-lg text-xl flex justify-center"
@select = "handleSelectProvider"
/>
</ div >
</ LegoAuth >
</ template >
< template >
< LegoAuth
:hide-provider-label = "true"
:providers = "['twitter', 'google', 'facebook']"
>
< LegoAuthHeader />
< LegoAuthSocialProviders @select = "handleSelectProvider" />
< LegoAuthForm @submit = "handleSubmit" >
< LegoAuthFormInputText />
< LegoAuthFormButton />
</ LegoAuthForm >
</ LegoAuth >
</ template >
Wrapper that provide the information required for the child component.
Prop Default Types Description providers - Provider[]List the social providers you need hideProviderLabel - booleanHide the label for social provider button
Prop Default Types Description is - ComponentReplace native button with your desired custom component
Name Component Payload Description @select LegoAuthSocialProviders ProviderEvent triggered when selecting social provider @submit LegoAuthForm { [key]: any }Event triggered when click on
