Search code examples
authorizationserver-side-renderingsveltekit

Is Auth.js compatible with Sveltekit SSR?


I am trying to create a Sveltekit app where users can log in. The login process is handled by a self-created API, so I would like to use the Auth.js Credentials Provider. When I call the SignIn method as the FormAction in the +page.server.ts file, I get the error message 'window is not defined', which makes sense. Does this mean that Auth.js is not compatible with server-side rendering, or is there something else that I can adjust?

My Code:

//hooks.server.ts
SvelteKitAuth({
        providers: [
            // @ts-ignore
            Credentials({
                name: "credentials",
                async authorize(credentials, req) {
                    // TODO: Call Api
                    const user = { id: "1", name: "J Smith", email: "[email protected]" }

                    if (user) {
                        return user
                    } else {
                        return null
                    }
                }
            })
        ],
    });
//+page.server.ts
export const actions = {
    default: async ({ cookies, request }: { cookies: any, request: any }) => {
        const data = await request.formData();
        const credentials = {
            username: data.get('username'),
            password: data.get('password')
        };

        signIn('credentials', credentials)
            .then(response => {
                console.log('Success');
            })
            .catch(error => {
                console.error('error', error);
            });
    }
};

Solution

  • @auth/sveltekit/client's signIn() is documented as a "Client-side method to initiate a signin flow[...]", and one of the devs recently confirmed there's no official support for server-side use yet.