Auth

SveltePak uses Lucia Auth for authentication. Lucia Auth is a flexible and powerful authentication library for SvelteKit. It provides a simple and easy-to-use API for handling user authentication, including sign up, sign in, sign out, and password reset.

Lucia Auth is a flexible and powerful authentication library for SvelteKit. It provides a simple and easy-to-use API for handling user authentication, including sign up, sign in, sign out, and password reset.

You can read more about Lucia Auth in the official documentation.

hooks.server.ts

The hooks.server.ts file plays a pivotal role within the server-side architecture, acting as a conduit for defining hooks that are crucial for the operational integrity of various server-side processes. These processes include, but are not limited to, user authentication, database transactions, and handling of API requests.

In an effort to enhance the authentication mechanism provided by Lucia Auth, we have introduced a series of server-side hooks. These hooks, which are meticulously defined within the hooks.server.ts file, offer a layer of customization that allows developers to tailor the authentication process to meet specific requirements.

Residing within the src directory, the hooks.server.ts file is instrumental in facilitating critical functionalities such as user login, thereby serving as a cornerstone for server-side operations.

You can extend the hooks.server.ts file to include additional hooks that are specific to your application. This can be achieved by creating custom hooks that are tailored to your unique requirements, and then integrating them into the hooks.server.ts file.

hooks.server.ts

// other code
 if (user) {
    const additionalUser = await prisma.user.findUnique({
      where: { email: user.email },
      include: {
        personalTeam: {
          include: {
            subscription: {
              include: {
                plan: true
              }
            }
          }
        },
// other code

auth.server.ts

You can update the Lucia Auth configuration to include the extra attributes you want to retrieve from the user. This can be done by modifying the getUserAttributes function in the auth.server.ts file.

src/auth/auth.server.ts

export const lucia = new Lucia(adapter, {
	sessionExpiresIn: new TimeSpan(30, 'd'),
	sessionCookie: {
		attributes: {
			httpOnly: false,
			path: '/',
			sameSite: 'lax',
			secure: !dev
		} as SessionCookieAttributes
	},
	getUserAttributes: (attributes) => {
		return {
			id: attributes.id,
			name: attributes.name,
			email: attributes.email,
            // other attributes
    ```

Other features

We also support other features such as two-factor authentication (2FA), one-time passwords (OTP), and OAuth.

Two-factor authentication (2FA)

Two-factor authentication (2FA) is an extra layer of security that requires not only a password and username but also something that only the user has on them, i.e. a piece of information only they should know or have immediately to hand - such as a physical token.

Users can enable two-factor authentication by scanning a QR code with their mobile device, or by manually entering a secret key. Once enabled, users will be required to enter a one-time password (OTP) from their mobile device in addition to their username and password when logging in.

OTP

We also support one-time passwords (OTP) for login and password reset. This allows users to receive a one-time password via email or SMS, which they can use to log in or reset their password.

OAuth

SveltePak comes with built-in support for OAuth authentication. This allows you to authenticate users using popular social media platforms such as GitHub, etc.

You can configure the OAuth providers in the oauth.client.ts file.

src/auth/oauth.client.ts

export const OauthProvidersList: OauthProvider[] = [
  {
    id: "github",
    name: "GitHub",
    icon: GithubLogo as typeof SvelteComponent
  },
  {
    id: "bitbucket",
    name: "Bitbucket",
    icon: null
  }
];

You can also configure the OAuth providers you desire in the oauth.server.ts file.

We use the arctic library to handle OAuth authentication.

Arctic is a TypeScript library that provides OAuth 2.0 and OpenID Connect clients for major providers. It runs on any runtime, including Node.js, Bun, Deno, and Cloudflare Workers.

https://arctic.js.org/

GitHub is already configured for you, but you can add more providers if you want. There’s a huge list of providers that you can use with arctic.

Here’s an example of how you can do it.

src/auth/oauth.server.ts

import { GitHub, Bitbucket } from 'arctic'
import { OauthProvidersList } from './oauth.client'

// other code

export const OauthProviders = OauthProvidersList.map((provider) => {
	if (provider.id === 'github') {
		return {
			...provider,
			authorize: async (state: string) => {
				return {
					url: await github.createAuthorizationURL(state)
				}
			},
			validate: async (code: string) => {
				const tokens = await github.validateAuthorizationCode(code)
				const githubUserResponse = await fetch('https://api.github.com/user', {
					headers: {
						Authorization: `Bearer ${tokens.accessToken}`
					}
				})
				const githubUser: GitHubUser = await githubUserResponse.json()
				return {
					id: githubUser.id,
					username: githubUser.login,
					provider: 'github'
				}
			}
		}
    }
    // other providers
}