x-login

Loads the respective SDK and render the sign in button.

<button type="button" x-login:google="[client_id]" data-redirect="[url]"></button>

Attributes

Attributes for personalization and flow can be set according to the respective documentation.

Sign In With Google

See all in Google Documentation.

Set the client_id without .apps.googleusercontent.com.

<button x-login:google="[client_id]" data-redirect="[url]" data-theme="filled_black"></button>

Facebook Login Button

See all in Facebook Documentation.

<button
   x-login:facebook="[app_id]"
   data-button-type="continue_with"
   data-size="medium"
   data-layout="rounded"></button>

Sign in with Apple JS

See all in Apple Documentation.

<button
   x-login:apple="[client_id]"
   data-redirect="[url]"
   data-color="black"
   data-border="true"
   data-type="sign in"
   data-state=""
   data-nonce=""></button>

Modifiers

.init

Executes on render, instead on click.

<template x-if="show">
   <button x-login:google.init="[client_id]" data-redirect="[url]" data-theme="filled_black"></button>
</template>