@svelte-dev/auth

一个简单好用的 Svelte 身份管理库

Logo

特性

  • 完全的服务器端身份验证
  • 完整的TypeScript支持
  • 策略-基础身份验证
  • 轻松处理成功和失败
  • 实现自定义策略
  • 支持持久会话

概述

Svelte Auth是一个完整的开源身份验证解决方案,适用于Svelte应用程序。

深受Passport.jsRemix-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 {};

策略

目前已经支持的策略有:

PackageMetaChangelog
@svelte-dev/auth-oauth2npm npm npmChangelog
@svelte-dev/auth-githubnpm npm npmChangelog
@svelte-dev/auth-alipaynpm npm npmChangelog
@svelte-dev/auth-afdiannpm npm npmChangelog
@svelte-dev/auth-ssonpm npm npmChangelog

注意: 不同的策略配置参数可能不尽相同。

欢迎共享您的策略。

API 文档

赞助

维护者: Willin Wang

如果您对本项目感兴趣,可以通过以下方式支持我:

License

Apache-2.0