TypeError: "client.client_secret" property must be a non-empty string - SvelteKit and Auth.js

Question

I have a SvelteKit application in which I want to enable authentication via the Auth.js library.

My project setup is as follows:

src/hooks.server.js

import { SvelteKitAuth } from '@auth/sveltekit';
import GoogleProvider from '@auth/core/providers/google';
import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET } from '$env/static/private';

export const handle = SvelteKitAuth({
    providers: [GoogleProvider({ clientId: GOOGLE_CLIENT_ID, clientSecret: GOOGLE_CLIENT_SECRET })],
});

src/routes/protected/+layout.server.js

import { redirect } from '@sveltejs/kit';

export const load = async (event) => {
    const session = await event.locals.getSession();

    if (!session) {
        throw redirect(307, 'auth/signin');
    }

    return {
        session
    };
};

src/routes/protected/+page.svelte

<h1>Protected route</h1>

.env

GOOGLE_CLIENT_ID=MY_GOOGLE_CLIENT_ID
GOOGLE_CIENT_SECRET=MY_GOOGLE_CLIENT_SECRET

When I navigate to the protected route (/protected), I get the default Google OAuth popup from Auth.js. However, I once I select my Gmail account to proceed, the console states the following error:

[auth][error][CallbackRouteError]: Read more at https://errors.authjs.dev#callbackrouteerror
[auth][cause]: TypeError: "client.client_secret" property must be a non-empty string

I tried going through the documentation mentioned at the URL given in the error message, but I couldn't figure out the issue. I have configured the proper domain URL in the Google Console as well while setting up my project.

Answer 1

SvelteKit allows access to environment variables starting with PUBLIC_ from the client-side code. All other environment variables are private and accessible only by server-side code.

https://joyofcode.xyz/sveltekit-environment-variables#static-for-variables-during-the-build-process