HalfdanJ / svelte-google-auth

svelte-google-auth

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.

How it works

The library follows the official guide for oauth2 code model.

1. User authenticates with the site in a popup
2. Popup responds with a code that gets sent to the backend
3. Backend converts the code to tokens (both an access token and refresh tokens)
4. Tokens get signed into a jwt httpOnly cookie, making every subsequent call to the backend authenticated
5. Library returns the authenticated user to the client using page data

Getting started

Install

npm i svelte-google-auth

Credentials

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:

• Authorized JavaScript origins: http://localhost:5173
• Authorized redirect URIs: http://localhost:5173/_auth/callback

Hooks

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 });
};

+layout.server

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) };
};

Page

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>

Example

Check out the example to see how the API can be used. Run npm run dev to run it locally.