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		docs
Heroku		docs
Render		docs

For more information check docs

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 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 : ``
        clientID: 'YOUR_CLIENT_ID'
    }}
>
    <slot />
</AuthorizerProvider>

Use Authorizer Component

eg: routes/+page.svelte

 
<script>
	import { getContext } from 'svelte';
	import { Authorizer } from '../lib';
 
	/**
	 * @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}

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.

Last updated on September 24, 2022