2.1.7 • Published 3 years ago
svelte-social-auth-custom v2.1.7
Svelte Social Auth
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