Cookie Consent by Free Privacy Policy Generator 📌 Login Magic for Your SvelteKit App (It's Easier Than You Think!)


✅ Login Magic for Your SvelteKit App (It's Easier Than You Think!)


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Intro

Hey there, SvelteKit fans! Ever wanted to add that extra layer of security to your app, like a login system, but worried it would be a massive headache? Well, fret no more! This article is here to be your friendly guide to building a secure login system for your SvelteKit app. We'll be using some awesome tools to make things smooth and simple, like Prisma for our database, Tailwind CSS for a sharp look, and of course, SvelteKit itself to handle everything else.

By the end of this, you'll have a login system up and running without feeling like you just coded your way through a maze. So, grab your favorite coding beverage and let's jump in! (We'll start with the code in the next section.)

Building on a Great Foundation

I actually started this journey by following a fantastic guide on Joy of Code: https://joyofcode.xyz/sveltekit-authentication-using-cookies. It's a great resource, but some things needed a little tweaking to work smoothly in 2024. So, consider this your upgraded version – a 2024 refresh for a seamless login experience!

Assuming You Already Have an App

I'm assuming you already have a SvelteKit app set up and ready to go. If not, no worries! Just run this command in your terminal:

npm create svelte@latest <app name>

Replace <app name> with the desired name for your app. This command will create a fresh SvelteKit project.

Setting Up Prisma

Next, we'll need to set up Prisma, a powerful tool that makes interacting with databases a breeze. We'll use SQLite for development purposes, but we'll discuss production options later. Run the following command in your terminal:

npx prisma init --datasource-provider sqlite

This command will create a prisma folder and a .env file at the root of your project. The .env file will store the connection string for your database. Inside the prisma folder, you'll find the Prisma schema file and the SQLite database file.

Let's Talk Schema

The Prisma schema defines the structure of our database tables. Here's the code that defines the User and Roles tables:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(uuid())
  username      String    @unique
  passwordHash  String
  userAuthToken String    @unique
  isAdmin       Boolean   @default(false)
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
  role          Roles     @relation(fields: [roleId], references: [id])
  roleId        BigInt
}

model Roles {
  id    BigInt @id @default(autoincrement())
  name  String @unique
  users User[]
}

This schema creates two tables: User and Roles. The User table stores user information like username, password hash, and authentication token. The Roles table allows you to define different user roles with unique permissions.

Why BigInt for ID?

I chose BigInt for the ID field because I plan on using CockroachDB in production. This makes it easier to have a consistent schema that works with both SQLite and CockroachDB without any issues.

We've covered the initial setup, and now we're ready to dive into the code itself! Stay tuned for the next section, where we'll start building the login functionality for your SvelteKit app.

Conquering the Database with Prisma (Our Fancy Treasure Chest)

Now that we have our map (schema) and our treasure chest (database) set up, it's time to grab the loot (data) using Prisma! To do this, we'll need a special tool called the Prisma Client.

Installing the Treasure Hunter (Prisma Client)

First, let's open our terminal again and cast this magic spell (command):

npm i @prisma/client

This command installs the @prisma/client package, which acts like our treasure hunter. It also runs a command called prisma generate behind the scenes. This command generates a special Prisma Client specifically designed for our project's schema. Think of it as a custom key that unlocks the treasure chest in exactly the way we need!

Opening the Treasure Chest (Pushing the Database)

Next, let's use another magic spell (command) to create the actual database tables based on our schema:

npx prisma db push

This command uses the Prisma Client we just installed and pushes our schema to the database, creating the User and Roles tables we defined earlier. Now, our treasure chest is officially open and ready for us to explore!

Introducing Our Treasure Guide (Prisma Client)

Finally, let's create a guide (Prisma Client instance) that we can use throughout our project to interact with the database. Here's a bit of code that does just that:

// src/lib/database.ts

import prisma from '@prisma/client'

export const db = new prisma.PrismaClient()

This code imports the prisma object from the @prisma/client package and creates a new instance called db. This db instance is like our personal treasure guide; we can use it to interact with the database, add new users, retrieve user information, and more!

We've successfully set up Prisma and are now ready to leverage its power to build secure login functionality for our SvelteKit app. Stay tuned for the next section, where the real adventure begins!

Building the Login Form (Our Portal to Adventure)

Now that we have our treasure chest unlocked (database) and our guide by our side (Prisma Client), it's time to build the login form – the portal that will allow users to enter our app. We'll use Svelte and Tailwind CSS to create a user-friendly and visually appealing form. Here's what we'll cover in the next section:

  • Creating a Svelte component for the login form
  • Using Tailwind CSS to style the form elements (inputs, buttons)
  • Handling form submission events (capturing username and password)
  • Validating user input (making sure the username and password are entered correctly)

With a secure and stylish login form in place, we'll be well on our way to building a robust authentication system for our SvelteKit app!

Building User Registration: A Smooth Start

We've conquered the database, and now it's time to create a registration system for your awesome SvelteKit app. This will allow users to sign up for an account and unlock all the cool features you've built. Buckle up, because we're about to break down the code for the registration page (Register/+page.svelte) and the server-side logic (Register/+page.server.ts) in a way that's easy to follow.

1. The Registration Page: Where the Magic Begins

Let's start with the Register.svelte component. This is your user's first impression of your app, so let's make it a good one! This is where users will enter their registration information.

<!-- Register.svelte -->
<script lang="ts">
    import type { ActionData } from './$types';
    export let form: ActionData;
    let showPassword = false;
    $: password = showPassword ? 'text' : 'password';
</script>

<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 dark:bg-gray-800 sm:px-6 lg:px-8">
    <div class="w-full max-w-md space-y-8">
        <div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
                Register
            </h2>
        </div>
        <form action="?/register" method="POST" class="mt-8 space-y-6">
            <!-- Form inputs -->
        </form>
    </div>
</div>

Code Breakdown:

  • We import the necessary things to make the registration work (like ActionData from ./$types).
  • We have a variable called showPassword that lets users see what they're typing for their password (super helpful!).

In the HTML section, we have a form where users can input their username, password, and choose whether they're an admin (but psst, that's a secret for later).

2. Handling What Users Type

Inside the form, we have sections for the username, password, and an "admin" checkbox.

<!-- Inside the form -->
<div>
    <label for="username" class="sr-only">Username</label>
    <input
        id="username"
        name="username"
        type="text"
        required
        placeholder="Username"
    />
</div>
<div>
    <label for="password" class="sr-only">Password</label>
    <input
        id="password"
        name="password"
        type={password}
        required
        placeholder="Password"
    />
</div>
<div class="flex items-center py-5">
    <input
        type="checkbox"
        bind:checked={showPassword}
        id="showPassword"
        class="form-checkbox h-5 w-5 text-indigo-600"
    />
    <label for="showPassword" class="ml-2 text-sm text-gray-700 hover:cursor-pointer dark:text-gray-200">
        Show Password
    </label>
</div>
<div class="flex items-center pt-5">
    <input
        type="checkbox"
        name="admin"
        id="admin"
        class="form-checkbox h-5 w-5 text-green-600 dark:text-green-400"
    />
    <label for="admin" class="ml-2 text-sm text-gray-700 dark:text-gray-200">
        Check if you're an admin
    </label>
</div>

  • The username and password fields are required, because, well, you gotta have those!
  • The password field lets users see what they're typing with a handy "Show Password" toggle.
  • The "admin" checkbox is there for special users, but we won't talk about that just yet .

3. Oops! Username Taken

Sometimes, usernames might already be taken by someone else (shocker, right?). If that happens, we'll show a friendly message letting the user know they need to pick a different one.

<!-- After the form -->
{#if form?.user}
    <p class="error">Username is taken.</p>
{/if}

4. All Set? Let's Register!

<!-- After the error message -->
<button
    type="submit"
    class="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-700"
>
    Register
</button>

Once users have filled out the form, they can click the "Register" button to complete the process. This will trigger some code on the server to create their account. (Yes, I know Tailwind classes can get a bit long-winded at times, but hey, it makes styling a breeze!)

5. The Server-Side: Where the Action Happens

Now, let's move on to the behind-the-scenes stuff in Register.server.ts. This is where the server does its magic to create user accounts and make everything work smoothly.

// Register.server.ts
import { error, fail, redirect } from '@sveltejs/kit';
import type { Action, Actions, PageServerLoad } from './$types';
import bcrypt from 'bcryptjs';
import { db } from '$lib/database';
import { Admin_PW } from '$env/static/private';

Code Breakdown:

  • We import all the cool tools we need to make registration work on the server.

6. Creating a New User

The register function is where the real fun happens! This is where the server takes the information from the form and creates a new user account.

// Register.server.ts
const adminHash = Admin_PW;

const register: Action = async ({ request }) => {
    // Form data processing
};

7. Extracting Information

First, the server grabs the username, password, and admin status from the form data.

// Inside the register action
const data = await request.formData();
const username = data.get('username');
const password = data.get('password');
const admin = data.get('admin');

8. Checking Usernames (No Duplicates Allowed!)

The server checks if the chosen username is already taken. If it is, we send a message back to the user letting them know they need to pick a different one.

// Inside the register action
const isAdmin = admin === 'on' && bcrypt.compareSync(password.toString(), adminHash);

// Checking if the username already exists
const existingUser = await db.user.findUnique({ where: { username } });
if (existingUser) {
    return fail(400, { user: true });
}

// Creating the user
await createUser(username, password, isAdmin);

9. Creating the User Account

If the username is good to go, the server creates the user account with a secure password hash.

10. Welcome Aboard!

Once the account is created, the user is redirected to the login page, ready to start exploring your awesome app!

// Inside the register action
return redirect(303, '/Login');

Full Code for Register Page Component

<!-- Register.svelte -->
<script lang="ts">
    import type { ActionData } from './$types';
    export let form: ActionData;
    let showPassword = false;
    $: password = showPassword ? 'text' : 'password';
</script>

<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 dark:bg-gray-800 sm:px-6 lg:px-8">
    <div class="w-full max-w-md space-y-8">
        <div>
            <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
                Register
            </h2>
        </div>
        <form action="?/register" method="POST" class="mt-8 space-y-6">
            <div class="-space-y-px rounded-md shadow-sm">
                <div>
                    <label for="username" class="sr-only">Username</label>
                    <input
                        id="username"
                        name="username"
                        type="text"
                        required
                        placeholder="Username"
                    />
                </div>
                <div>
                    <label for="password" class="sr-only">Password</label>
                    <input
                        id="password"
                        name="password"
                        type={password}
                        required
                        placeholder="Password"
                    />
                </div>
                <div class="flex items-center py-5">
                    <input
                        type="checkbox"
                        bind:checked={showPassword}
                        id="showPassword"
                        class="form-checkbox h-5 w-5 text-indigo-600"
                    />
                    <label for="showPassword" class="ml-2 text-sm text-gray-700 hover:cursor-pointer dark:text-gray-200">
                        Show Password
                    </label>
                </div>
                <div class="flex items-center pt-5">
                    <input
                        type="checkbox"
                        name="admin"
                        id="admin"
                        class="form-checkbox h-5 w-5 text-green-600 dark:text-green-400"
                    />
                    <label for="admin" class="ml-2 text-sm text-gray-700 dark:text-gray-200">
                        Check if you're an admin
                    </label>
                </div>
            </div>

            {#if form?.user}
                <p class="error">Username is taken.</p>
            {/if}

            <div>
                <button
                    type="submit"
                    class="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:focus:ring-indigo-700"
                >
                    Register
                </button>
            </div>
        </form>
    </div>
</div>

Full Code for Register Page Server-Side Logic

// Register.server.ts
import { error, fail, redirect } from '@sveltejs/kit';
import type { Action, Actions, PageServerLoad } from './$types';
import bcrypt from 'bcryptjs';
import { db } from '$lib/database';
import { Admin_PW } from '$env/static/private';

export const load: PageServerLoad = async (session) => {
    var sessionData = session.cookies.get('session');
    if (sessionData) {
        return redirect(303, '/');
    }
    return {};
};

const adminHash = Admin_PW;

const register: Action = async ({ request }) => {
    const data = await request.formData();
    const username = data.get('username');
    const password = data.get('password');
    const admin = data.get('admin');
    let shouldRedirect = false;

    if (typeof username !== 'string' || typeof password !== 'string' || !username || !password) {
        return error(400, 'Username and Password must be a string');
    }

    const isAdmin = admin === 'on' && bcrypt.compareSync(password.toString(), adminHash);

    try {
        const existingUser = await db.user.findUnique({
            where: { username }
        });

        if (existingUser) {
            return fail(400, { user: true });
        }

        await createUser(username, password, isAdmin);
        // Check if admin === 'on' and isAdmin is false after user creation
        if (admin === 'on' && !isAdmin) {
            shouldRedirect = true;
        }
    } catch (error) {
        console.error('Error during user registration:', error);
        return fail(500, { error: 'Internal server error' });
    }
    if (shouldRedirect) {
        return redirect(303, '/Login');
    }

    return redirect(303, '/Login');
};

async function createRoleIfNotExists(roleName: string) {
    const existingRole = await db.roles.findUnique({
        where: { name: roleName }
    });

    if (!existingRole) {
        await db.roles.create({
            data: { name: roleName }
        });
    }
}

async function createUser(username: string, password: string, isAdmin: boolean) {
    const passwordHash = isAdmin ? adminHash : await bcrypt.hash(password, 10);
    const roleName = isAdmin ? 'ADMIN' : 'USER';

    let role = await db.roles.findUnique({
        where: { name: roleName }
    });

    if (!role) {
        await createRoleIfNotExists(roleName);
        role = await db.roles.findUnique({
            where: { name: roleName }
        });
    }

    await db.user.create({
        data: {
            username,
            passwordHash,
            isAdmin,
            userAuthToken: crypto.randomUUID(),
            role: { connect: { id: role?.id } }
        }
    });
}

export const actions: Actions = { register };

This completes our user registration for your SvelteKit app. Now, users can register and start using your app!

Hey heads up!

Before you dive into coding the server-side logic (Register.server.ts), make sure you've created and saved the registration form component (Register.svelte) first. TypeScript might throw some errors because it can't find the component yet. Don't worry, these will magically disappear once you've created the Actions in Register.server.ts! Just a little behind-the-scenes quirk to keep in mind.

Phew, that was a lot of ground to cover!

We've built a solid foundation for user registration in your SvelteKit app. To keep things comfortable, we'll break it up here and continue in another article. Next time, we'll tackle user login, logout, and maybe even dive into creating a profile page. But that's not all! We also need to make sure our shiny new registration system is production-ready. Stay tuned, because the best is yet to come!

...

✅ Login Magic for Your SvelteKit App (It's Easier Than You Think!)


📈 72.09 Punkte

✅ Deploy Your Next.js App with AWS Amplify Like a Pro — It’s Easier Than You Think


📈 36.56 Punkte

✅ Moving your scheduled tasks to a new PC is easier than you think


📈 33.8 Punkte

✅ The fastest way to transfer your MacBook data is easier than you'd think


📈 33.8 Punkte

✅ Security: Making yourself a hard target for hackers is easier than you think


📈 30.69 Punkte

✅ Contributing to KDE is easier than you think – Porting websites to Markdown


📈 30.69 Punkte

✅ Why CJIS mobile compliance might be easier than you think


📈 30.69 Punkte

✅ Contributing to KDE is easier than you think – Localization and SVN


📈 30.69 Punkte

✅ Contributing to KDE is easier than you think – Phabricator patches using the web interface


📈 30.69 Punkte

✅ Want to Hack a Satellite? It Might Be Easier Than You Think By Max Eddy March 7, 2019


📈 30.69 Punkte

✅ Contributing to KDE is easier than you think – Websites from scratch


📈 30.69 Punkte

✅ It’s Easier Than Ever to Tell VMware What You Think


📈 30.69 Punkte

✅ Writing widgets for KDE's Plasma desktop is easier than you think -- check out the new tutorial portal


📈 30.69 Punkte

✅ Contributing To Open Source Projects Might Be Easier Than You Think


📈 30.69 Punkte

✅ Build a 3D Earth Globe Model in Three.js (PS: It's easier than you think) 🌏😱


📈 30.69 Punkte

✅ Build a 3D Earth Globe Model in Three.js (PS: It's easier than you think) 🌏😱


📈 30.69 Punkte

✅ Build a 3D Earth Globe Model in Three.js (PS: It's easier than you think) 🌏😱


📈 30.69 Punkte

✅ Build a 3D Earth Globe Model in Three.js (PS: It's easier than you think) 🌏😱


📈 30.69 Punkte

✅ Build a 3D Earth Globe Model in Three.js (PS: It's easier than you think) 🌏😱


📈 30.69 Punkte

✅ Running Local LLMs is More Useful and Easier Than You Think


📈 30.69 Punkte

✅ How would you explain with 100 words max why you think systemd is bad? (if you think so, obv)


📈 30.21 Punkte

✅ Think your backups will protect you from ransomware? What do you think the malware attacked first?


📈 29.75 Punkte

✅ The Pixel 8 Pro and Honor Magic 6 Pro are closer than you think. #shorts #phone #android #tech


📈 28.75 Punkte

✅ 👏 You're Better at Coding Than You Think You Are


📈 26.92 Punkte

✅ Apple stellt Magic Keyboard, Magic Trackpad und Magic Mouse in Spacegrau ein


📈 26.91 Punkte

✅ Space Gray: Magic Mouse, Magic Keyboard und Magic Trackpad in Sonderfarbe werden eingestellt


📈 26.91 Punkte

✅ Magic Mouse, Magic Keyboard, Magic Trackpad didn't get USB-C -- but it's still coming


📈 26.91 Punkte

✅ Apple: Magic Keyboard, Magic Mouse und Magic Trackpad immer noch mit Lightning unterwegs


📈 26.91 Punkte

✅ Think you deleted that embarrassing WhatsApp message you sent? Think again


📈 26.63 Punkte

✅ You Think the Visual Studio Code binary you use is Open Source? Think again.


📈 26.63 Punkte

✅ Building a SvelteKit Demo Page with Web Component and Passkey Login for passkeys.eu


📈 26.56 Punkte

✅ Building a SvelteKit Demo Page with Web Component and Passkey Login for passkeys.eu


📈 26.56 Punkte











matomo

Datei nicht gefunden!