Svelte Social Auth

Overview

The Svelte Social Auth package is a tool that allows developers to easily integrate social authentication (Google and Facebook) into their Svelte v3 projects. It provides components with default graphics and text for sign-in buttons, and allows for customization by allowing users to input their desired button content.

Features

• Google and Facebook Auth: The package supports authentication using both Google and Facebook accounts.
• SvelteKit SSR Ready: The package is compatible with SvelteKit server-side rendering.
• Svelte v3: The package is built specifically for Svelte version 3.

Installation

To install the Svelte Social Auth package, use the following command in your Svelte project:

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

Usage

To customize the sign-in buttons, simply put the desired button content inside the respective component.

Customizing the buttons

Buttons have default graphics and text, but they are slotted, allowing users to customize their content.

Attributes

Common attributes for both GoogleAuth and FacebookAuth components:

• text: Text of the sign-in button (string, default: ‘Sign in with ‘)

Attributes specific to the GoogleAuth component:

• clientId: Google service account client id (string)

Attributes specific to the FacebookAuth component:

• appId: Facebook app id (string)

Events

Events fired by the GoogleAuth component:

• on:auth-success: User authentication success (Properties: user)
• on:auth-failure: User authentication failure (Properties: error)
• on:init-error: Google Auth initialization failure (Properties: error)

Events fired by the FacebookAuth component:

• on:auth-success: User authentication success (Properties: user)
• on:auth-failure: User authentication failure (Properties: error)

Developing / Contributing

Please note that Facebook requires HTTPS locally, despite their documentation suggesting otherwise. Therefore, you will need to generate SSL certificates and point the Rollup configuration at them. Additionally, make sure to put your app and client IDs in an .env file.