特性
- 完全的服务器端身份验证
- 完整的TypeScript支持
- 策略-基础身份验证
- 轻松处理成功和失败
- 实现自定义策略
- 支持持久会话
概述
Svelte Auth是一个完整的开源身份验证解决方案,适用于Svelte应用程序。
深受Passport.js和Remix-Auth的启发,但完全从头开始重写,以便在Web Fetch API之上工作。 Svelte Auth可以在最小的设置下添加到任何基于Svelte的应用程序中。
与Passport.js一样,它使用策略模式来支持不同的身份验证流程。 每个策略都作为单独的npm包单独发布。
演示
Github 登录安装
要使用它,从npm(yarn或bun)安装:
npm install @svelte-dev/auth @svelte-dev/session
使用
这是一个简单的例子:
// hooks.server.ts
import { env } from '$env/dynamic/private';
import { sequence } from '@sveltejs/kit/hooks';
import { handleAuth } from '@svelte-dev/auth';
import { OAuth2Strategy } from '@svelte-dev/auth-oauth2';
const oauthStrategy = new OAuth2Strategy(
{
clientID: env.SSO_ID,
clientSecret: env.SSO_SECRET,
callbackURL: env.SSO_CALLBACK_URL || 'http://localhost:8788/auth/oauth2/callback'
},
async ({ profile }) => {
// Get the user data from your DB or API using the tokens and profile
return profile;
}
);
export const handle = handleAuth({
// Auth Options
autoRouting: true,
strategies: [oauthStrategy],
sessionKey: 'user',
sessionErrorKey: 'auth:error',
sessionStrategyKey: 'strategy',
successRedirect: '/',
failureRedirect: '/',
// Session Storage Options
adapter: {
name: 'cookie',
options: {
chunk: true
}
},
session: {
secrets: ['s3cr3t']
},
cookie: {
secure: !!env.SSO_CALLBACK_URL,
sameSite: 'lax',
path: '/',
httpOnly: !!env.SSO_CALLBACK_URL
}
});
就是这样。
进阶使用
自定义路由
如果您没有设置authRouting
,您首先需要添加一个 src/routes/auth/[provider]/+server.ts
:
import { redirect, type RequestEvent } from '@sveltejs/kit';
export const GET = async (event: RequestEvent) => {
const { request } = event;
const provider = event.params.provider ?? 'github';
return await event.locals.auth.authenticate(event, provider, {
successRedirect: '/dashboard',
failureRedirect: '/error'
});
};
然后添加回调 src/routes/auth/[provider]/callback/+server.ts.ts:
:
// 根据实际需要修改
import type { RequestEvent } from '@sveltejs/kit';
export const GET = async (event: RequestEvent) => {
const provider = event.params.provider ?? 'github';
return await event.locals.auth.authenticate(event, provider, {
successRedirect: '/dashboard',
failureRedirect: '/error'
});
};
Typescript
修改app.d.ts
,这是一个例子:
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
interface Locals {
auth: Auth;
session: SessionStorage<{ user: any }>;
user:
| {
invalid?: boolean;
[key: string]: unknown;
}
| unknown;
}
// interface PageData {}
interface Platform {
env: {
SSO_ID: string;
SSO_SECRET: string;
};
context: {
waitUntil(promise: Promise<unknown>): void;
};
caches: CacheStorage & { default: Cache };
}
}
}
export {};
策略
目前已经支持的策略有:
Package | Meta | Changelog |
---|---|---|
@svelte-dev/auth-oauth2 | Changelog | |
@svelte-dev/auth-github | Changelog | |
@svelte-dev/auth-alipay | Changelog | |
@svelte-dev/auth-afdian | Changelog | |
@svelte-dev/auth-sso | Changelog |
注意: 不同的策略配置参数可能不尽相同。
欢迎共享您的策略。
API 文档
赞助
维护者: Willin Wang
如果您对本项目感兴趣,可以通过以下方式支持我:
License
Apache-2.0