https://github.com/authorizerdev/authorizer-svelte
Svelte SDK for [authorizer.dev](https://authorizer.dev/)
https://github.com/authorizerdev/authorizer-svelte
hacktoberfest
Last synced: 10 months ago
JSON representation
Svelte SDK for [authorizer.dev](https://authorizer.dev/)
- Host: GitHub
- URL: https://github.com/authorizerdev/authorizer-svelte
- Owner: authorizerdev
- Created: 2022-09-09T06:25:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-05T17:23:05.000Z (about 2 years ago)
- Last Synced: 2025-03-24T09:38:23.771Z (10 months ago)
- Topics: hacktoberfest
- Language: Svelte
- Homepage:
- Size: 556 KB
- Stars: 9
- Watchers: 1
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# authorizer-svelte
Svelte SDK for [authorizer.dev](https://authorizer.dev) integration in your [svelte-js](https://svelte.dev/) application. This will allow you to have authentication and authorization ready in minutes.
For detailed information about all the components check [docs](https://docs.authorizer.dev/authorizer-svelte)
## Getting Started
Here is a quick guide on getting started with `@authorizerdev/authorizer-svelte` package.
### Step 1 - Create Instance
Get Authorizer URL by instantiating [Authorizer instance](/deployment) and configuring it with necessary [environment variables](/core/env).
### Step 2 - Install package
Assuming you have svelte-js application up and running, install following package in your application
```sh
npm i --save @authorizerdev/authorizer-svelte
OR
yarn add @authorizerdev/authorizer-svelte
```
### Step 3 - Configure Provider and use Authorizer Component
Authorizer comes with global context `authorizerContext` which is available once you have configured `AuthorizerProvider` component.
Configure `AuthorizerProvider` at root level in your application and import `default.css`.
> Note: You can override default style with `css` variables. Check [docs](https://docs.authorizer.dev/authorizer-svelte) for more details.
`eg: routes/+layout.svelte`
```svelte
import { AuthorizerProvider } from '@authorizerdev/authorizer-svelte';
import '@authorizerdev/authorizer-svelte/styles/default.css';
```
**Use `Authorizer` Component**
`eg: routes/+page.svelte`
```svelte
import { getContext } from 'svelte';
import { Authorizer } from '@authorizerdev/authorizer-svelte';
/**
* @type {{ token: string; user: any; loading: boolean; logout: Function; }}
*/
let state;
const store = getContext('authorizerContext');
store.subscribe((/** @type {any} */ data) => {
state = data;
});
const logoutHandler = async () => {
await state.logout();
};
{#if state.user}
Hey 👋,
{state.user.email}
{#if state.loading}
Processing....
{:else}
Logout
{/if}
{:else}
Welcome to Authorizer
{/if}
```
## Support our work
Github Sponsorship: https://github.com/sponsors/authorizerdev