sveltekit-passport-oauth2

Easy way to use passport (with OAuth2 authentication) in your svelte-kit projects

npm install sveltekit-passport-oauth2

Configure backend

Configure hooks.ts

The example bellow uses Google but it should work for other strategies (also tested with facebook). Assuming the following file structure src/hooks.ts and src/routes/auth/google/(login|logout|callback).ts

import {
    ConfigurePassportOAuth2,
    OAuthHandleInput,
    OAuthCreateCookie,
    DefaultCookieName
} from 'sveltekit-passport-oauth2';

ConfigurePassportOAuth2([
    {
        strategy: new GoogleStrategy(
            {
                callbackURL: 'http://localhost:3000/auth/google/callback.json',
                clientID: 'use-your-google-client-id',
                clientSecret: 'use-your-google-client-secret',
                passReqToCallback: true
            },
            OAuthCreateCookie(/*cookieName = DefaultCookieName, cookieSettings?: CookieSettings*/)
        )
    }
]);
export const handle = sequence(addUserToRequest);

//add the user info to request (you can access this info in and endpoint using `request.locals`)
async function addUserToRequest({ request, resolve }: OAuthHandleInput) {
    const cookies = cookie.parse(request.headers.cookie || '');
    const cookieId = cookies[DefaultCookieName];
    if (cookieId) {
        request.locals = Database[cookieId]; //change this to retrieve from database
    }
    const response = await resolve(request);
    return response;
}

//this will expose user info in session and can be retrieved in the front end using $session
export function getSession(request: ServerRequest<Locals>): Locals {
    return request.locals;
}

Create authentication routes

//routes/auth/google/index.json.ts
//first parameter is the strategy name
//second paramater are passport options (usually you'll only use the "scope" property)
export const get = loginMethod('google', { scope: ['email', 'profile'] });

//routes/auth/google/callback.json.ts
//first parameter is the strategy name
//second parameter is a callback in case you want to redirect. If you don't pass a callback the response will
//be only headers to set cookie to maxAge={DefaultCookieSettings.maxAge} and an empty body
//CHOOSE which kind you of callback you want (with redirect or popup)

//WITH REDIRECT
export const get = callbackMethod(
    'google',
    (request: ServerRequest<OAuthSession>, response: OAuthResponse) => {
        if (request.locals.authenticated) {
            Database[request.locals.cookieId] = {
                ...request.locals,
                roles: ['guest', 'admin']
            }; //just an example
            return response.redirect('/');
        }
        return response.redirect('/about');
    }
);

//WITH POPUP (NO REDIRECT)
export const get = callbackMethod(
    'google',
    (request: ServerRequest<OAuthSession>, response: OAuthResponse) => {
        if (request.locals.authenticated) {
            Database[request.locals.cookieId] = {
                ...request.locals,
                roles: ['guest', 'admin']
            }; //just an example
        }
        return response.send(
            `<script>window.opener.postMessage(${JSON.stringify({
                authentication: {
                    success: true,
                    data: Database[request.locals.cookieId]
                }
            })}, '*');window.close();</script>`
        );
    }
);

//routes/auth/logout.json.ts
//first parameter is the cookieName, if you pass 'undefined' it will use the {DefaultCookieName}
//second parameter is a callback in case you want to redirect, if you don't pass a callback the response will
//be only headers to set cookie to maxAge=0 and an empty body
export const get = logoutMethod(undefined, (request, response) => {
    return response.redirect('/');
});

Configure frontend

//WITH REDIRECT
//no javascript code required

//WITH POPUP (NO REDIRECT)
import { page, session } from '$app/stores';
import { onMount } from 'svelte';

onMount(() => {
    window.addEventListener(
        'message',
        (event) => {
            if (event.data.authentication) {
                if (event.data.authentication.success) {
                    $session = event.data.authentication.data;
                } else {
                    $session = {};
                }
            }
        },
        false
    );
});

async function authenticate() {
    const popup = window.open('/auth/google.json', 'Authentication', 'height=600,width=450');
    if (window.focus) {
        popup.focus();
    }
}

<!--WITH REDIRECT-->
<a href="/auth/google.json"rel="external"
>Login</a>
<a href="/auth/logout.json" rel="external">Logout</a>

<!--WITH POPUP (NO REDIRECT)-->
{#if $session.authenticated}
    <li>
        <a href="/auth/logout.json" rel="external">Logout</a>
    </li>
{:else}
    <li>
        <a href="/" on:click={authenticate}>Login</a>
    </li>
{/if}

UTILS: store with methods to check authenticated and permission

import { session, page } from '$app/stores';
import { derived } from 'svelte/store';
import { Database } from '$lib/Storage';

export const authorization = derived([page, session], ([$page, $session]) => ({
    canAccess: () => {
        return (
            $session.authenticated &&
            $session.roles.some((role) => Database['roles'][role].test($page.path))
        );
    },
    canUse: (roles?: string[]) =>
        !roles || ($session.authenticated && $session.roles.some((role) => roles.includes(role)))
}));

{#if $authorization.canAccess()}
    <h2 class="text-red-600">Can access</h2>
{/if}

{#if $authorization.canUse(['admin'])}
    <h2>can use</h2>
{/if}