This library provides an easy-to-use solution for Google authentication in SvelteKit, facilitating interaction with Google Identity Services and cookie storage for authenticated users in subsequent visits. It also allows authorized Google API calls from the client and server sides.
The library follows the official guide for oauth2 code model.
npm i svelte-google-auth
Create an OAuth2 Client Credentials in Google Cloud. Store the JSON file in your project but avoid committing it to Git. The following Authorized redirect URIs and Authorized JavaScript origins must be added:
http://localhost:5173
http://localhost:5173/_auth/callback
In src/hooks.server.(js|ts)
, initialize the authentication hook.
import { SvelteGoogleAuthHook } from 'svelte-google-auth/server';
import type { Handle } from '@sveltejs/kit';
// Import client credentials from json file
import client_secret from '../client_secret.json';
const auth = new SvelteGoogleAuthHook(client_secret.web);
export const handle: Handle = async ({ event, resolve }) => {
return await auth.handleAuth({ event, resolve });
};
In the src/routes/+layout.server.(js|ts)
file, create the following load
function:
import { hydrateAuth } from 'svelte-google-auth/server';
import type { LayoutServerLoad } from './$types.js';
export const load: LayoutServerLoad = ({ locals }) => {
// By calling hydrateAuth, certain variables from locals are parsed to the client
// allowing the client to access the user information and the client_id for login
return { ...hydrateAuth(locals) };
};
To force a user to sign in, you can redirect them to the login page as shown in the following updated load
function:
import { hydrateAuth } from 'svelte-google-auth/server';
import type { LayoutServerLoad } from './$types.js';
const SCOPES = ['openid', 'profile', 'email'];
export const load: LayoutServerLoad = ({ locals, url }) => {
if (!isSignedIn(locals)) {
throw redirect(302, generateAuthUrl(locals, url, SCOPES, url.pathname));
}
// By calling hydateAuth, certain variables from locals are parsed to the client
// allowing the client to access the user information and the client_id for login
return { ...hydrateAuth(locals) };
};
You can now use the library on any page/layout like this
<script lang="ts">
import { invalidateAll } from '$app/navigation';
import { signIn, signOut, initialize } from 'svelte-google-auth/client';
import type { PageData } from './$types.js';
export let data: PageData;
initialize(data, invalidateAll);
</script>
{data.auth.user?.name}
<button on:click={() => signIn()}>Sign In</button>
<button on:click={() => signOut()}>Sign Out</button>
Check out the example to see how the API can be used. Run npm run dev
to run it locally.