npm

svelte-social-auth-custom

2.1.7 • Public • Published

Beyonk

Svelte Social Auth

js-standard-style CircleCI svelte-v2 svelte-v3

Google and Facebook Auth

SSR Ready Svelte v3 + v2

installation

npm i @beyonk/svelte-social-auth --save-dev

Usage

<GoogleAuth clientId="your-google-auth-client-id" on:auth-success={e => console.dir(e.detail.user)} />
<FacebookAuth appId="your-facebook-app-id" on:auth-success={e => console.dir(e.detail.user)} />

<script>
  import { GoogleAuth, FacebookAuth } from '@beyonk/svelte-social-auth'
</script>

Usage with v2

<GoogleAuth clientId="your-google-auth-client-id" on:auth-success={e => console.dir(e.detail.user)} />
<FacebookAuth appId="your-facebook-app-id" on:auth-success={e => console.dir(e.detail.user)} />

<script>
  import { GoogleAuth, FacebookAuth } from '@beyonk/svelte-social-auth/src/components.v2.js'
</script>

Attributes

Common attributes:

Attribute Description Type Default
text Text of the sign-in button string 'Sign in with '
buttonBackgroundColor Hex, Named or rgb version of the button background color string '#4285F4'
disabledButtonBackgroundColor Hex, Named or rgb version of the button background color, disabled state string 'grey'
buttonTextColor Hex, Named or rgb version of the button text color string '#FFFFFF'
buttonWidth %, PX, EM, VW width, or auto for default string '100%'

The attributes for the GoogleAuth component are:

Attribute Description Type Default
clientId Google service account client id string -

The attributes for the FacebookAuth component are:

Attribute Description Type Default
appId Facebook app id string -

Events

The events fired by the GoogleAuth component are:

Event Purpose Properties
on:auth-success User authentication success { user }
on:auth-failure User authentication failure { error }
on:init-error Google Auth initialisation failure { error }

The events fired by the FacebookAuth component are:

Event Purpose Properties
on:auth-success User authentication success { user }
on:auth-failure User authentication failure { error }

Developing / Contributing

Note that Facebook requires that you have HTTPS locally, despite their documentation to the contrary, so you will need to generate some SSL certs and point rollup config at them.

GOOGLE_CLIENT_ID=<your-google-client-id> FACEBOOK_APP_ID=<your-facebook-app-id> npm run dev

Package Sidebar

Install

npm i svelte-social-auth-custom

Weekly Downloads

4

Version

2.1.7

License

none

Unpacked Size

63.8 kB

Total Files

7

Last publish

Collaborators

  • louishrg