Integrating Auth.js (NextAuth) and Prisma with SvelteKit

November 15, 2023

Let's see how we can implement Auth.js (NextAuth) and Prisma with SvelteKit

Note: Auth.js is still experimental at the time of writing this article. So there might be some breaking changes in the future. But it reamins same for the most part.

we will be using the following stack for this project.

SvelteKit
TypeScript
Prisma
Auth.js (NextAuth)
TailwindCSS
Shadcn-ui (svelte port made by Huntabyte)

So, let's get started.

Creating a SvelteKit project and adding TailwindCSS, Shadcn-ui

First, we need to create a sveltekit project. We can do that by using the following command.

			npm create svelte@latest my-app

chose your preferred configuration and then add tailwindcss to the project using the below command.

			npx svelte-add@latest tailwindcss

and install the dependencies using the following command.

			npm install

Now, we need to install shadcn-ui.

			npx shadcn-svelte@latest init

You will be asked a few questions to configure

			Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/app.postcss
Where is your tailwind.config.[cjs|js|ts] located? › tailwind.config.js
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils

we will be using few components from shadcn-ui. so we need to install them.

			npx shadcn-svelte@latest add button card avatar dropdown-menu

Setting up Prisma

Now, we need to setup prisma. We can do that by using the following command and we also install prisma client and adapter for Auth.js (NextAuth). I will be using vercel postgres database. You can use any database you want.

			npm install prisma @prisma/client @next-auth/prisma-adapter

let's set up prisma using

			npx prisma init

this will generate a schema.prisma file in a directory named prisma. We need to edit it to add our models. We will be adding a user model and a session model.

Auth.js (NextAuth) setup

Now, we need to setup Auth.js (NextAuth). We can do that by using the following command.

			npm install @auth/core @auth/sveltekit

Auth.js (NextAuth) uses a database adapter to store the user data. We will be using prisma adapter (which we've installed earlier) for this project.

Auth.js (NextAuth) provides us with different models for the database like User, Session, Account, VerificationRequest etc.

here are those schemas. it's very much important to add these as it is to your schema.prisma file. I've tried other different schema models but it didn't work. so i'm using these models. you can also use these models.

you need to add these models to your schema.prisma file.

this is what your schema.prisma file should look like. Note that, DIRECT_URL is optional and don't forget to add DATABASE_URL in .env.

after that, we need to generate the prisma client. We can do that by using the following command.

			npx prisma generate

The generate command generates assets like Prisma Client based on the generator and data model blocks defined in your prisma/schema.prisma file. The generate command is most often used to generate Prisma Client with the prisma-client-js generator.

create a new file named db.server.ts inside src/lib directory and add the following code to it.

we use this file to expose a singleton of the prisma client and we can use this in our project to access the database.

now we need to push the schema to the database. so that the tables will be created.

			npx prisma db push

you can see those tables in your database by running the prisma studio.

			npx prisma studio

this will open a browser window with the prisma studio. you can see the tables there.

Prisma Studio models

you can also see those tables in your database in my case it's vercel postgres. so i can open up my vercel and see the tables there.

Adding Auth.js (NextAuth) to the project

to add Auth.js (NextAuth) to the project, we need to create a file named hooks.server.ts in src directory.

note that, for using OAuth providers like Google and Github, you need to create OAuth apps in their respective developer consoles and get the client id and client secret. I have added those to .env file and i'm importing them from there, add also AUTH_SECRET and NEXTAUTH_SECRET to .env file. you can generate a random string using openssl rand -base64 32 and add it to .env file.

your .env file should look like this.

.env

			POSTGRES_URL="postgres://default:************@ep-autumn-cherry-00149263-pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb"
GOOGLE_ID="238352474330-0g3c78cn7o93o2979tatjt9bdvr8496h.apps.googleusercontent.com"
GOOGLE_SECRET="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"
GITHUB_ID="c8458ef2c5288d93af54"
GITHUB_SECRET="68801a7ba6caf48550acc2d4bad6c67d50b25e12"
AUTH_SECRET="58383abb3d6c7f7fb02eb71d97bd6dc7"
NEXTAUTH_SECRET="58383abb3d6c7f7fb02eb71d97bd6dc7"

Get Google and Github Client and Secret ID's to get google's Client and Secret ID, go to google developers console or follow this guide from google and for Github, it's pretty easy. just go to Github developers settings and under OAuth Apps, add a new app and follow the on-screen instructions. One thing to be clear is that, while testing in local environment, you homepage URL (or javascript origins in google) must be http://localhost:5173, replace 5173 with your port number where your app runs and callback URL (or redirect) should be http://localhost:xxxx/auth/callback/provider, replace provider with github and google in their respective consoles.

we are almost done with the setup. Now on to the SvelteKit part where we will be creating the login and protected routes.

Creating Routes

let's create following routes.

/ - Home page
/login - Login page
/dashboard - Dashboard page (protected route)

First, let's create Navbar where we will have login button and if users are logged in, we will show their name and profile picture.

create a file named navbar.svelte in src/lib/components directory and add the following code to it.

add that Navbar component to +layout.svelte file in your root directory.

and in your +page.svelte file inside your src/routes directory, add the following code.

if you run the project now, you will see the navbar and if you click on the login button, you will be redirected to the login page but we haven't created the login page yet. so let's create it. And in our home page if the user is logged in, we will show their name.

let's create a login routes

and the most important thing is to add +page.server.ts file to all your routes as we use per path authentication. it will export a load function that contains the session info. so that we can use it in our components. we can use a common +layout.server.ts but that's not secure.

			import { redirect } from '@sveltejs/kit';
 
export const load = async (event) => {
    const session = await event.locals.getSession();
+   // only in src/routes/login/+page.server.ts
+   if (session?.user) {
+       throw redirect(303, '/dashboard');
+   }
    return {
        session
    };
}

this code is common to all routes. but only in login route, add a redirect block. what it does is, if a session is already there which means the user is already logged in, then we redirect them to dashboard page even if they try to access the login page.

we are missing one component that is AuthButton that we have used in our Navbar. let's create that component.

if the user is not logged in, we show a login button and if the user is logged in, we show a logout button and if the user clicks on the logout button, we sign them out and redirect them to the home page.

now, let's create a dashboard page. we will be using the same code that we have used in our home page.

and in routes/dashboard/+page.server.ts file, add the following code.

what the newly added lines of code does is, when a user is not logged in and tries to access the dashboard page, we redirect them to the login page and after they login, we redirect them back to the dashboard page.

you can use this code in any protected route where you want to redirect the user to login page if they are not logged in.

And that's it. we have successfully integrated Auth.js (NextAuth) and Prisma with SvelteKit. you can see the full code in my github repo .

Dashboard Page

Prisma Studio

Thanks for reading. If you have any questions, feel free to comment down below or reach out to me on twitter @prabhukirantwt .