Simple Authentication for Svlelte.
Svelte Auth is a complete open-source authentication solution for Svelte applications.
Heavily inspired by Passport.js and Remix-Auth, but completely rewrote it from scratch to work on top of the Web Fetch API. Svelte Auth can be dropped in to any Svelte-based application with minimal setup.
As with Passport.js, it uses the strategy pattern to support the different authentication flows. Each strategy is published individually as a separate npm package.
To use it, install it from npm (yarn or bun):
npm install @svelte-dev/auth @svelte-dev/session
API Specification: Documentation
Here's an simple Example:
// hooks.server.ts
import { env } from '$env/dynamic/private';
import { sequence } from '@sveltejs/kit/hooks';
import { handleSession } from '@svelte-dev/session';
import { Auth } from '@svelte-dev/auth';
import { OAuth2Strategy } from '@svelte-dev/auth-oauth2';
export const handle = sequence(
handleSession({
adapter: {
name: 'cookie',
options: {
chunk: true
}
},
session: {
secrets: ['s3cr3t']
},
cookie: {
secure: !!env.SSO_CALLBACK_URL,
sameSite: 'lax',
path: '/',
httpOnly: !!env.SSO_CALLBACK_URL
}
}),
async function handle({ event, resolve }) {
const auth = new Auth(event);
const oauthStrategy = new OAuth2Strategy(
{
clientID: env.SSO_ID,
clientSecret: env.SSO_SECRET,
callbackURL: env.SSO_CALLBACK_URL || 'http://localhost:8788/auth/sso/callback'
},
async ({ profile }) => {
// Get the user data from your DB or API using the tokens and profile
return profile;
}
);
auth.use(oauthStrategy);
event.locals.auth = auth;
event.locals.user = event.locals.session.get(
// replace your session key, AuthOptions.sessionKey
'user'
);
const response = await resolve(event);
return response;
}
);
Then, add a login handler 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'
});
};
Finally, add a callback handler src/routes/auth/[provider]/callback/+server.ts.ts
:
// same as before...
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'
});
};
Modify app.d.ts
, here is an example:
// 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 {};
维护者 Owner: Willin Wang
如果您对本项目感兴趣,可以通过以下方式支持我:
Donation ways:
Apache-2.0