SvelteKit で @auth/sveltekit を使って Google ログインできるようにする

npm create svelte@latest sveltekit-auth

cd sveltekit-auth
npm install
npm run dev

npm install @auth/core @auth/sveltekit

touch .env.local

GOOGLE_CLIENT_ID="xxxx"
GOOGLE_CLIENT_SECRET="yyyy"

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

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

<script>
    import { signIn, signOut } from "@auth/sveltekit/client";
	import { page } from '$app/stores';
</script>

<h1>SvelteKit Auth Example</h1>
<p>
	{#if $page.data.session}
		{#if $page.data.session.user?.image}
			<span style="background-image: url('{$page.data.session.user.image}')" class="avatar"></span>
		{/if}
        <span class="signedInText">
            <small>Signed in as</small><br>
            <strong>{$page.data.session.user?.name ?? "User"}</strong>
        </span>
        <button on:click={() => signOut()} class="button">Sign out</button>
    {:else}
        <span class="notSignedIntText">You are not signed in</span>
        <button on:click={() => signIn("google")}>Sign in with Google</button>
	{/if}
</p>

openssl rand -hex 32

AUTH_SECRET="0000000000000000000000000000000000000000000000000000000000000000"

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

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

import type { LayoutServerLoad } from "./$types";

export const load: LayoutServerLoad = async (event) => {
    return {
        session: await event.locals.getSession()
    }
}

mkdir src/routes/authenticated
touch src/routes/authenticated/+page.svelte

<h1>This page is for authenticated users only</h1>

import { SvelteKitAuth } from '@auth/sveltekit';
import Google from '@auth/core/providers/google';
import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET } from '$env/static/private';
import { redirect, type Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';

const authorization: Handle = async ({ event, resolve }) => {
    if (event.url.pathname.startsWith('/authenticated')) {
        const session = await event.locals.getSession();
        if (!session) {
            throw redirect(303, '/');
        }
    }

    return resolve(event);
}

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

import { SvelteKitAuth } from '@auth/sveltekit';
import Google from '@auth/core/providers/google';
import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET } from '$env/static/private';
import { redirect, type Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';

const authorization: Handle = async ({ event, resolve }) => {
	if (event.url.pathname.startsWith('/authenticated')) {
		const session = await event.locals.getSession();
		if (!session) {
			throw redirect(303, '/');
		}
	}

	return resolve(event);
};

export const handle = sequence(
	SvelteKitAuth({
		providers: [
			Google({
				clientId: GOOGLE_CLIENT_ID,
				clientSecret: GOOGLE_CLIENT_SECRET
			})
		],
		callbacks: {
			session: ({ session, token }) => {
				console.log(token);
				return session;
			}
		}
	}),
	authorization
);