Getting Started

Svelte SDK for authorizer.dev integration in your svelte-js application. This will allow you to have authentication and authorization ready in minutes.

Here is a quick guide on getting started with @authorizerdev/authorizer-svelte package.

Step 1: Get Authorizer Instance

Deploy production ready Authorizer instance using one click deployment options available below

Infra provider	One-click link	Additional information
Railway.app	Deploy on Railway	docs
Heroku	Deploy to Heroku	docs
Render	Deploy to Render	docs

For more information check docs

Step 2: Setup Instance

Start your Authorizer instance with the required CLI flags:

./build/server \
  --database-type=sqlite \
  --database-url=test.db \
  --jwt-type=HS256 \
  --jwt-secret=test \
  --admin-secret=admin \
  --client-id=123456 \
  --client-secret=secret

Note the --client-id value -- you will need it in the SDK configuration below. Check Server Configuration for all available flags.

Step 3 - Install package

Assuming you have svelte-js application up and running, install following package in your application

npm i --save @authorizerdev/authorizer-svelte
OR
yarn add @authorizerdev/authorizer-svelte

Step 4 - Configure Provider and use Authorizer Components

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 for more details.

eg: routes/+layout.svelte

<script>
	import { AuthorizerProvider } from '@authorizerdev/authorizer-svelte';
	import '@authorizerdev/authorizer-svelte/styles/default.css';
</script>

<AuthorizerProvider
    config={{
        authorizerURL: `YOUR_AUTHORIZER_INSTANCE_URL`
        redirectURL: typeof window != 'undefined' ? window.location.origin : ``
        client_id: 'YOUR_CLIENT_ID'
    }}
>
    <slot />
</AuthorizerProvider>

Use Authorizer Component

eg: routes/+page.svelte

<script>
	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();
	};
</script>

{#if state.user}
	<div>
		<h1>Hey,</h1>
		<span>{state.user.email}</span>
		<br />
		{#if state.loading}
			<h3>Processing....</h3>
		{:else}
			<h3 style="color: #3B82F6; cursor: pointer;" on:click={logoutHandler}>Logout</h3>
		{/if}
	</div>
{:else}
	<div class="login-container">
		<h1>Welcome to Authorizer</h1>
		<br />
		<Authorizer />
	</div>
{/if}

Updating styles

Components in @authorizerdev/authorizer-svelte are designed using css variables and comes with default.css which declares this variables. You can modify these css variable to update styling as per your theme:

Note: Given are the default values for the variables.

--authorizer-primary-color: #3b82f6;
--authorizer-primary-disabled-color: #60a5fa;
--authorizer-gray-color: #d1d5db;
--authorizer-white-color: #ffffff;
--authorizer-danger-color: #dc2626;
--authorizer-success-color: #10b981;
--authorizer-text-color: #374151;
--authorizer-fonts-font-stack: -apple-system, system-ui, sans-serif;
--authorizer-fonts-large-text: 18px;
--authorizer-fonts-medium-text: 14px;
--authorizer-fonts-small-text: 12px;
--authorizer-fonts-tiny-text: 10px;
--authorizer-radius-card: 5px;
--authorizer-radius-button: 5px;
--authorizer-radius-input: 5px;

Examples

Please check the example repo to see how to use this component library.