sk-oidc-oauth
v1.2.0
Published
OIDC/OAuth2 authentication and authorization for prerendered/client-side-rendered SvelteKit apps.
Downloads
565
Maintainers
Readme
Welcome to SvelteKit OIDC OAuth 👋
⚠️ Under Construction!
OIDC/OAuth2 authentication and authorization for prerendered/client-side-rendered SvelteKit apps.
🏠 Homepage
Installation
npm i -D sk-oidc-oauth
Usage
For full usage information, see the docs.
Quick Start
- Register the
Authentication
provider in your root+layout.svelte
.
<!-- src/routes/+layout.svelte -->
<script lang="ts">
import { Authentication, type UserManagerSettings } from 'sk-oidc-oauth';
const userManagerSettings: UserManagerSettings = {
authority: 'https://login.microsoftonline.com/tenant-id/v2.0',
client_id: '1234',
redirect_uri: 'http://localhost:5173/auth/callback/azure',
loadUserInfo: true,
};
</script>
<Authentication {userManagerSettings}>
<slot />
</Authentication>
- Add a callback route for your
redirect_uri
.
<!--
src/routes/auth/callback/azure/+page.svelte
We just need the route to be defined, so this file can/should be empty.
-->
You're all set! You can use all of the library's components, functions, and stores anywhere inside the root layout.
Protect Routes
Use the AuthorizationGuard
in a nested +layout.svelte
to protect all of the routes within:
<!-- src/routes/private/+layout.svelte -->
<script lang="ts">
import { AuthorizationGuard, isFullyAuthenticated } from 'sk-oidc-oauth';
$: yourCustomCondition = false;
</script>
<AuthorizationGuard
passCondition={$isAuthenticated && yourCustomCondition}
redirect="/auth/signin"
>
<slot />
</AuthorizationGuard>
Sign In / Out
<!-- src/lib/components/AuthButton/AuthButton.svelte -->
<script lang="ts">
import {
isFullyAuthenticated,
startSigninRedirect,
startSignoutRedirect,
} from 'sk-oidc-oauth';
</script>
{#if $isFullyAuthenticated}
<button type="button" on:click={startSignoutRedirect}>Sign out</button>
{:else}
<button type="button" on:click={startSigninRedirect}>Sign in</button>
{/if}
User Info
<!-- src/lib/components/User/User.svelte -->
<script lang="ts">
import { userInfo } from 'sk-oidc-oauth';
</script>
<ul>
<li>{$userInfo.profile.name}</li>
<li>Email: {$userInfo.profile.email}</li>
</ul>
👨💻 Author
Zach Scroggins
- Website: https://zachscroggins.com
- Twitter: @scroggins_zach
- Github: @ZachScroggins
- LinkedIn: @zachscroggins
🤝 Contributing
Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.
✨ Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2023 Zach Scroggins. This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator