Svelte Social Auth
Social Auth for Svelte v3
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.
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.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.