Auth.js is a new framework agnostic authentication library extracted from the core of NextAuth.js. It's built around a single core package, with experimental framework adapters for Next.js, SvelteKit, SolidStart available now with more coming soon.
In this article, we will set up Auth.js with a new SvelteKit project and integrate with GitHub for OAuth login.
Give your app a name and then use http://localhost:5127 for the "Homepage URL" and http://localhost:5127/auth/callback/github as the "Authorization callback URL".
Using localhost allows for local testing of the authentication flow, but it won't work for a deployed app. When deploying your app, either update the OAuth app's URLs to reflect your deployed URLs or create a new OAuth app entirely.
Select "Register Application" and then generate a new client secret. Copy both the new client secret and the client ID and place them in a .env file at the root of your new SvelteKit project.
Lastly, Auth.js requires an AUTH_SECRET environment variable that is used to sign sessions. Any random string that is a minimum of 32 characters could work. Generate one by running openssl rand -hex 32 in your terminal or by visiting https://generate-secret.vercel.app/32 and add the result to your .env file.
GITHUB_CLIENT_ID="client id here"
GITHUB_CLIENT_SECRET="client secret here"
AUTH_SECRET="random 32 character string here"
Integrating Auth.js and SvelteKit
Auth.js works by watching specific routes in your application and responding to them automatically for you. In SvelteKit, it does so by using the handlehook.
Create a hooks.server.ts file under your src directory and paste the following code snippet:
After calling SvelteKitAuth with our GitHub provider configuration, we export the result as our handle hook. This is all the setup we have to do; we are ready to start using Auth.js in our application code.
With our handle hook in place, we can now look at allowing users to sign up and log in. First, let's make the current session data available to all routes using a root-level layout load function.
Create a +layout.server.ts under src/routes and copy the following snippet:
Using the data we got from our layout load function, we check to see if the user has an active session and present the appropriate options. We specify that we want to sign in using GitHub and redirect back the home route once successful.
Accessing Session Data and Protecting Routes
Let's jump over to the home page and display some user information.
After logging in, our session data will be populated with the user's profile information. We can now use any user-specific data that we need.
However, if an unauthenticated user visits the home page, it will cause an error because their session data will be null. Similarly, in most apps, there is a need to protect some routes and redirect unauthenticated visitors elsewhere. There are a couple ways to accomplish this with Auth.js and SvelteKit, but let's take a look at the most straightforward method: checking the session in a +page.server.ts load function.
Since this load function is directly under src/routes, it will run whenever the index route is visited. We can first check if the user has a valid session and, if not, redirect them back to the login page. You could abstract this session validation logic into a function and use it where you need to verify a session before handling a request.
You've now got a working SvelteKit app that uses Auth.js to log in users and protect authenticated routes. For further reading, check out the Auth.js documentation.