Django with Sveltekit authentication

ismail · 16 Feb 2023, 09:35

I'm trying to authenticate my Django back-end with Sveltekit front-end.

I've followed the Django SSO Tutorial and it was smooth: https://fusionauth.io/blog/2023/01/24/single-sign-on-django-fusionauth
But when it comes to Sveltekit site, I didn't know how to do it.

I'm trying to Use Auth.js (the next version of NextAuth 'Framework Agnostic'), and it provides an adapter for FusionAuth but it's not well documented (yet): https://next-auth.js.org/providers/fusionauth

src/hooks.service.ts

import { SvelteKitAuth } from "@auth/sveltekit"
import FusionAuthProvider from "@auth/core/providers/fusionauth"
import { 
    FUSIONAUTH_ISSUER,
    FUSIONAUTH_CLIENT_ID,
    FUSIONAUTH_CLIENT_SECRET
} from "$env/static/private"

export const handle = SvelteKitAuth({
    providers: [
        FusionAuthProvider({
            id: 'fusionauth',
            name: 'FusionAuth',
            issuer: FUSIONAUTH_ISSUER,
            clientId: FUSIONAUTH_CLIENT_ID,
            clientSecret: FUSIONAUTH_CLIENT_SECRET
        }),
    ]
})

src/routes/+page.svelte

<script lang="ts">
    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"
    />
    {/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="notSignedInText">You are not signed in</span>
    <button on:click={() => signIn("fusionauth")}>Sign In with FussioAuth</button>
{/if}
</p>

I have the Authorized redirect URLs as: http://localhost:8000/oidc/callback/, http://localhost:5173/api/auth/callback/fusionauth
for Django and Sveltekit respectively.
And I have the Authorization Code selected in the Enabled grants as specified in the Auth.js documentation.

When I click the login button I'll get:

Error: Not found: /auth/csrf

Is it possible to authenticate both Django and Sveltekit using FusionAuth, and how it is done if that's the case?

dan · 30 Apr 2023, 18:33

@ismail

Thanks for using FusionAuth!

I don't have any experience with SvelteKit, but this new NextJS quickstart might be of interest to you:

https://fusionauth.io/blog/2023/04/26/nextjs-single-sign-on

Dan