Getting Started

Svelte SDK for authorizer.dev (opens in a new tab) integration in your svelte-js (opens in a new tab) 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		docs (opens in a new tab)
Heroku		docs (opens in a new tab)
Render		docs (opens in a new tab)

For more information check docs (opens in a new tab)

Step 2: Setup Instance

Open authorizer instance endpoint in browser
Sign up as an admin with a secure password
Configure environment variables from authorizer dashboard. Check env docs for more information

Note: DATABASE_URL, DATABASE_TYPE and DATABASE_NAME are only configurable via platform envs

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 (opens in a new tab) 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 (opens in a new tab) to see how to use this component library.

Hooks Components