Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/beyonk-group/svelte-social-auth

Social Auth for Svelte v3
https://github.com/beyonk-group/svelte-social-auth

authentication beyonk facebook facebook-login google google-login signin social social-authentication social-network sso svelte svelte-v3 vanilla-js

Last synced: about 1 month ago
JSON representation

Social Auth for Svelte v3

Host: GitHub
URL: https://github.com/beyonk-group/svelte-social-auth
Owner: beyonk-group
Created: 2019-04-29T11:54:07.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-10-06T18:10:55.000Z (9 months ago)
Last Synced: 2024-04-14T13:44:05.916Z (3 months ago)
Topics: authentication, beyonk, facebook, facebook-login, google, google-login, signin, social, social-authentication, social-network, sso, svelte, svelte-v3, vanilla-js
Language: Svelte
Size: 266 KB
Stars: 168
Watchers: 8
Forks: 21
Open Issues: 14
Metadata Files:
- Readme: README.md

Lists

awesome-stars - beyonk-adventures/svelte-social-auth - Social Auth for Svelte v3 (Svelte)
potyk-awesome-frontend - svelte-social-auth - google auth (Svelte / Components)

README

        

    


    


    

    


    




## Svelte Social Auth

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev) [![publish](https://github.com/beyonk-adventures/svelte-social-auth/actions/workflows/deploy.yml/badge.svg)](https://github.com/beyonk-adventures/svelte-social-auth/actions/workflows/deploy.yml)

Google and Facebook Auth

SvelteKit

SSR Ready

Svelte v3

## installation

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

## Usage

```jsx

 console.dir(e.detail.user)} />

 console.dir(e.detail.user)} />

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

```

### Customising the buttons

Buttons have default graphics and text, however, both buttons are slotted, so simply put the button content you want inside:

```

  
my custom content


```

### Attributes

Common attributes:

| Attribute | Description | Type | Default |

|---|---|---| --- |

| text | Text of the sign-in button | string | 'Sign in with ' |

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.

Put your app and client ids in an `.env` file

```bash

.env.local

VITE_GOOGLE_CLIENT_ID=

VITE_FACEBOOK_APP_ID=

``

```bash

pnpm dev

```