Creating custom SignIn pages with Authjs-Sveltekit

[OwenRestock]

Question 💬

Hi
I would like to create a custom login / signIn page for my app, but after do some research I can't found any example using sveltekit, instead I found this tutorial using nextjs I've tried those tutorials but the signIn method within the custom signIn page doesn't seems to work, it only refreshing the page and doesn't throw any error (I already set the debug props to true, and add the custom pages.signIn route within the SvelteKitAuth declaration).

Is the signIn method behavior considered as a bug or creating custom signIn pages is not supported yet for the sveltekit adapter?

Thanks for your response, appreciate it!

How to reproduce ☕️

Currently I'm using @auth/core: 0.5.1 and @auth/sveltekit: 0.3.0
I'm using email-password credential.

    <script>
    import { signIn } from '@auth/sveltekit/client';
    
    const handleLogin = async () => {
            console.log({ email, password });
            await signIn('email-password', {
                email: 'email@email.com',
                password: 'password',
                redirect: false,
                callbackUrl: '/',
            });
            return
        };
    </script>



    <div>
        <h1 class="notSignedInText">You are not signed in</h1>
        <br />
        <label for="email">Email:</label>
        <input type="email" bind:value={email} />
        <br />
        <br />
        <label for="password">Password:</label>
        <input type="password" bind:value={password} />
        <br />
        <br />
        <button
            class="bg-emerald-400 px-4 py-2"
            type="button"
            on:click={handleLogin}
        >
            Login with Email & Password
        </button>
    </div>

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[ziedHamdi]

I'm also searching how to do that, I can't find how to obtain the list of providers from the SvelteKitAuth instance I created. I couldn't even find where the default implementation is, seems as if it is still in react

[tdack]

Fetch them from /auth/providers in either a page.js or a page.server.js and then look at the NextJS example at https://authjs.dev/guides/basics/pages or https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/lib/pages/signin.tsx to see how the providers are looped over to generate the login buttons.

[ziedHamdi]

This is what I did so far:

hooks.server.js //this one works, I just added the pages option to redirect to my page

import { SvelteKitAuth } from "@auth/sveltekit";
import LinkedIn from '@auth/core/providers/linkedin';
import Google from "@auth/core/providers/google";

import { MongoDBAdapter } from "@next-auth/mongodb-adapter"
import conn from './lib/server/db/mongoClient'

import { env } from '$env/dynamic/private'
import { redirect } from '@sveltejs/kit';

const { LINKED_IN_CLIENT_ID, LINKED_IN_CLIENT_SECRET, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET } = env

export const handle = async (options) => {
	//Auth.js
	const auth = SvelteKitAuth({
		adapter: MongoDBAdapter(conn),
		secret:env.AUTH_SECRET,
		providers: [
			// LinkedIn({ clientId: LINKED_IN_CLIENT_ID, clientSecret: LINKED_IN_CLIENT_SECRET }),
			Google({ clientId: GOOGLE_CLIENT_ID, clientSecret: GOOGLE_CLIENT_SECRET }),
		],
		callbacks: {
			async session(session, user) {
				return session;
			},
		},
		pages: {
			signIn: '/auth/signin',
			// signOut: '/auth/signout',
			// error: '/auth/error', // Error code passed in query string as ?error=
			// verifyRequest: '/auth/verify-request', // (used for check email message)
			// newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
		}
	})

	//redirect unauthentified users to homepage
	// if (!session?.user && event.url.href.includes('authorized')) {
	// 	throw redirect(302, '/');
	// }

	const response = await auth(options);
	const { resolve, event } = options


	// Apply CORS header for API routes
	if (event.url.pathname.startsWith('/authorized/cv/submit')) {
		// Required for CORS to work
		if(event.request.method === 'OPTIONS') {
			return new Response(null, {
				headers: {
					'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE',
					'Access-Control-Allow-Origin': '*',
				}
			});
		}
		response.headers.append('Access-Control-Allow-Origin', `*`);
	}
	return response;
};

src/routes/auth/signin/+page.svelte

<script>
	import { signIn, getSession, csrfToken } from "@auth/sveltekit/client";

	export let data;
</script>

<div>
		{#each data.providers as provider, index(provider.name)}
			<div key={provider.name}>
				<button on:click={() => signIn(provider.id)}>
					Sign in with {provider.name}
				</button>
			</div>
			{/each}
</div>

src/routes/auth/signin/+page.server.js //putting the providers manually

import Google from "@auth/core/providers/google";

export async function load(event) {
	const providers = [Google]
	return {providers:JSON.parse(JSON.stringify(providers))}
}

This sends me to a page with this url http://localhost:5173/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A5173%2Fauthorized%2Fcv%2F647a29e46ba81ab341e4bf4a
http://localhost:5173/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A5173%2Fauthorized%2Fcv%2F647a29e46ba81ab341e4bf4a

And it complains of too many redirects

[H-G-11]

I also have the too many redirects when I specify

pages: {
  signIn: "/auth/signin",
  },

When I specify

pages: {
  signIn: "/signin",
  },

I don't have too many redirects, but the authentication seems broken (nothing happens).

I prefer not investigating too much time in that right now, I know that this doesn't help much. I will probably have a look again in some time.

Thank you very much

[ziedHamdi]

Happy to talk @jasongitmail. It's been a while since I implemented Lucia, I'm the kind of people who forget fast :-). So I can't tell you what I liked and what I appreciated. I remember though that for AuthJs there was no high level architecture document to give directions on where to search for a given feature. It was even more true for Svelte

[ziedHamdi]

@jasongitmail I'm writing a project to allow low-entry ticket for pay-as-you-go integration. I'd be very happy to have contributors if you are interested. It's still early stage, but I'm advancing pretty fast on it. Here's an article I wrote about how it does what it does: https://dev.to/zhamdi/pay-as-you-go-a-flexible-approach-to-managing-multiple-offers-simultaneously-for-a-user-2a1m

I hope it's not intrusive to talk about it here, I feel like we are a community of open source lovers who help each other, but I'm not sure if I understand all behavior codes.

[jasongitmail]

Cool. It's definitely worth sharing your project to see if any devs may have aligned interests and want to collaborate.

Are there any open source billing or SaaS-related projects that have discussions groups where you could share it and ask for feedback? Or I've found some success sharing code on Github and then people eventually come along to ask questions or add issues, and they have similar goals and are a good fit to collaborate with. Might find devs who are a good fit there. I don't have expertise in payments or need in that area currently, but likely others do.

[ziedHamdi]

Thanks for the tips, actually I posted a question searching for an open source lib on reddit, and from the answers it seems there are not any yet. So as I have to implement it for my project anyway, I decided to build it in public. So I'm still at the beginning of the adventure.

Happy we talked @jasongitmail, take care

[jasongitmail]

Likewise! Best of luck with your project.

[hazlanmshabli]

https://medium.com/@uriser/authentication-in-sveltekit-with-auth-js-7ff505d584c4 this looks promising. I am trying it out